Thursday, September 24, 2009

Background-color inheritance in IE

I bumped again in this today, but took the time to find some workaround.

Someone did that to the main style sheet of the open source portal I am working with:


td {
background-color: #fff;
}


Since my application sets background-color on rows (tr), all my tables were white.

The workaround should be as easy as:


td {
background-color: inherit;
}


But, Internet Explorer is known for explicitly ignoring the inherit value when it comes to background and background-color.

What it does understand though is the "transparent" value. Transparent, in IE language, means the colour of the closest relatively positioned parent with a defined background-color.

Final workaround is then:


tr {
color: red;
position: relative;
}

td {
position: relative;
background-color: transparent;
}

No comments: