Welcome to WebmasterWorld Guest from 54.80.93.19

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Menu Centered

Compatibiltiy View in IE8 - getting different menu layout

     
5:46 pm on Sep 14, 2009 (gmt 0)

New User

5+ Year Member

joined:Sept 14, 2009
posts:3
votes: 0


I have created a horizontal menu for a website using CSS and it works great in Google Chrome, FF, & pretty good in IE8 (Compatibility Off). The problem I notice is the menu is not centering properly. I have read many posts about this IE bug, but cannot seem to find the right combination to fix problem. Thank you in advance.

CSS Code:
#menuh
{
position: relative;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
font-weight:bold;
font-style: normal;
margin: 0 auto;
text-align:center;
}

#menuh a
{
display:block;
text-align:center;
}

#menuh ul /*1st level menu appearence*/
{
list-style: none;
margin: 0 auto;
float: left;
}
#menuh ul ul /*2nd level menu appearence & location*/
{
position: absolute;
background-color: #EEEEEE;
width: 175px;
text-align:left;
float: left;
margin: 0 auto;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #893300;
}

#menuh ul ul li/*2nd level menu appearence & location*/
{
padding-top: 2px;
padding-bottom: 2px;
}
div#menuh ul ul,
div#menuh ul li:hover ul ul,
div#menuh ul ul li:hover ul ul
{display: none;}

div#menuh ul li:hover ul,
div#menuh ul ul li:hover ul,
div#menuh ul ul ul li:hover ul
{display: block;}

HTML Menu:
<div id="menuh">
<ul><li><a href="" >Menu 1</a></li></ul>
<ul><li><a href="" class="top_parent">Menu 2</a>
<ul>
<li><a href="">Level 2</a></li>
<li><a href="">Level 2</a></li>
</ul>
</ul>
<ul><li><a href="">Menu 3</a></ul>
<ul><li><a href="" >Menu 4</a></ul>
<ul>
<li><a href="" class="top_parent">Menu 5</a>
<ul>
<li><a href="" class="parent">Level 2</a>
<ul>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
</ul>
</li>
<li><a href="">Level 2</a></li>
<li><a href="">Level 2</a></li>
</ul>
</ul>
<ul><li><a href="" >Menu 6</a></ul>
<ul><li><a href="" >Menu 7</a></ul>
</div>

9:17 pm on Sept 14, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Exactly what are you trying to center relative to what ?
The code seems to have many places it tries to center things in various ways ...
11:03 pm on Sept 14, 2009 (gmt 0)

New User

5+ Year Member

joined:Sept 14, 2009
posts:3
votes: 0


I am trying to center the first level of the menu items. This menu is going to be set inside a table cell that will extend the length of my website.

<table width="775" height="27" border="0" cellspacing="0" cellpadding="0" align="center">

The second & third levels on the menu are left justified in the drop-down. Which works great.

6:59 am on Sept 15, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


First things first.

A table: once you learn CSS there is no need to abuse tables for layout anymore. Try it!

The html:
you're missing some </li> in there as far as I can see. Did you validate your code ?

Most of the examples you'll find on how menus work will use a different structure (one that makes more sense IMHO)

I'd go for:
[quote][pre]


<ul id="menuh">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Level 2</a></li>
<li><a href="">Level 2</a></li>
</ul>
</li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a>
<ul>
<li><a href="">Level 2</a>
<ul>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
</ul>
</li>
<li><a href="">Level 2</a></li>
<li><a href="">Level 2</a></li>
</ul>
</li>
<li><a href="" >Menu 6</a></li>
<li><a href="" >Menu 7</a></li>
</ul>
[/quote][/pre]

Next you need to style it ...

I'd simplify things first and get it working with a single layer of the menu and add the complexity as you go.

A block with 100% width and auto margins will just get margins of 0 and be done with it (it's as big as it needs to be to use up all the space).

If you want to center items, you almost need to make the items to be inline elements (or inline blocks). Then have text-align: center, in which case it's inline content would be centered. Provided it isn't floated left or right of course ...

Also I do suggest to make sure to keep the clutter out: get it working in a compliant browser (read not IE) with the minimal CSS you can first. Anything that's been added as an experiment that didn;t do what you needed should be removed.
Only then check all the other compliant browsers and only as a last step try to fix it for the legacy IE versions (conditional comments work to prevent you from needing to redo all the testing in all the other browsers).

You can probably also find ready-made menus out there to suit what you need.
Making drop down menus isn't the easiest thing to try in CSS if you're still learning ...

2:45 pm on Sept 15, 2009 (gmt 0)

New User

5+ Year Member

joined:Sept 14, 2009
posts:3
votes: 0


Thank you for your detailed explainations, I will try to work with the inline block and center that to see what I get.
The CSS probably does have a lot of useless code in there, but since it was working in compliant browsers I wasn't to worried. Just recently I found that the old IE versions didn't center them.
I will let you know what I come up with...
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members