7 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

In IE6, when the user hovers over my CSS horizontal navigation bar, the dropdown menus push down the elements below them - in the current case, a banner image - rather than flowing over them.

In Firefox, that same element disappears under the navigation bar. Solutions? Thanks in advance.

http://www.yorkrules.com/yorkrules3/nav.html

The HTML code:

Untitled Document

The CSS code:

/* global styling
----------------------------------------------- */
html {
text-align: center;
background-attachment: fixed;
background-color: #353535;
background-image: url(../images/backgroundGradient.jpg);
background-repeat: repeat-x;
}
body {
width: 728px;
margin: 0px auto;
font: 10px Arial, Helvetica, sans-serif;
line-height: 1.5em;
color: #CCC;
text-align: left;
}
/*img.banner {
padding: 0;
margin: 0;
position: absolute;
top: 104px;
}*/

/* nav
----------------------------------------------- */
#p7menubar {
height: 104px;
width: 728px;
position: fixed;
}
#p7menubar li {
width: 104px;
height: 104px;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li li { height: auto;
}
#p7menubar a:link, #p7menubar a:visited {
color: #CCC;
}
#p7menubar a:hover, #p7menubar a:focus {
color: #FFF;
}
body#indexPage li#index {
background-image: url(../images/nav/navIndex.jpg);
}
body#learnPage li#learn {
background-image: url(../images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(../images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(../images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(../images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(../images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(../images/nav/navShopColor.jpg);
}
#index {
background-image: url(../images/nav/navIndexGray.jpg);
}
#learn {
background-image: url(../images/nav/navLearnGray.jpg);
}
#look {
background-image: url(../images/nav/navLookGray.jpg);
}
#play {
background-image: url(../images/nav/navPlayGray.jpg);
}
#read {
background-image: url(../images/nav/navReadGray.jpg);
}
#share {
background-image: url(../images/nav/navShareGray.jpg);
}
#shop {
background-image: url(../images/nav/navShopGray.jpg);
}
#index:hover a, #index:focus a, #index:active a, #index.p7hvr a {
background-image: url(../images/nav/navIndexColor.jpg);
}
#learn:hover a, #learn:focus a, #learn:active a, #learn.p7hvr a {
background-image: url(../images/nav/navLearnColor.jpg);
}
#look:hover a, #look:focus a, #look:active a, #look.p7hvr a {
background-image: url(../images/nav/navLookColor.jpg);
}
#play:hover a, #play:focus a, #play:active a, #play.p7hvr a {
background-image: url(../images/nav/navPlayColor.jpg);
}
#read:hover a, #read:focus a, #read:active a, #read.p7hvr a {
background-image: url(../images/nav/navReadColor.jpg);
}
#share:hover a, #share:focus a, #share:active a, #share.p7hvr a {
background-image: url(../images/nav/navShareColor.jpg);
}
#shop:hover a, #shop:focus a, #shop:active a, #shop.p7hvr a {
background-image: url(../images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(../images/nav/navMenuGray.jpg);
}
#learn ul li a:hover {
background-image: url(../images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(../images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(../images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(../images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(../images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(../images/nav/navMenuShop.jpg);
}

/* PVII Menu CSS Express Drop-Down Menu by Project Seven Development (www.projectseven.com)
----------------------------------------------- */
/*Clears the floated menu items.
Assigned to a BR tag placed just before
menuwrapper's closing DIV tag*/
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
/*
p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
We set padding and margin to zero to eliminate all indentation, turn bullets off,
and set a font-family different from the global font-family declared for the
body element above. This sets font for just the menu. Do not add a font-size here.
*/
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
}
/*
Root-Level Links. Do not change the first two properties.
Adjust padding values to make the root links taller and to offset them
from the left and right edges of the link box. The border right creates a
separator between links. Font-size is set here and will apply to all menu levels.
Font color is set to light gray.
*/
#p7menubar a {
display: block;
width: 104px;
height: 104px;
}
/*
The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in
this style sheet will set the width for this element to auto for all
other browsers - hiding it from IE5 Mac. The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text.
*/
#p7menubar li {
float: left;
}
/*
Sets width for Sub-Menu box and the List Items inside - in proportional em units.
This allows the sub-menu width to expand if users resize the text in their browsers.
*/
#p7menubar li ul, #p7menubar ul li {
width: 104px;
}
/*
The sub-menu links. We set color and turn off the right border, which
would otherwise be inherited from the root link rule. We set top and
bottom padding less than the root items and increas the left padding
to indent the sub-menu links a small amount in from the root links.
*/
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 95px;
text-decoration: none;
}
/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping.
Positioned Absolutely to allow them to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background Color must be set or problems will be encountered in MSIE.
Right and bottom borders are set to simulate a raised look.
A gradient background image is assigned.
*/
#p7menubar li ul {
position: relative;
display: none;
background-color: #FFFFFF;
}
/*
Set the Sub-Menu UL to be visible when its associated
Root-Level link is moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
*/
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
#p7menubar li {
width: auto;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

