Greetings -
I have this site called: www.FLIC.us using CSS Menu which looks fine on IE, but on Firefox or Mac users, the Menu floats about 30px down from the top.
I tried to use hack override but still couldn't get it to work.
Here is what I did:
Code:
#menu {
top: 0px!important;
top: 0px;
margin:0;
padding:0;
list-style:none;
font-size:11pt;
font-weight:bold;
line-height:normal;
I changed top px value around, still couldn't get it to work.
Here is my CSS below, you can see my site at FLIC.us on firefox to see the issue. I'd appreciate any help you can provide:
Code:
/* CSS Document */
html {
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
height: 100%;
min-height: 100%;
}
#menubackground {
/* float:left;*/
width:100%;
background:#F2B358;
width: 812px;
height: 30px;
margin: 0 auto;
}
#menu {
margin:0;
padding:0;
list-style:none;
font-size:11pt;
font-weight:bold;
line-height:normal;
}
#menu li {
float:left;
margin:0;
padding:0;
width:115px;
height:30px;
}
/* DH change menu width here and change menubackground to 812 from 750 on this page */
#menu a {
color: #FFFFFF;
text-decoration: none;
outline:none;
display:block;
margin: 0 auto;
width: 115px;
height: 30px;
text-align: center;
padding: 5px 0px;
}
a.mainheaderlink {
background: url(http://www.flic.us/images/link1.jpg) no-repeat left top;}
a.endheaderlink {
background: url(http://www.flic.us/images/link2.jpg) no-repeat left top;}
a.mainheaderlink:hover {
background: url(http://www.flic.us/images/link3.jpg) no-repeat left top;}
a.endheaderlink:hover {
background: url(http://www.flic.us/images/link4.jpg) no-repeat left top;}
/* Header
#headerlogoimage {
width: 812px;
height: 50px;
margin: 0 auto;
background: url(http://www.flic.us/images/header_top.jpg) no-repeat center center;
}
*/
#headermainimage {
width: 812px;
height: 175px;
margin: 0 auto;
background: url(http://www.flic.us/images/flic-banner6d1.jpg) no-repeat center center;
}
Bookmarks