CSS sibling IE 6 problems


CSS sibling IE 6 problems

Posted on Feb 16, 2009 by Paul White

Like 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;
}

Permalink
1709 Visitors
3169 Views

Categories associated with CSS sibling IE 6 problems

Discussion

No Comments have been submitted
name
Email Needed to confirm comment, but not made public.
Website
 
Type Code
Security Check
 
When you Post your Comment, you'll be sent a confirmation link. Once you click this link your thoughts will be made public.. Posts that are considered spam will be deleted, Please keep your thoughts and links relavent to this Article