These p7 menu seem to be

These p7 menu seem to be coming thick and fast, not quite sure why , it's not best implementation of a simple drop down, hopre you dont have to pay for it.

You've been fiddling with it though haven't you? these menus rely on using absolute on the sub ul as is explained at length in comments before the pertinent ruleset position relative will just push the flowed element coming after downwards, you'll need to change back to the original code.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Hi, Hugo. I'm using the p7

Hi, Hugo. I'm using the p7 menu model because it keeps the menu button in its hover state (the color button rather than the gray button) when the user scrolls down the related sub menu.

Tyssen provided invaluable assistance in getting it to its present state.

Is it the following CSS rule that should be positioned absolutely?

#p7menubar li ul {
position: absolute;
display: none;
background-color: #FFFFFF;
}

If so, I made that change, without success. If I've modified the wrong rule, would you point me in the right direction? Thanks for your assistance.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You need to some extra

You need to some extra properties to kick IE into life, bear in mind that these are just manual you'll need to add them to the rulesets in question:

#p7menubar li {position:relative;}

#p7menubar LI.p7hvr UL {display:block:top:0;left:0;}

As for FF i'm not sure whats going on but you need to concentrate on that browser

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Or you could just do

Or you could just do this:

#p7menubar { height: 104px; width: 728px; position: absolute; z-index: 10; }

.banner { margin-top: 104px; }

Position: absolute (don't use position: fixed) takes the nav out of the flow of the document so it doesn't interfere with anything that comes after it. You then give the image a top margin to move it below the height of the nav. Everything after the image will automatically fall underneath it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Update

Thanks to Hugo and Tyssen for your assistance. CSS Creator has proven to be an outstanding resource, and the time and expertise shared by its moderators is greatly appreciated.

Here is an update on my question, which is closer to resolution, but still buggy.

Following Tyssen's most recent post, I added a z-index of 10 to #p7menubar, but kept the position fixed, as I would like the nav bar to stay in place even when the page is scrolled down (this works in FF, but not IE - is there a hack to get IE to use fixed positioning?)

Firefox now works perfectly.

Rather than give the .banner element a margin-top of 104px, which caused erratic behavior in IE6, I used the following rule:

img.banner {
position: absolute;
top: 104px;
}

This gives me the appearance I want, but not being fluent in CSS positioning, I don't know if this is the best way to achieve my goal. By positioning the .banner element absolutely, am I going to create problems for myself in laying out the rest of the page? Any input or opinion on this would be appreciated.

The last remaining issue now is an IE6 bug. It doesn't seem to consider the menu's z-index, so the dropdown menus appear behind the banner image.

What's the best fix for this IE6 bug? Thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE6 won't work with position

IE6 won't work with position fixed, IE7 will there are kludgy workarounds that involve altering the overflow of the html element, but you will need to set that navbar to position absolute, which also sorts out the stack order so set a rule for IE6 only anyway:

* html #p7menubar {position:absolute;}

Then if you want to try and achive the pos:fixed effect for IE6 do a google search for 'position fixed for IE'

here's the the link best known http://tagsoup.com/cookbook/css/fixed/

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

This issue is solved.

This issue is solved. Thanks.