Margin Spacing Problem

[brayd]

I can't control the size of the margin between the bottom of two floated horizontal boxes and a paragraph directly below the two floated horizontal boxes. In IE 5, IE 5.5, IE 6 and IE 7 there is a fairly large margin between the bottom of two floated horizontal boxes and the paragraph below. However, in all other browsers the bottom of the two floated horizontal boxes is flush against the top of the paragraph. How do I control the margin between the bottom of the two floated horizontal boxes and the top of the paragraph so the margin height displays consistently across most browsers?

To see the problem please visit the following URL:

www.gochecksite.com

The two floated horizontal boxes are yellow and green.

Both the XHTML and CSS validate and I'm using a strict doc type.

I'm using parts of the Blueprint CSS framework but haven't modified any of the original Blueprint code. I'm using the layoutandstyle.css to override Blueprint and to do all the layout and styling.

You can view my CSS files at the following URL's:

http://www.gochecksite.com/css/layoutandstyle.css

http://www.gochecksite.com/css/blueprint/screen.css

http://www.gochecksite.com/css/blueprint/ie.css

[brayd]

I've removed the paragraph immediately below the floated colored boxes. Now there is a white space between the bottom of the floated colored boxes and the top of the footer when viewed in IE browsers (5, 5.5, 6 and 7). However, when viewed in all other browsers the bottom of the floated colored boxes are flush against the footer.

You can view the problem by visiting the following URL:

www.gochecksite.com

[BLiZZaRD]

in CSS:



* {
margin: 0;
padding: 0;
}


This goes in your CSS at the very top. Should be the first thing, even before the body { definitions. Margins in IE and all other browsers are different, setting them all to 0 to begin gives you the level playing field for cross browser appearances you desire.

99% of the time, this is your fix.

[brayd]

Thanks Blizzard but inserting the following code does not resolve the problem.

* {
margin: 0;
padding: 0;
}

Any other suggestions?

[BLiZZaRD]

You are talking about the green and yellow boxes on the page, yes?


My apologies for being obtuse..

What is it exactly you want? You have a problem with the boxes, and a paragraph, but removed the paragraph, and the boxes sit flush in all but IE. Do you want them flush, or not flush with bottom and/or each other?

[brayd]

Blizzard

No I don' t want the colored boxes to be flush with the footer. I would like to have a space between the colored boxes and the footer that is consistent across most browsers.

I'm not concerned at this point with the boxes being flush with each other.

I hope this helps clarify things.

[BLiZZaRD]

.boxmainleft {
float:left;
background: green;
width: 385px;
padding-bottom: 2em;
}

.boxmainright {
float:right;
background: yellow;
width: 385px;
padding-bottom: 2em;
}


Just pad it :D

[brayd]

When I add padding-bottom: 2em; to .boxmainleft and .boxmainleft it only adds padding "within the colored boxes".

Please note that I just tried commenting out the piece of code below in the Blueprint screen.css file and it collapsed the colored boxes so they are flush with the footer in IE and Firefox. I wonder if this piece of code is somehow causing my problem. It seems to be adding margin to the bottom of all my primaryContent sections. I've subsequently removed the comments from the code below so the original problem is still displaying.

p {margin:0 0 1.5em;}

Any other suggestions?

[BLiZZaRD]

oh, my bad, I didn't see the container.



#boxesmain {
margin:0;
padding-bottom: 2em;
}


A little <p class="clearboth">&nbsp;</p> between the boxes and paragraph probably wouldn't hurt either. :D

Let me know. If you still have problems I will dismantle the whole thing and rebuild it for you.

[brayd]

I tried using the following code but problem still persists:

#boxesmain {
margin:0;
padding-bottom: 2em;
}

Thanks Blizzard for all your help. I've been trying to resolve this problem for the last two days but can't seem to find a solution. I'm under a fairly tight deadline to get this design done. If you have time to rebuild the two colored boxes so that they will work with my site that would be fantastic. Please don't modify the code in the screen.css or ie.css files. Any coding should be done directly in the layoutandsty.css file.

Thanks again for all your help.

Cheers!

[brayd]

Blizzard

I can't believe I forgot to put the following piece of code that you suggested immediately after my colored boxes. It fixed my margin spacing problem completely!

<p class="clearboth">&nbsp;</p>

Thank-you so much!

[BLiZZaRD]

YAY! Glad it is working now! Let me know if I can do anything else.