Hey all! I have a problem with Firefox today and well not IE, which usually isnt the case. But in this site here,
In FF, the menu which is consisting of Images displays weirdly, what I mean is that I want the menu to be horizontal. But, in FF the images are kind stacked to the right except for the selected li item. But, in IE it displays actually fine. I can’t find the thing that is wrong with the menu code… Thanks to anyone that could help!
Heres the menu code
/*Menu Code Start*/
#menu {
height: 30px;
width: 100px;
clear:both;
}
#menu ul {
margin: 0;
padding: 0;
display: block;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu a {
display:block;
float: left;
padding: 30px 0 0 0;
height: 0px !important;
height /**/:30px; /* for IE5/Win only */
clear: both;
}
#menu a:hover, #menu a.selected {
background-position: -100px 0;
}
#menu a:active {
background-position: 0 0 0 0; /* Without Declaring 0 0 0 0, in IE the menu is displayed lower*/
}
#thome a {
width: 100px;
background: url(images/home.jpg) top left no-repeat;
}
#tabout a {
width: 100px;
background: url(images/about.jpg) top left no-repeat;
}
#tstaff a {
width: 100px;
background: url(images/staff.jpg) top left no-repeat;
}
#tstories a {
width: 100px;
background: url(images/stories.jpg) top left no-repeat;
}
#tcontact a {
width: 100px;
background: url(images/contact.jpg) top left no-repeat;
}
/*End Menu Code*/