CSS sibling IE 6 problems
Posted on Feb 16, 2009 by
Paul WhiteLike most developers I have made the gradual transition into using
CSS for most of my design and layouts on web pages. However as I was making this transition I forgot about some of the older browsers. I knew my client's
websites look great in All versions of firefox and IE 7+. But I had neglected to check to make sure things still look good in IE 6.
As I was on the phone with my client, it turned out what my client saw and what I saw where two very different sites. Basically my TD width and background-color
CSS styles were not being applied to one of my TDs. I spend an entire day tweaking it, and googling for an answer.
Finally the problem turns out to be that IE 6 does not support sibling referencing in
CSS. Sibling referencing got popular thanks to myspace. It was an easy way to access sibling tags and over write styling if the tag itself was not assigned a class, or ID. Since IE6 doesn't support it. Anyone viewing pages on myspace using IE6 are probably seeing something that looks very strange. Even though every machine with
Windows Vista has IE 7. XP came with IE 6 as a default. After checking our website's stats, it turns out that over 20% of our users are still using IE6 which means our site doesn't look very good to them.
For those of you who don't know what sibing referencing means, here is an example.
#content{
background-color:#FFFFFF;
width:950px;
padding:0px;
}
#content td{
width:600px;
background-color:#FFFFFF;
vertical-align:top;
padding: 0px 10px 0px 15px;
margin: 0px 0px 0px 0px;
color:#000000;
}
#content td+td{
width:300px;
background-color:#004A94;
padding: 0px 10px 0px 15px;
margin: 0px 0px 0px 0px;
vertical-align:top;
text-align:left;
}
Notice how I am referencing the second td tag with td+td. This works great in IE 7+ and firefox, but not in IE 6.
The Solution
If you want specific styles assigned to your sibling tags suchs as second or third cells in a table, you need to create seperate styles for these tags and assign them in your
HTML. Code that works in IE 6 is below
#content{
background-color:#FFFFFF;
width:950px;
padding:0px;
}
#content_left{
width:600px;
background-color:#FFFFFF;
vertical-align:top;
padding: 0px 10px 0px 15px;
margin: 0px 0px 0px 0px;
color:#000000;
}
#content_right{
width:300px;
background-color:#004A94;
padding: 0px 10px 0px 15px;
margin: 0px 0px 0px 0px;
vertical-align:top;
text-align:left;
}
Discussion
No Comments have been submitted
WhiteSites Blog