Hi
Can someone help me make the menu at the top left of <!-- m --><a class="postlink" href="http://dating.brewsterware.com">http://dating.brewsterware.com</a><!-- m --> look the same in FireFox as IE please?
The HTML is:
<div id="navmain">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"home.php">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"search.php">Find Someone</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"account.php">My Account</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"wiv.php">My Friends</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"inbox.php">My Messages</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"chat.php">One 2 One Chat</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"news.php">News</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"help.php">Help</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"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.
JoeI created similar menu:
check it out:
<!-- m --><a class="postlink" href="http://www.vandepoel.nl/">http://www.vandepoel.nl/</a><!-- m -->
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;
}Try puting min-width: 105px; under your width statement.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,
Joedid you tried my example? (looks like the same menu)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..
JoeI think you another div with style text-align:center;
Can someone help me make the menu at the top left of <!-- m --><a class="postlink" href="http://dating.brewsterware.com">http://dating.brewsterware.com</a><!-- m --> look the same in FireFox as IE please?
The HTML is:
<div id="navmain">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"home.php">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"search.php">Find Someone</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"account.php">My Account</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"wiv.php">My Friends</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"inbox.php">My Messages</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"chat.php">One 2 One Chat</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"news.php">News</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"help.php">Help</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"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.
JoeI created similar menu:
check it out:
<!-- m --><a class="postlink" href="http://www.vandepoel.nl/">http://www.vandepoel.nl/</a><!-- m -->
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;
}Try puting min-width: 105px; under your width statement.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,
Joedid you tried my example? (looks like the same menu)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..
JoeI think you another div with style text-align:center;