I have some code I found for a horizontal menu. It works fine in Explorer 8, Safari, Firefox, etc, but in Explorer 7, it is displaying vertical. I was under the impression that display: inline; was what told it to display horizontally but it seems IE7 is ignoring this? Here is my css code for the menu: /*Main Menu Area location*/ ul#navmenu { display: inline; float:right; margin: 0; cursor: default; list-style-type: none; } /*Main Menu Look*/ ul#navmenu a { display: block; font: 14px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif; font-weight: bold; text-align:center; background-color : #FFFFFF; /* Color behind words */ padding: 2px 10px 2px 10px; text-decoration : none; color: #494036; /* color of text */ cursor: pointer; /* ADDED THIS (Needed for Opera due to selected styling) */ border-right: 1px solid #000000; } ul#navmenu li { display: table-cell; padding : 0px 0px 0px 0px; } /* Submenu box area setup */ ul#navmenu li ul{ display: none; position: absolute; margin-top: 0px; margin-right : 0px; border-left: 1px solid #000000; border-bottom: 1px solid #000000; padding : 0px 0px 0px 0px; } ul#navmenu li ul li { display:block; } ul#navmenu li:hover ul{/* Submenu location */ position: absolute; display:block; } ul#navmenu li ul a {/* Submenu text setup */ background-color : #FFFFFF; /* Color behind words */ padding : 2px 14px 2px 14px; /* Top/left/bottom/right-space between submenu words and side lines */ color : #624931; /* color of text */ font : 12px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif; font-weight: bold; text-align:right; } ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active, ul#navmenu a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active { background-color : #494036; /* Color of selected page bar */ color : #FFFFFF; /* Color of selected page text */ } ul#navmenu a.selected { text-align : left; /* ADDED THIS */ cursor : default; /* ADDED THIS (To make it no appear to be a link) */ } ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active { background-color : #494036; /* Color of bar on rollover */ color : #FFFFFF; /* Color of text on rollover */ } Code (markup): Here is my html code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <link href="navstyle2.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <ul id="navmenu"> <li><a href="http://www.sonscarpenter.com/index2.htm">Home</a></li> <li><a href="http://www.sonscarpenter.com/AboutUs.htm">About Us</a></li> <li><a href="http://www.sonscarpenter.com/Gallery1.htm">Galleries</a> <ul> <li><a href="http://www.sonscarpenter.com/Gallery1.htm">Gallery 1</a></li> <li><a href="http://www.sonscarpenter.com/Gallery2.htm">Gallery 2</a></li> <li><a href="http://www.sonscarpenter.com/Gallery3.htm">Gallery 3</a></li> <li><a href="http://www.sonscarpenter.com/Gallery4.htm">Gallery 4</a></li> <li><a href="http://www.sonscarpenter.com/Gallery5.htm">Gallery 5</a></li> </ul> <li><a href="http://www.sonscarpenter.com/Testimonials.htm">Testimonials</a></li> <li><a href="http://www.sonscarpenter.com/Contact.htm">Contact Us</a></li> </li> </ul> </body> </html> Code (markup): Any ideas would be GREATLY appreciated!
Your code's goofy : ) And I think you might have an error: <li><a href="http://www.sonscarpenter.com/Gallery1.htm">Galleries</a> <ul> <li><a href="http://www.sonscarpenter.com/Gallery1.htm">Gallery 1</a></li> <li><a href="http://www.sonscarpenter.com/Gallery2.htm">Gallery 2</a></li> <li><a href="http://www.sonscarpenter.com/Gallery3.htm">Gallery 3</a></li> <li><a href="http://www.sonscarpenter.com/Gallery4.htm">Gallery 4</a></li> <li><a href="http://www.sonscarpenter.com/Gallery5.htm">Gallery 5</a></li> </ul>[b]<--closing sub menu[/b] <li><a href="http://www.sonscarpenter.com/Testimonials.htm">Testimonials</a></li> <li><a href="http://www.sonscarpenter.com/Contact.htm">Contact Us</a></li> [b]</li><-- should come right after the closing of the submenu[/b] </ul> Code (markup): But here's the basic problem: You put display: inline on the menu itself (the ul) when wherever you were reading likely meant display: inline on the li's (the menu items). Instead you are using display: table, which even when I use it I don't use it like that. But the other browsers are dealing with it because they do know what display: table means. IE7 and under do not. So, IE is reading that as if you said nothing at all about the display state, and the default for li's is "block". /*Main Menu Area location*/ #navmenu { display: inline;[b]<-- if you are floating, and have no margins, you do NOT need this, so remove it. Your menu is a block because it's floated.[/b] float:right; margin: 0; cursor: default;[b]<--what's this doing?[/b] list-style-type: none; } [b]try to write in order of the source, and from parent container to child... makes reading easier[/b] #navmenu li { either use display: inline here to make IE happy and float the anchors, OR make this float: left... either one; } /*Main Menu Look*/ ul#navmenu a { display: block; font: bold 14px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif; text-align:center; background-color : #FFFFFF; /* Color behind words */ padding: 2px 10px 2px 10px; text-decoration : none; color: #494036; /* color of text */ cursor: pointer; /* ADDED THIS (Needed for Opera due to selected styling) */ [b]which version of Opera??? It should have no issues with hovering over an anchor[/b] border-right: 1px solid #000000; } Code (markup): An example. If you used display: table to get the look of a table (you know how tables can stretch and grow and all that) then using display: table is tricky-- some browsers like Safari require a few extra rules/containers (like, it wants someone to be display: table and a child to be display: table-row or display: table-cell) and IE as I said under 8 does not even know what that means, so IE will need floats. If you want an example of a display: table menu let me know and I will post one and you can look at the code.
Thanks for your input. I will look into your revision ideas and see if I can get things corrected. If you could post sample coding, that would be great as well!
Okay- I got the horizontal issue figured out. The main menu now shows horizontally in IE7 as well. However, my submenu for the Gallery section now does not appear directly below- it offsets to the left in Safari and to the right in IE7. What could be causing this? Here's the css code for the menu setup: /*Main Menu Area location*/ ul#navmenu { float: right; margin-top : 50px; margin-left : 0px; margin-right : 20px; cursor: default; list-style-type: none; } /*Main Menu Look*/ ul#navmenu a { display : inline; font : 14px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif; font-weight: bold; text-align:center; background-color : #FFFFFF; /* Color behind words */ padding : 2px 10px 2px 10px; /* Top/right/bottom/left */ text-decoration : none; color : #494036; /* color of text */ cursor : pointer; /* ADDED THIS (Needed for Opera due to selected styling) */ border-right: 1px solid #000000; } ul#navmenu li { display: inline; padding : 0px 0px 0px 0px; /* Top/right/bottom/left */ } * html ul#navmenu li { display: inline; padding : 0px 0px 0px 0px; /* Top/right/bottom/left */ } /* Submenu box area setup */ ul#navmenu li ul{ display: none; margin-top: 0px; margin-right : 0px; border-left: 1px solid #000000; border-bottom: 1px solid #000000; padding : 0px 0px 0px 0px; /* Top/left/bottom/right */ } ul#navmenu li ul li { display:block; } ul#navmenu li:hover ul{/* Submenu location */ position: absolute; display:block; } ul#navmenu li ul a {/* Submenu text setup */ background-color : #FFFFFF; /* Color behind words */ padding : 2px 14px 2px 14px; /* Top/left/bottom/right-space between submenu words and side lines */ color : #624931; /* color of text */ font : 12px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif; font-weight: bold; text-align:right; } Code (markup): Thanks for any help!
You're mixing styles of menus. The regular way of setting up a drop-down menu is this: float the li's and give them position: relative so the subs have a reference for positioning a's can be display block but whatever sub ul's can now be position: absolute; they will regard their parent li's top left corner as 0, 0 I suggest you take a look at the Sons of Suckerfish at HTMLdog.com It's very clean and easy to read.