IE6 and the margin problem...

[SooTyLaD]

'right guys,

something i come across each time i code a site, is the problem IE6 has with making things bigger than they really are...

for example, i have one thing, floated next to another thing, all measured out nicely and all that, but when it comes to the IE6 checks, things that were "next to" are now "underneath"...

the solution which works most of the time is simply to make the containing div wider, which i hate doing, can't stand messing my neat code up just cuz of IE6 (i do however realise that it must me done)

so... i was wondering since this is by far the most common problem i encounter (despite using the xhtml 1.1 dtd), if any of you knew a tried-and-tested workaround for this as i really do stumble across the problem all the time and hate growing the container divs to accomodate...

if anyone could explain whats happening or suggest a fix i'd be most grateful

 

[Dj_Jestar]

* html { margin-left: 0pt; margin-right: 0pt; }

 

[SooTyLaD]

naah that didn't do anything as i already have:

* { margin: 0; padding: 0; border: 0; }

surely everyone has this problem?

i tend to do 2 column layouts as a left column with float: left; and the right column with a left margin of the width of the left column... could this method be part of the issue?

 

[Dj_Jestar]

the reason for using '* html' is because IE6 thinks there is a parent to html, whereas all other browsers know there isn't one, thus in IE6, the margins are applied, but in everything else they are not.

 

[SooTyLaD]

actually, adding in the "html" really messed a lot of stuff up strangely enough and still didn't fix the ie bug of stuff moving below where it should be

i hate IE6 so bad.

 

[Tripnologist]

Does one have a margin applied in the same direction as the float?

ahh.. just read the post a couple up. I usually just do them as seperate floated columns. Works everytime without any hassle.

 

[Sic]

why don't you use conditional comments to put alternate stylesheets in instead of hacking your nice, valid stylesheet?

 

[SooTyLaD]

yeah from now on i think i'll use conditionals... i fixed the issue by having the left column positioned absolutely, this worked a treat...

maybe we should start a conspiracy that if you use IE6 you are 1000 times more susceptible to contracting the *enter a gruesome name* virus so people would move to 7

 

[Izi]

IE6 Bugs are a pain in the bum!

The way i do it:

#col1{
width: 200px;
float: left;
}

#col1 .content{
padding-right: 10px;
padding-left: 10px;
}

#col2{
width: 200px;
float: left;
}

#col2 .content{
padding-right: 10px;
padding-left: 10px;
}

<div id="col1">
<div class="content"></div>
</div>

<div id="col2">
<div class="content"></div>
</div>

 

[kkbigal]

Sounds like a case of the infamous IE6 "Margin-doubling bug" which occurs with floated items

The quick and easy way to fix this problem is to add the following CSS to the the div being floated:

display:inline;

This makes margins the correct size in IE

 

[Sic]

and also makes you unable to define a width on the element.

 

[kkbigal]

True, but there is another workaround if you can't use the display:inline hack.

Assume the margin is meant to be 20px wide, try the following in your CSS for the floated div with margin:

margin-left:20px;
_margin-left:10px;

The top line is read by Firefox, IE7 etc while the second line will be read by IE6. It's dirty but it does work.

 

[unwashed potato!]

True, but there is another workaround if you can't use the display:inline hack.

Assume the margin is meant to be 20px wide, try the following in your CSS for the floated div with margin:

margin-left:20px;
_margin-left:10px;

The top line is read by Firefox, IE7 etc while the second line will be read by IE6. It's dirty but it does work.

yeah thats bascially the way to do it, but instead of using underscore just use conditional statements and stick the valid styling in a separate style sheet

 

[SooTyLaD]

jeezus, can't we sue Microsoft for monopolizing the browser market with IE6 back in the day... wouldn't have minded if they'd have done it with a good browser but good god what were they thinking????

 

[Slogan]

One of the most depressing elements of web design is the variation of browsers.

I'm getting back on the wagon at the moment so this thread and the replies were useful.

 

[Sic]

True, but there is another workaround if you can't use the display:inline hack.

Assume the margin is meant to be 20px wide, try the following in your CSS for the floated div with margin:

margin-left:20px;
_margin-left:10px;

The top line is read by Firefox, IE7 etc while the second line will be read by IE6. It's dirty but it does work.

I just don't understand why people would hack. It's not like there's an upper limit to the amount of stylesheets you can reference.

 

[unwashed potato!]

I just don't understand why people would hack. It's not like there's an upper limit to the amount of stylesheets you can reference.

minus the fact it is a hack i actually prefer having the styling for each element together. it makes so much more sense to have it all in one place surely then bits and bobs in different places? i can see why you might prefer having all ie styling together but to me that is worse, it would be like saying you should have all the background styling in one sheet, then margin styling in another, then padding in another so that if the problem is background you can easily change it quickly

 

[Sic]

minus the fact it is a hack i actually prefer having the styling for each element together. it makes so much more sense to have it all in one place surely then bits and bobs in different places? i can see why you might prefer having all ie styling together but to me that is worse, it would be like saying you should have all the background styling in one sheet, then margin styling in another, then padding in another so that if the problem is background you can easily change it quickly

it wouldn't be like that at all. Maybe it'll make more sense if I explain the way I use stylesheets, so you don't think I separate them out in such an arbitrary way as by attribute!

depending on the size/variation of content in the site, I'll have a stylesheet that encompasses all default site styling. It includes all the stuff for the layout, fonts, default margins, form elements and so forth. It has an overriding stylesheet for each MS browser that I support (currently 6 and 7). Then if there are elements on a page that are to be styled differently from the default, I create a new stylsheet, @import the default one and include the page-specific one. Think of it as inheritance in CSS. Because of the way I generate markup, each page I do allows me to define the stylesheet for good browsers and the IE browsers, so it works very well, separates good CSS from bad CSS and doesn't require any hacks. Might sound a little convoluted but it saves learning all the horrible hacks that may or may not solve my problem.

the thing with the MS browsers is the attributes/selectors they do support can be used, but the results vary so wildly that it's not viable to have everything in the same stylesheet unless you use hacks. Also, if you go for a job and they are pro web standards, when you show them your CSS, they won't like it because a lot of hacks invalidate CSS.