PDA

Click to See Complete Forum and Search --> : Background inheritance problem in IE

wood_tah
09-10-2008, 11:48 AM
Can anyone help me? I can't figure out how to get IE (6 and 7) to pick up a background color in an element via inheritance, and show that color above a border on the element that is behind it. The only way I have been successful is to explicitly specify the background color on the desired element. However, I want the behavior to be the same, but to pick up whatever color is specified by the body (or some other element containing the target element), because the background color can changed based on user preferences.

If you take the code below and open it in Firefox, it does what I expect (tested in FF2, would expect same behavior for FF3). However, if you open this in IE6 or IE7, you can still see the border behind the filterTitle element.

Any help with this will be greatly appreciated!


<html>
<head>
<title>CSS Test</title>
<style type="text/css">
body {
background-color: pink;
color: black;
}
*:first-child+html .searchResultsContainer {
height: 1%;
}
*html .searchResultsContainer {
height:1%;
}
.searchResultsContainer {
background: inherit;
}
.filterTitle,
.searchResultTitle {
font-size:13px;
font-weight:bold;
}
.filterTitle { /* mainHeading styles combined with searchResultTitle */
/*background-color:white;*/ /* when this is used, works as expected in IE */
background: inherit;
padding: 0 6px;
float: left;
margin-top: -10px;
border: 1px solid #000; /* #AFB4C3 */
}
#filterCriteria {
border: 1px solid #000; /* #AFB4C3 */
padding: 0 10px 10px 10px;
margin-bottom: 14px;
background: inherit;
}
#filterCriteria table {
clear: both;
}
#filterCriteriaContainer,
.divLblContainer {
padding: 10px 0 0 0;
}
</style>
</head>
<body>
<div class="searchResultsContainer" id="filterCriteriaContainer">
<div id="filterCriteria" class="results">
<div class="filterTitle">Filter Criteria</div>

<table>
<tr><td>Dummy table cell text</td></tr>
</table>
<p>Some dummy content for the area.</p>
</div> <!-- end filterCriteria -->
</div>
</body>
</html>
WebJoel
09-10-2008, 12:57 PM
Whenever anyone says that 'this works in Mozilla, this works in Fx, but does not work in IE x or IE xx', etc., the first thing that I always check for is whether or not the page has a valid !doctype This does not, therefore, this would be a good place to begin. :)

And:
#filterCriteria {
border: 1px solid #000; /* #AFB4C3 */
padding: 0 10px 10px 10px;
margin-bottom: 14px;
background: inherit;
} is technically insufficient: try "background-color:inherit;" as you want the background COLOR to inherit. "background" would be inclusive of at least two-or-more of these values: color url, style and position.

I would try stating multiple Selector, like this:
<style type="text/css">
body {color: black;}
body, .filterTitle {background-color: pink;}

*:first-child+html .searchResultsContainer {height: 1%;}.... This way, any user-change of the background-color of "body" automatically is inclusive of ".filterTitle"
It might be the 'float' on .filterTitle that is causing "inherit" to not comply..(???)
wood_tah
09-10-2008, 01:51 PM
Thank you for the reply. I probably should have mentioned a few things in my original post. These styles are being applied inside of a portal, so I have no control over the page skeleton (doctype, etc), as this is generated for me (incidentally, no doctype is provided). Also, I can not set a bg-color on body, as I want the background color to inherit whatever is defined by the skin that was selected (presumably, the bg-color is going to be set in the css for the selected skin).

I used background: inherit b/c if a bg image is used, I want that to be used in my element as well. Are you suggesting that I need to write out each property of background and give it a value of 'inherit'?
WebJoel
09-11-2008, 06:39 AM
I guess that I am not understanding your request....presumably, the bg-color is going to be set in the css for the selected skin then I'd try targeting this to do what I showed; combining the "body" and "filterTitle" Selectors with a "background-color:foo;" so that any precedence-changing user-submitted request gets both to change at the same act. I'll have to re-examine your code so far but I guess I am not seeing the problem :confused: