homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS menu doesn't display in Explorer 6
Dpots

5+ Year Member



 
Msg#: 3830634 posted 8:18 pm on Jan 20, 2009 (gmt 0)

I have a css menu that I found code for that works great in everything except IE 6 in which it won't display at all.

Here's the css code for the menu:

#topnav {display:none;}
html>body #topnav {display:block;}/*--- These 2 lines Hide from IE6 and older ALTOGETHER----*/

#topnav {
position:absolute;/*---place exactly where I WANT it to appear----*/
margin-left:175px;
*---usual IE Fix of following position:absolute with Position: relative will not work
Re-adjust the margin to correct IE Invented placement. Big headed MS will read the FIRST instance of a repeat element as THEIRS and ignore any repeat element afterwards...(sounds typically fitting for that company lol). All the other browsers that follow code convention properly will see the first, then see the second and update/use that instead----*/
margin-left: 115px;
top: 100px;
/*width:9999px;--makes no difference ---*/
font-size: 0; /*---fix menu placement - all browsers unified----*/
text-align:center; /*---If you want menu Items Centered then change it----*/
}

.nav li{
display:inline; /*no difference in all other browsers but REQUIRED for IE (7)*/
}

.nav li ul{
padding-top: 2px; /*padding at top (UNDER heading) of the entire submenus ONLY-*/
/* padding-bottom:5px; OPTINAL padding at bottom of the entire submenus ONLY - or use MARGIN - Does Not matter - get the SAME result in all browsers-*/
}

ul.nav { margin-top: 5px;}
/*display:table;--makes no difference inline, table, whatever---*/
/*position:relative;--makes no difference ---*/

ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none; /*--gets rid of horrid bullet points and associated indents---*/
} /*display: inline;no difference in ANY browser-*/

ul.nav>li{
display: table-cell;/*--needs to be 'TABLE-CELL' or screws up ALL Menus - This ALSO hide the entire menu from ancient browsers (nice one) ---*/
/*display: inline;-screws up ALL Menus all do an IE and put subsequents AND Subs underneath-*/
/*position:relative;--makes no difference ---*/
padding: 1px ; /* This effectively puts 1px border extended around submenupopup - optional - make anything you want - will effect overall width of menu so may have to reduce widths unanimously to compensate---*/
width:120px; /*Specified width of menu Tabs-*/
float:left; /*IE (7) ONLY diff - doesnt plonk subsequent and subs underneath on hover -*/
}

ul.nav li>ul{
display: none; /*obviously - don't show submenu normally---*/
/*position:relative;--makes no difference ---*/
}

ul.nav a:hover{
background-color : #494036; /* Color of bar on rollover */
color : #FFFFFF; /* Color of text on rollover */
}

ul.nav li:hover>ul{
display : block;/*obviously - show submenu only when the mouse is over it--*/
/*position:relative; Makes stuff all difference -*/
}

.nav ul li a{
display: block;
padding: 2px 4px 2px 4px;/*padding around submenu links order- top right bottom left (clockwise) */
/*border-top: 1px solid #000; optional entries - of course, my example has border extended aound it already making a bottom line*/
}

.nav li a { color:#000;/*** Menu Title color only! ***/
padding-left:4px;}/*** Left and right padding effective ONLY for menu titles here - probably best to match padding of submenu items as above***/
/* padding-top:9999px;}** this may appear to be a silly entry BUT in all browsers apart from IE (7) it creates an invisible hotspot extending in this case 9999px above the menu title TEXT width. Cool trick - handy if you want it - nuke it if you dont. Take it out of comment to try***/

.nav ul li a{
background-color: #FFFFFF;/*** bg col of entire submenu***/
color: #000;/*** text col of entire submenu***/
width: 112px;/*fixes sub width Firefox*/ /* width minus padding (both sides) of sub items to compensate eg if 4 - same width as header cell 120 - (2×4 left right padding)= 112---*/
margin-top: 1px;} /*put this in IF you WANT a gop between each submenu item - the background of extended top item background will show behind***/

ul.nav li:hover, ul.nav li:focus, ul.nav li:active, ul.nav li.selected, ul.nav li.selected:hover, ul.nav li.selected:focus, ul.nav li.selected:active { /*** Color of menu items on rollover ***/
background-color: #494036;
color: #FFFFFF;
}

.nav ul li a:hover{
background-color: #494036;
color: #FFFFFF; /*** text col and bg col of submenu individual li items on hover - mine are kept black - you can choose different***/
}

ul.nav li:active,
.nav ul li a:active{
background-color: #494036;/*** text col and bg col of submenu individual li items on Click / active***/
color: #FFFFFF;
}/*** Browser differences - on click the title item will also change bg col including any visable background between menu item blocks. (not title txt col aswell) This is in Chrome Firefox Opera Netscape Flock- but not in IE - See notes for versions tested**Of course, you can always just remove ul.nav li:active,*/

.nav a{
font : 14px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
font-weight: bold;
text-align:center;
color : #FFFFFF; /* color of text */
text-decoration: none;
}

Here's the html code for the menu portion:

<div id="topnav">
<ul class="nav">
<li><a href="http://www.example.com/index2.htm">Home</a></li>
<li><a href="http://www.example.com/AboutUs.htm">About Us</a></li>
<li><a href="http://www.example.com/Gallery1.htm">Galleries</a>
<ul>
<li><a href="http://www.example.com/Gallery1.htm">Gallery 1</a></li>
<li><a href="http://www.example.com/Gallery2.htm">Gallery 2</a></li>
<li><a href="http://www.example.com/Gallery3.htm">Gallery 3</a></li>
<li><a href="http://www.example.com/Gallery4.htm">Gallery 4</a></li>
<li><a href="http://www.example.com/Gallery5.htm">Gallery 5</a></li>
</ul>
</li>
<li><a href="http://www.example.com/Testimonials.htm">Testimonials</a></li>
<li><a href="http://www.example.com/Contact.htm">Contact Us</a></li>
</ul>
</div><!--topnav-->

Any help would be GREATLY appreciated!

[edited by: swa66 at 4:52 am (utc) on Jan. 21, 2009]
[edit reason] use example.com, no personal URLs allowed. [/edit]

 

sectionq

5+ Year Member



 
Msg#: 3830634 posted 2:00 am on Jan 21, 2009 (gmt 0)

ie6 won't understand the child selector property so it won't work, you'll be able to get this menu to show the top menu but the flyout you'll have no chance, get yourself over to the excellent cssplay website, there's a load of menus there that'll do the trick.

Dpots

5+ Year Member



 
Msg#: 3830634 posted 2:27 pm on Jan 21, 2009 (gmt 0)

What's the cssplay website?

4css

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3830634 posted 2:32 pm on Jan 21, 2009 (gmt 0)

If you google cssplay, it will come up in the search for you.

Posting of url's isn't permitted, so we aren't able to post the link to the site for you.

Another Great Site for lists and menus is Listutorial's site. A fabulous site for you to go through.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved