IE 'Layering' issue

[Monica79]

Hey all, this is odd...works fine in FF but in IE the category navigation shows up 'under' the header/body. I've positioned it so the nav is between the header & body so that you can just see the words peeking through.

http://gempra.com/home/

I'm no CSS expert (obviously lol), what's this about I don't get it. I'd like to position the nav so that it is on top of the teal part of the header, but it just goes under it in IE...?

[gjh42]

Give

#navCatTabsWrapper

a

z-index: 100;

and see if that helps.

[Monica79]

Thanx for the reply. Again I'm no expert but I dont see a #navCatTabsWrapper on its own

I tried changing...

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
font-weight: bold;
height: 1%;
width: 100%;
z-index: 100;
}



and also tried instead adding:

#navCatTabsWrapper {
z-index: 100;
}

No change hmmmm...

[kobra]

you have a <br class="clearBoth" /> between your
<!--bof-branding display-->
<div id="headerContent">
<div id="nameWrapper"><a href="http://gempra.com/home/">Gempra</a></div>
and
<div id="navCatTabsWrapper">
preventing this being overlayed where you want it

This should be in a tpl_header.php file in your template/common folder
once changed then css can be used to position the #navCatTabsWrapper

[Monica79]

So I guess I'm supossed to delete that right? I've been messing with it but can't seem to get it. In my tpl_header I have:

<!--eof-header ezpage links-->
</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->

I've deleted the <br class="clearBoth" /> but it only moves the nav up slightly and it's still underneath.
Somewhere else that a <br class="clearBoth" /> could be maybe? I did a search but there's millions...

[kobra]

This is good....you currently have this in your stylesheet:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	font-weight: bold;
	height: 1%;
	width: 100%;
}

#navCatTabsWrapper {
	z-index: 100;
}

Double #navCatTabsWrapper entries make it look more like this and adjust the position as you want

#navCatTabsWrapper {
        position: absolute;
        top: 55px;
        right: 50px;
	margin: 0em;
	font-weight: bold;
	height: 1%;
	width: 100%;
}

#navMainWrapper, #navSuppWrapper {
	margin: 0em;
	font-weight: bold;
	height: 1%;
	width: 100%;
}

and you may need to give the header wrapper a bit of height and if so take this:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
}

and make it look more like this and adjust as needed

#headerWrapper {
        height: 75px;
	margin: 0em;
	padding: 0em;
        }        

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
        }

[Monica79]

Well thanx, I'm making progress. The nav is now on top of the header image in IE.(yeah, whew!) It's still cut off @ the bottom tho, the #headerWrapper { height: 75px; moves the body down but there's still something affecting it.

Now in FF too the nav is moved slightly up into the darker part, do I just need to allow for that in the design or am I going to be able to get them both to align the same?

[kobra]

Try giving #navCatTabsWrapper a height

[kobra]

Your links in the top nav are not there in IE - suspect that you have messed something and would look first to your added div as I do not see what it is for?

[Monica79]

Thanx that helped a lot. There's still some wonky stuff going on in IE...the underline of the links on hover is near the top...more like a strikethrough.
The 'home' & 'login' aren't to be found in IE except for a small underline under the Gempra.