IE leaves unnecessary spaces at the bottom of my divs

I have 3 columns on this page: 1st column is my "header" div, 2nd column has two divs called: "leaderboard" and "product" and column 3 has one div called "r4_c1".

Firefox displays the page good but the problem is that Internet Explorer leaves spaces at the bottom of each of my columns. To point this out I made the #container background color black.
links:

Here's the css link.

Any suggestions?

 

Without looking at the code, I believe you need to add font-size:0; in all the divs that won't have any content.

 

Hmm, is ie ignoring your height settings? I can't really test anything out at the moment, sorry.

Note: orange is not a valid color name (use the hex value).

 

Thanks a lot, that did the trick... wouldn't have crossed my mind...

 

Orange has been a part of the specification for a couple of years, now. It is spec'd as #ffa500. See http://www.w3.org/TR/CSS21/syndata.html#color-units

cheers,

gary

 

Adam's fix is required because of two IE bugs. IE reserves a line-box equal to the line height of the default font for the element. Say, you're at the basic font-size of 16px. The line height will default to 1.2 × the font size, or 19px. Modern browsers don't do this.

If you set the div height to zero, another IE bug kicks in. When you set a dimension, IE's hasLayout is set, and IE ignores the default {overflow: visible;} and expands the height to include the overflow. Even if modern browsers reserved the line-box, it would overflow the zero height div; no harm no foul.

The best fix is the one Adam gave you: set the font-size to zero. You could also try making the empty div {overflow: hidden;}. This bug can manifest itself in unexpected ways, so it is a Good Thing to know the root cause.

You should also be aware that the W3C strongly suggests that empty <p> elements be ignored. Firefox, for one follows the suggestion. The W3C further suggests that all empty block level elements (those empty divs, eg.) be ignored. I don't know of any browser that goes that far as of yet. You should reconsider the use of empty divs. They are never necessary.

cheers,

gary

 

You're like typing source of reference Gary!

I'm not sure what it says about the div elements with a class or ID - should they be ignored?

Many a time I them to hook in graphical objects. Unless there is another element present that I know I can style for a large site, I have to use an extra div. What can be done about that?

 

"Suggest" is considerably weaker than "should".

Whether the empty block element has an id or class or not doesn't matter. It is best not to use one.

Give me an example, preferably within context, of your usage. Due to my coding habits, I can't picture what you're talking about.

cheers,

gary

 

Your source is the working draft (not approved) for css 2.1 specs. As far as I know, the 16 valid HTML/XHTML colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Of course, I could be wrong

 

Actually it's a release candidate since Feb. 25, 2004[1]. CSS2.1 is a minor revision of css2 for the purpose of reflecting the real world level of css support. Some unsupported properties were dropped, some widely supported properties were added, errors were corrected and clarifications included. While it is not "official", it is, for all practical purposes, the current specification.

Rumor has it that a certain major vendor has blocked acceptance. I can't imagine why. It sounds much worse to not offer support for an eight year old standard (css2, 1998) than not to support a two year old standard (css2.1, 2004). :shrug:

cheers,

gary

[1] I've updated my bookmark to reflect the newer address.

 

In a recent project I used extra DIVs because I don't know what the author might take away, or add to the box in a few months time. Attaching to the empty or extra divs, was the best method, or a least the most obvious choice.

I'd rather not have a block image there, because style wouldn't be seperated from content.

http://fourshapes.com/sites/paradisefound/index.html

<div class="largeinfobox-top"></div>
	
	<div class="largeinfobox picture">
		<div class="largeinfobox-in">

			<!--content-->

		</div>
</div>

Code (markup):

.largeinfobox-top {/*hook in the top of the box*/
	clear:both; 
	background:url(../css-images/body_box-top.gif) no-repeat top left; 
	width:450px; 
	height:12px; font-size:0px; 
	margin-top:20px;
}

.largeinfobox{/*hook in bottom picture*/
	background:url(../css-images/body_box.gif) no-repeat bottom left;
}

.largeinfobox-in { /*extra div to allow for internal images to be attached to*/
	width:410px; 
	padding: 10px 20px;
	margin-bottom:20px;
}

.largeinfobox.picture .largeinfobox-in {/*attach picture to the extra div, for those that require it*/
	background:url(../css-images/pic07.gif) no-repeat 345px 0; 		width:310px;
	padding:0px 120px 10px 20px;
}

Code (markup):

Produces this;

.largeinfobox-top


.largeinfobox

 

Sorry to be a bit off topic but was exactly is www.w3.org i've been recieving a lott of e-mails off them and i havn't even signed up to the site! I thought they were junk e-mails.