Page 1 of 1
[56K WARN] Broken Boxes in IE
Posted: Thu May 24, 2007 3:26 pm
by jason
The page itself can be found here:
http://mnc.devnetwork.net/template.html
The problem exists in IE7 for sure, and probably earlier versions as well.
Shows up fine in Firefox.
Site Validates for both XHTML and CSS.
Image of the problem:
Zoom in on one part:
As you can see, it looks like feet are sticking out the bottom.
What's up with that? Considering CSS bugs are all given funky names, I haven't been able to find anything about this. So what's up? Why are these feet showing up at the bottom of my DIV tags? What am I missing?
Posted: Thu May 24, 2007 3:53 pm
by sentback
It's because you are probably using padding and IE has a broken box model. That's why the box is taller and it repeats the background. You can set the repeat to none and the feet as you call them won't show. The box will however still be taller then in FF or Opera.
Posted: Thu May 24, 2007 4:01 pm
by jason
Um... no. You are wrong.
Posted: Thu May 24, 2007 4:09 pm
by feyd
I seem to remember placing <br /> after images to fix these problems in the past.
Posted: Thu May 24, 2007 4:11 pm
by sentback
I could be wrong but as far as I know, the IEs problem is that padding isn't subtracted from the box but added istead. Therefor the box is biger and the background is repeated. Have you tried turning the repeat off? If you paste the code maybe someone can help you if I'm wrong..
Posted: Thu May 24, 2007 4:14 pm
by jason
sentback: Didnt' really think I would have to paste the code as well, considering I link to it at the top of the page.
Their is nothing to not repeat though as their are no background images. Also, there is no padding added to anything that should affect that.
Anyways, here's the current code.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
padding: 0px;
}
#titlebanner {
width: 905px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#globalnav {
width: 905px;
margin-top: 6px;
margin-right: auto;
margin-bottom: 6px;
margin-left: auto;
}
#content {
width: 905px;
margin-top: 6px;
margin-right: auto;
margin-bottom: 6px;
margin-left: auto;
}
#content #widgets {
width: 414px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 491px;
}
#content #widgets p {
color: #FFFFFF;
font-family: Calibri, "Palatino Linotype";
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
}
#content #widgets #advertising p {
color: #000000;
}
#content #widgets #advertising form {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
}
.promotext {
font-family: Calibri, "Palatino Linotype";
font-size: large;
font-weight: bold;
text-align: center;
display: block;
padding: 0px;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
#content #maincontent {
margin: 0px;
padding: 0px;
width: 486px;
float: left;
}
#content #widgets #users {
width: 208px;
float: left;
vertical-align: top;
background-color: #1818FF;
display: inline;
}
#content #widgets #advertising {
width: 200px;
margin-left: 214px;
background-color: #8CFB18;
}
-->
</style>
</head>
<body>
<div id="titlebanner"><img src="images/titlebanner.jpg" alt="" width="690" height="55" /><img src="images/help_tb.jpg" alt="" width="64" height="55" /><img src="images/register_tb.jpg" alt="" width="72" height="55" /><img src="images/signin_tb.jpg" alt="" width="79" height="55" /></div>
<div id="globalnav"><img src="images/aboutus_mn.jpg" alt="" width="104" height="24" /><img src="images/privacypolicy_mn.jpg" alt="" width="158" height="24" /><img src="images/devzone_mn.jpg" alt="" width="108" height="24" /><img src="images/forums_mn.jpg" alt="" width="92" height="24" /><img src="images/blog_mn.jpg" alt="" width="61" height="24" /><img src="images/MyNetCredSite_14.jpg" alt="" width="382" height="24" /></div>
<div id="content">
<div id="maincontent"> <span class="promotext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Pellentesque eu orci vel erat iaculis auctor. Ut non mauris
</span> <img src="images/latestnews_mc.jpg" alt="" width="485" height="29" /> </div>
<div id="widgets">
<div id="users" class="208"><img src="images/newusers_widget.jpg" alt="" width="208" height="15" />
<p>asdf</p>
<img src="images/newusersbtm_widget.jpg" alt="" /></div>
<div id="advertising" class="200">
<form action="" method="get">
<label>Username
<input name="loginusername" type="text" id="loginusername" tabindex="1" size="20" />
</label>
<label>Password
<input name="loginpassword" type="text" id="loginpassword" tabindex="2" size="20" />
</label>
</form>
<img src="images/whynetcred_widget.jpg" alt="" width="200" height="31" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Pellentesque eu orci vel erat iaculis auctor. Ut non mauris nec pede adipiscing nonummy. Vestibulum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Pellentesque eu orci vel erat iaculis</p>
<img src="images/MyNetCredSite_26.jpg" alt="" width="200" height="70" /> <img src="images/MyNetCredSite_27.jpg" alt="" width="200" height="60" /> </div>
</div>
</div>
</body>
</html>
I'll try the <br /> thing next.
Posted: Thu May 24, 2007 4:16 pm
by jason
Tried the <br /> tag thing. Added it after the <img> tag on line 112.
Code: Select all
<div id="users" class="208"><img src="images/newusers_widget.jpg" alt="" width="208" height="15" />
<p>asdf</p>
<img src="images/newusersbtm_widget.jpg" alt="" /><br /></div>
Didn't solve the problem.
Posted: Thu May 24, 2007 4:20 pm
by jason
Sentback, also, just remembered this. IE's problem was that it didn't add padding/margin to the box. If you set the width to 300px, and the padding and margins to 10px each, the resulting content would only have 260px of space. The correct way is in fact to add the padding and margins to the width. So that same scenario would mean the resulting box would in fact take up 340px of space. I believe you can search for Tantek box model hack to learn more about it.
Either way, I don't see anywhere I am applying a padding or marging that should affect the bottom of the DIV's, and I am (at least I believe I am) removing all padding and margins for all elements at the start of my CSS.
Posted: Thu May 24, 2007 5:21 pm
by sentback
Oh yes, it's the other way around. Sorry for trying to help. I see you are the great expert and you know it all. Well... All... Except this one a believe?
I just don't see why you had to be sarcastic...
Posted: Thu May 24, 2007 6:16 pm
by Kieran Huggins
remove:
the
after your bottom img
then add:
to your css
or... you could avoid the image soup with jquery's corners
http://methvin.com/jquery/jq-corner-demo.html
Posted: Thu May 24, 2007 6:35 pm
by nickvd
Highly recommended!

Posted: Thu May 24, 2007 9:06 pm
by jason
Gonna go ahead and try the fix. As for the jquery stuff, it just does rounded edges, which wouldn't work as I plan to use the bottom edges for things as well. I'll be removing most of the images from the actualy HTML anyways, but need to get the template finished first.
Posted: Fri May 25, 2007 8:51 am
by Pezmc
nickvd wrote:
Highly recommended!

I also recommend it but see the newer version
Posted: Fri May 25, 2007 12:48 pm
by RobertGonzalez
Looks like you may have gotten it fixed? I can't see that peekaboo effect in IE6.