[SOLVED] IE6 width problem?

[schilly]

i'm having problems getting elements to line up properly in IE6. Everything is fine in FF, Safari and IE7 but for some reason IE6 is short about 5px or so compared to the others.

 

I'm assuming this is some kind of IE6 bug that needs a hack. Can anyone help me?

[SuperBlue]

IE6 is broken, and should not be supported in "modern" webdesign.

 

Tell your users to shift their browser. :-)

[schilly]

i wish that were true. oh how many headaches would that save me.

[jcombs_31]

There could be a number of reasons. You could have messed up the box model, different browsers handle this differently. What I mean by that is the way your width/padding/margins/borders are added to get the total size of an element.

 

Could also be something like the 3 pixel margin bug when floating elements.  You'll need to provide more information to get to the problem.

[schilly]

www.croatiancentre.com

Joomla implementation so the CSS is a bit of a mess.

#alles {
width:100%;
}

#seitencontainer {
margin:auto;
width:1000px;
}

#seitencontent {
background-color:#FFF6DC;
border:2px solid #693802;
padding:0;
width:1000px;
}

#photo_header {
background-color:#FFFFFF;
border:4px solid #C95B02;
display:block;
float:left;
height:150px;
margin:5px 5px 2px;
width:982px;
}

the photo_header class is the one that is short about 5+ px in IE6. photo_header is contained in seitencontent which is in seitencontainer which is in alles.

 

dont ask about the class names, was a german template i modded.

 

thanks for the help.

 

[jcombs_31]

Could be the double margin bug, but I've also never seen the margins declared the way you have.

 

margin: top right bottom left

 

or

 

margin: top/bottom left/right

 

Is there a reason the _header is floated?  Try setting the display to "inline"

[schilly]

k lemme try that. pretty sure i used the 4 pt margin and firebug just displayed it like that when left/right or top/bottom is the same.

[schilly]

ok here is the real code. changed the seiteencontent to width 996 b/c of the border.

#seitencontainer {
width:1000px;
margin:auto;
}

#seitencontent {
padding:0px 0px;
width: 996px;
border: #693802 2px solid;
background-color:#fff6dc;
}

#photo_header{
margin: 5px 5px 2px 5px;
display:block;
border: 4px #c95b02 solid;
width:978px;
height:150px;
background-color:#FFFFFF;
float:left;  	
}

if i remove the float it ignores the margin constraints. block or inline doesn't seem to make a difference.

 

[schilly]

ok reverted to the original code b/c that threw off ie6 even more

[schilly]

well use the _width hack to even it out. doesn't look as nice but at least it lines up. when will ie6 be phased out....zzzz

[SuperBlue]

When Web Designers start to wake up, and stop working as slaves (more or less).

 

 

The truth is that there is no reason to waste time on older browsers, those still doing it are shooting them self in the foot. The web are moving forward, and so should we. I wont even begin to show you the countless examples of websites that don't support IE6 anymore, because that is not a valid point. The point is that IE6 and earlier are unpredictable, and that is something designers shouldn't have to deal with.

 

Some designers still make their pages "viewable" in older browsers, take note of viewable. Rendering bugs in such broken browsers is totally acceptable, people must realize that they will be using them on their own responsibility.

 

 

 

You should also note that IE6 will be just about 9 years old at August the 27, not that it would matter much if it supported current standards. But I'm not even sure standards where standards back then, and we need standards for simplicity, IE6 don't have them.

 

If you are designing for IE6, then you might as well use tables. IE6 was also released a few months before windows XP, which roughly could mean that it belongs to an unsupported platform.

 

 

There is no reason we should spend hours fixing rendering issues, when something as simple as installing the latest browser version or updates would be enough. Just like you would update any other bit of software as needed. I couldn't care less if someone with windows 9x, refuses to upgrade, or shift to Opera (which for some reason still works on 9x).

 

 

Its just unfortunate for the few people unable to upgrade for justified reasons, but i am choosing to move forward, i am choosing to follow the standards.

 

The mess has to stop at some point, that point is now! Or ask yourself this, why shouldn't we be able to tell users to install the latest updates for their browser to fix X issue? Software developers have done it for years, its about time we start to wake up.

[schilly]

great post blue. i think i will stop wasting my time. especially now that ie8 is out.

[jcombs_31]

It really all depends on the type of website you are developing. For a site like this, no problem, but if you are developing any type of ecommerce or corporate site you probably don't want to turn off users.

[TheFilmGod]

jcombs -

 

margin: a b c; == margin: a b c b;

 

It's a short hand for saying, top/bottom are different, but the sides will be the same.

 

I'm a bit surprised you've never seen that before. It's rather common.