[56K WARN] Broken Boxes in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

[56K WARN] Broken Boxes in IE

Post 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:

Image

Zoom in on one part:

Image

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?
sentback
Forum Newbie
Posts: 24
Joined: Fri May 04, 2007 9:46 am

Post 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.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

Um... no. You are wrong.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I seem to remember placing <br /> after images to fix these problems in the past.
sentback
Forum Newbie
Posts: 24
Joined: Fri May 04, 2007 9:46 am

Post 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..
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post 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.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post 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.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post 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.
sentback
Forum Newbie
Posts: 24
Joined: Fri May 04, 2007 9:46 am

Post 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...
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

remove:

Code: Select all

vertical-align: top;
the

Code: Select all

<br/>
after your bottom img

then add:

Code: Select all

#widgets img {
	display: block;
}
to your css

or... you could avoid the image soup with jquery's corners ;-)
http://methvin.com/jquery/jq-corner-demo.html
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Kieran Huggins wrote:or... you could avoid the image soup with jquery's corners ;-)
http://methvin.com/jquery/jq-corner-demo.html
Highly recommended! :)
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

Kieran Huggins wrote:remove:

Code: Select all

vertical-align: top;
the

Code: Select all

<br/>
after your bottom img

then add:

Code: Select all

#widgets img {
	display: block;
}
to your css

or... you could avoid the image soup with jquery's corners ;-)
http://methvin.com/jquery/jq-corner-demo.html
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.
Pezmc
Forum Commoner
Posts: 53
Joined: Mon Nov 06, 2006 2:15 pm

Post by Pezmc »

nickvd wrote:
Kieran Huggins wrote:or... you could avoid the image soup with jquery's corners ;-)
http://methvin.com/jquery/jq-corner-demo.html
Highly recommended! :)
I also recommend it but see the newer version
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Looks like you may have gotten it fixed? I can't see that peekaboo effect in IE6.
Post Reply