Click to See Complete Forum and Search --> : Need help with a menu


Brewster
04-11-2005, 03:18 PM
Hi

Can someone help me make the menu at the top left of http://dating.brewsterware.com look the same in FireFox as IE please?

The HTML is:

<div id="navmain">
<a href="home.php">Home</a>
<a href="search.php">Find Someone</a>
<a href="account.php">My Account</a>
<a href="wiv.php">My Friends</a>
<a href="inbox.php">My Messages</a>
<a href="chat.php">One 2 One Chat</a>
<a href="news.php">News</a>
<a href="help.php">Help</a>
<a href="logout.php">Logout</a>
</div>

and the CSS is:

#navmain {
padding: 10px 10px 0 0;
text-align: center;
vertical-align: middle;
}

#navmain a, #navmain a:visited {
background: #FFFFFF;
width: 105px;
height: 20px;
border: 1px solid #0D0A5B;
padding: 2px 5px 2px 5px;
margin: 0 0 5px 5px;
color: #333333;
text-decoration: none;
text-align: center;
font-size: 12px;
}

#navmain a:hover {
color: #000000;
background: #DDEEBB;
}

#navmain a:active {
background: #FFEEBB;
color: #000000;
}

FireFox for some reason doesnt like the fixed widths. Any help would be appriciated.

Joe

olaf
04-12-2005, 02:40 AM
I created similar menu:

check it out:

http://www.vandepoel.nl/

the CSS:

#navcontainer {
float:left;
margin-top:20px;
padding:0;
background: url(../images/backgr_nav.jpg) no-repeat left top;
border-top: 2px solid #000066;
height:40px;
width:100%;
}
#navcontainer ul {
padding:0;
margin:0;
list-style-type: none;
}
#navcontainer li {
padding:8px 5px;
margin: 0;
float: left;
font:bold 12px/24px Arial, Helvetica, sans-serif;
text-align: center;
}
#navcontainer a {
color: #FFFFCC;
text-decoration: none;
display: block;
width: 100px;
border:1px outset #FFFFCC;
}
#navcontainer a:hover {
background: url(/Images/page_elements/btn_normalover.jpg) no-repeat;
color: #666666;
border-color:#666666;
}

the tree
04-12-2005, 02:41 AM
Try puting min-width: 105px; under your width statement.

Brewster
04-19-2005, 02:51 PM
Thanks for the input.

I tried using min-width , but that didnt make a difference.

I found that if I set the link to float then the widths are fine, but then everything aligns to the left, and I want the menu options centered.

Any other ideas/comments?

Thanks,
Joe

olaf
04-19-2005, 03:09 PM
did you tried my example? (looks like the same menu)

Brewster
04-24-2005, 11:20 AM
Hi Olaf

I tried your example, but the links are aligned to the left, and I want them centered. Any ideas how I go about centering them?

Thanks for your input..

Joe

olaf
04-24-2005, 11:25 AM
I think you another div with style text-align:center;