View Full Version : Firefox position problem

Mar 31st, 2010, 10:54 PM
I have a menu and it looks like this on chrome , ie , opera


and in firefox it looks like this


my header css is like this

#header {

background-color: #222;
position: relative;
width: 100%;

#header p {

color: #999;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 26px;
margin-left: 20px;
text-transform: uppercase;
width: 200px;


position: absolute;
right: 74px;
top: 15px;
width: 400px;


#menu li {

display: block;
float: left;


#menu li a {

color: #fff;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
padding-right: 10px;
text-transform: uppercase;


#menu li a:hover {

color: #069;

#menu ul {

float: right;
list-style-type: none;
width: 400px;

Whats the problem here

Apr 1st, 2010, 12:12 AM
Hello Experimental,
I'm assuming #menu is your ul ... does it really need to be absolutely positioned?
Try giving your li a line-height. That will center your text and make the button whatever height you give it.

That's a pretty simple menu so you really should not have any issues with it in any browser.
Maybe you can look at one of these (http://nopeople.com/design/CSS%20tips/index.html) to follow as an example.