Hi.
I am about to finish a basic css template for my site, before i go to the next step and make it a more better looking template, i'd like to fix the current problem which i don't like at all.
http://www.virtualmz.com/gamble/
You see the menu in IE? It's OK. In Opera it's ok too. But under Firefox is wrong, you can see the difference very easy.
What should i do?
Here you have the menu related css tags:
#menu {
background-color : #8B4513;
color : #FFFAFA;
height : 25px;
width : 900px;
background-image : url("images/menu_bg.jpg");
background-repeat : repeat-x;
}
#mainnav {
background-color : #B22222;
color : #FFFAFA;
width : 100%;
border : solid #FFDEAD;
border-width : 1px 0px 1px 0px;
}
#mainnav ul li {
background-color : #B22222;
color : #FFFAFA;
display : inline;
}
#mainnav ul {
background-color : #B22222;
color : #FFFAFA;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
letter-spacing : 2px;
margin : 0;
padding : 0;
}
#mainnav ul li a {
background-color : #B22222;
color : #FFFAFA;
padding: 0.2em 8px;
text-decoration: none;
float: left;
border-right: 1px solid #FFDEAD;
}
#mainnav ul li a:hover {
background-color : #FF7F50;
color : #FFFAFA;
}
#mainnav ul li a:active {
background-color : #FFFFFF;
color : #010101;
}
Thank you in advance!
If you are going to code for
If you are going to code for Xhtml you must use proper xhtml tag names, iow, lower-case. Validate your html and css, fix those 41-plus errors. Then come back.
It's good now?
It's good now?
Now, you could start by
Now, you could start by (removing height from menu and) adding overflow:auto; in #mainnav ul to enclose your floats.
Thank you DanA! I have added
Thank you DanA! I have added the overflow : auto; line, now is working okay. I have not removed the height from menu ad, because i want to have a background border on the main menu... under the menu border you can see that little 3d 4 or 5 pixels background
THANK YOU!