PDA

View Full Version : Firefox position problem



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


http://img704.imageshack.us/i/wsdf.png/


and in firefox it looks like this

http://img706.imageshack.us/i/40771584.png/


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;
}

#menu{

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

Excavator
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.