PDA

View Full Version : CSS: IE margin problems are making me want to slap bill gates!!


GOLGO-13
August 25th, 2005, 03:54 AM
hello..
i've got a two column CSS layout using a container/wrapper div that has a box model hack applied to it. the container is 770 pixels wide (750 + 10px paddings for compliant browsers)..

so, the header is automatically "indented" 10 pixels on each side by the padding in the container. great.

however, i want the two colums and the footer to be "indented" 20pixels on each side. so i tried to set the left margin of the content column to 10px.. (10 + 10 = 20 )

but IE indents it 20px!! not 10.. (10 + 20 = 30 )

FF treats it just fine.. but IE..?? :{


i'm hoping somebody could tell me what sort of IE problem i'm dealing with, and suggest a workaround.. i've spent the day trying to figure it out... :hurt::{:hurt::hurt::hurt::hurt::{

HELP!!
Why does IE indent it 20px when its only supposed to go 10px!!

the code should be really easy to read through.. i'll post it in here, as well as attach a copy of it...

thanks!!




the CSS



<style media="all" type="text/css">

html, body {
margin: 0;
padding: 0;
font-family: helvetica, Tahoma, Verdana,Serif;
}




#container {
background-color:#FFCC00;
margin: 0 auto;
width: 750px;
padding: 0px 10px 0px 10px;
background-repeat:no-repeat;


}


* html container { /* This is the "Tan hack" for IE */
width: 770px;
w\idth: 750px;
}







#header {
background-color:#000000;
color:#FFFFFF;
padding: 20px;
/* margin:0px 0 0 0; */
margin: 0px;
}


#artwork {
border: 1px solid black;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px
}





/* here's the left colum */
#content {
background-color:#FF9900;
margin: 0px 10px 0px 10px;


float:left;
width:487px;
}








/* the "some info" box in the right column */
#sidebar {
background-color:#FF9900;

width: 230px;

float: left;
padding:0px;
}



/* the "more info" box */
#sidebar2 {
background-color:#FF9900;

width: 230px;
margin-top: 20px;
float: left;
padding:0px;
}




#footer {
margin: 20px 10px 0px 10px;
padding: 0px;
border: 1px solid black;
clear: both;
}

</style>








FYI, the "artwork" div is basicly a second header .. after adding the "skin" to the site, the artwork and header divs will combine to form one visual element.. and also note the back slash in the hack isnt showing in this post for some reason...




here's the html:






<div id="container">
<div id="header"><h1> logo/nav</h1></div>

<div id="artwork"><h1>artwork</h1></div>



<div id="content">
<h2>Main Content Area</h2>
<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content


</div>


<div id="sidebar">
<h2>Some Info</h2>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>


<div id="sidebar2">
<h2>More Info</h2>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>



<div id="footer">
<p>Notice that the rule for the footer has a margin of 0 pixels set
on the bottom and the body rule has 20 pixels of padding on the bottom.
This is because IE/Win does not show the bottom margin of this element.
I am not sure what bug this is specifically, but my work around is simple enough.</p>
</div>

</div>
icio
August 25th, 2005, 09:32 AM
When i'm doing css, i've gotten into the habbit of not applying padding to divs.

i use a layout like this:

<div id="side-bar"><div class="pad">&nbsp;</div></div>
and then i have the #side-bar without any padding and to the size that i want, and the .pad element with padding: 10px;.

hope this helps :thumb:
simplistik
August 25th, 2005, 10:49 AM
I swear I posted something this morning :lol: I do what icio does too, I make a spacer div which is just an empty div w/ a specified width or height. Another thing you can try to do is change 10px to 1em, and that should stay consistant cross browser, i believe.
GOLGO-13
August 25th, 2005, 02:04 PM
lol... "spacer divs" for CSS instead of "spacer gifs" for tables, huh?
:P


hahha... thanks ever so much for your responses.. i'll play around with both of your suggestions right after lunch!
ditt0
August 25th, 2005, 08:33 PM
Oh it's IE Double Float-Margin Bug.. Just add "display:inline;" in the css attributes for #content and it should be fine.
GOLGO-13
August 25th, 2005, 11:18 PM
When i'm doing css, i've gotten into the habbit of not applying padding to divs.

i use a layout like this:

<div id="side-bar"><div class="pad">&nbsp;</div></div>
and then i have the #side-bar without any padding and to the size that i want, and the .pad element with padding: 10px;.

hope this helps :thumb:


thanks! that did work!!!
tho it kinda turned into a whole new/diff site, code wise..

i think i may start to heed your advice tho, and be leery of padding and divs..





Another thing you can try to do is change 10px to 1em, and that should stay consistant cross browser, i believe.

that one ended up suffering from the same IE bug...
worked out aprox. like this:

.6em = 10px ( in FF )
.3em = 10px ( in IE )

so.. the same sort of ratio problem.. :(
i can see why you've gone with icio's solution in the past!!
i've never even tried to work with em's tho..so that was interesting!




Oh it's IE Double Float-Margin Bug..

cool...and now i know what the bug is called!!
that solution also worked!!
now knowing more about that bug.. i may approach the situation differntly in the future. :cowboy:


my conclusion for anybody who reads this thread (or the other thread related to this: http://www.kirupa.com/forum/showthread.php?t=189827 ) is that the spacer divs are certainly easier to understand and get your head around.. but addressing the IE bug with the inline display makes for less code. for what its worth..

and.. btw, i REALLY appreciate all your answers!!
now lemme see if i can find a question around here i can answer for somebody!!
thats all folks
July 27th, 2007, 10:54 AM
I to was having this issue, this works great, but is this still the preferred method, the reason I ask was this post is over two years old and didn't know if there is a better way now.

Cheers
GOLGO-13
July 27th, 2007, 05:05 PM
I to was having this issue, this works great, but is this still the preferred method, the reason I ask was this post is over two years old and didn't know if there is a better way now.

Cheers

this thread was REALLY helpful in my CSS learning curve! thanks again to everybody that replied. :?)

in the time since, i've simplified my code a bit, and only use padding to space things vertically. the code i use now looks something like this:



div#container {
margin:0 auto;
padding: 0;
width: 50em;
background: #FFFFFF url("/assets/bkg.gif");
}

/* =header */
div#header {
background-color:#FFFF00;
padding:0;
margin: 0 1em 0 1em;
}

#header_childElment {;}


div#left-col {
display:inline;
float: left;
width: 23.5em;
background-color:#66CC00;
margin:0 .5em 0 1em;
}

div#right-col {
display:inline;
float: left;
width: 23.5em;
background-color:#66CC00;
margin:0 .5em 0 1em;
}

/* =footer */
div#footer {
background-color:#FFFF00;
padding:0;
margin: 0 1em 0 1em;
}


.both { clear:both; } /*used with br tag to clear footer*/


although, i think the last time i used this type of layout, i was able to apply the clear property to one or both of the columns and was able to omit the .both br tag.

here's a site i made last year using this basic layout structure: http://redseatransportation.com/ (http://redseatransportation.com/)

i continue to use this basic layout over and over again because i'm familiar with it, and it seems to work quite well across many browsers. there's always "something" better tho.. let me know when you find it!