As I understand it, the z-index declaration in combination with a position:relative, is interpreted by IE7 in a way that it creates separate index contexts for each element. One fix that is suggested is to give the containing element a higher index than it’s children. I’ve tried that on #container but it didn’t seem to help.
Any suggestions would be appreciated. I’ve stared at it until I’m dizzy.
Hi,
Actually you are the victim of an IE float bug. To get the .componentheading to sit beside the floated sidebar you will need to float it also for IE.
Those dreamweaver templates always cause problems with IE.
You have a large left padding set on that div.componentheading to keep the BG image extending under the sidebar so that will add to the width and throw the float off. You can fix that by setting a negative left margin to drag it under the sidebar.
There are a couple of other changes needed as well and I will highlight them.
td.contentheading, [B]div.componentheading[/B] {
background: url(../images/pageheader-bg.gif) repeat-y top right;
[COLOR=Blue]position: relative;[/COLOR]
[COLOR=Blue]z-index: 2;[/COLOR]
color: #f8e7b4;
font-family: Georgia;
font-size: 1.9em;
line-height: 1.2em;
letter-spacing: -.03em;
padding: 4px 20px 8px 265px;
width: 535px;
[COLOR=Blue]float:right;[/COLOR][COLOR=DarkGreen]/*float it right so we can use clear:right for the #topnav*/[/COLOR]
[COLOR=Blue]margin-left:-258px;[/COLOR][COLOR=DarkGreen]/*drag it under the floated sidebar*/[/COLOR]
[COLOR=Blue]margin-bottom:-12px;[/COLOR][COLOR=DarkGreen]/*allow topnav to slide up under*/[/COLOR]
}
[B]div#topnav[/B] {
font-family: Georgia;
font-size: 0.85em;
line-height: 1.4em;
color: white;
[COLOR=Blue]clear:right;[/COLOR]
width: 518px;
padding: 26px 14px 14px 14px;
[COLOR=Blue] margin: [B]0[/B] 10px 20px 260px;[/COLOR]/*[COLOR=Red]-12px[/COLOR] 10px 20px 260px;*/
[COLOR=Blue]position: relative;[/COLOR]
[COLOR=Blue] z-index: 1;[/COLOR]
background-image: url(../images/topnav-bg.png);
background-repeat: no-repeat;
background-position: right 12px;
background-color: #8eb482;
/* The next line makes rounded corners in compatible browsers */
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
One more thing, your list items are out of whack now in all versions of IE.
That is due to the top padding you put on the sidebar via the IE CC in your html.
[COLOR=DarkGreen]<!--[if IE]>[/COLOR]
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr [B]#sidebar1[/B] [COLOR=Red]{ padding-top: 30px; }[/COLOR]
.twoColFixLtHdr [B]#mainContent[/B] [COLOR=Blue]{ zoom: 1; }[/COLOR]
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
[COLOR=DarkGreen]<![endif]-->[/COLOR]
Just remove that IE CC completely from the html and then set “haslayout” on the #mainContent in your default.css
.twoColFixLtHdr [B]#mainContent[/B] {
margin: 0 0 0 248px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
color: #353535;
[COLOR=Blue]min-height:0;/*IE7 haslayout*/[/COLOR]
}
[B]* html #mainContent[/B] [COLOR=Blue]{height:1%;}/*IE6 haslayout*/[/COLOR]
Now clean up some of the sidebar ul styles -
div#sidebar1 ul {
[COLOR=Blue]margin:0;[/COLOR]
[COLOR=Blue]padding: 45px 0 0 0;
list-style:none;[/COLOR]
}
div#sidebar1 ul li {
[COLOR=Blue] display:block;
width: 154px;
height: 40px;[/COLOR]
[COLOR=Blue]background:url(../images/leftnav-li-bg.png) no-repeat;[/COLOR]
margin: 0 0 0 15px;
[COLOR=Red]/*padding:0;*/[/COLOR]
text-align: center;
}
div#sidebar1 ul li a {
[COLOR=Blue] display: block;
width:100%;[/COLOR]
color: #000;
text-decoration: none;
[COLOR=Red]/*margin: 0 0 0 9px;*/[/COLOR]
[COLOR=Blue]padding:15px 0 10px 0; [/COLOR]
font-variant: small-caps;
font-size: 16px;
}
I would also get rid of that height on the sidebar and make it min-height instead.
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 228px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
[COLOR=Blue]min-height:483px;[/COLOR][COLOR=Green]/*allow it to expand while holding it open for BG image*/[/COLOR]
[COLOR=Blue]background: url(../images/leftnav-bg.png) no-repeat;[/COLOR]
padding: 0 10px 15px 20px;
[COLOR=Red]/*margin:0;*/[/COLOR]
[COLOR=Blue]z-index: 3;
position: relative;[/COLOR]
}
All those changes plus the ones in my previous post get all browsers looking the same for me.
If you look through all those changes you will also notice I used the shorthand property for all your backgrounds. It will reduce your file size so it is good to learn how to use it.
Also, a fairly minor point compared to everything Rayzur has fixed :), but it’s recommended that you use conditional comments in IE not to issue embedded CSS, but to add a link tag to an IE specific stylesheet(s).
Though I’ll admit I used a second one to insert an IE specific JS file as well. Sue me.
Thanks so very much for your assistance. I have implemented the first two fixes for the td.contentpaneopen and #topnav and those seem to work quite spendidly. I am taking some time to learn from what you have given me as well. Here in Vermont it is way past happy hour on a Friday, so I will tidy up the navigation tomorrow.
