Ok can anybody help me
I have designed a template page
www.caldicot-pc-helpdesk.co.uk/fcv/index.htm
For some reason it works fine in IE, and some versions of Firefox, but then for some reason the menu is slightly off in certain versions of firefox, can anybody tell me why because i cant identify the problem myself.
Here is the css
In some versions of firefox when you roll over the menu and try to select a sub-menu item, the menu dissapears, and one of the submenu items is also overlapped and looks out of place.
Any help greatly appriciated.
Thanks
I have designed a template page
www.caldicot-pc-helpdesk.co.uk/fcv/index.htm
For some reason it works fine in IE, and some versions of Firefox, but then for some reason the menu is slightly off in certain versions of firefox, can anybody tell me why because i cant identify the problem myself.
Here is the css
Code:
/* CSS Document for FCV */
body {
background-image:url(Images/background.jpg);
}
div#container {
position: absolute;
background-color:#ffffff;
margin-left: 50px;
margin-top: 50px;
width: 901px;
height: 500px;
}
* html div#container { position: absolute; margin-top: 20px; }
div#banner {
position: absolute;
background-image: url(Images/banner.jpg);
height: 85px;
width: 895px;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid black
}
div#content {
height: 360px;
width: 895px;
position: absolute;
background-color:#666666;
margin-top: 113px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
border: 1px solid black;
overflow:auto;
z-index: 1;
}
div#navigation {
position: absolute;
background-image:url(Images/menu.jpg);
margin-left: 2px;
margin-right: 2px;
margin-top: 90px;
width: 895px;
height: 20px;
border:1px solid black;
z-index: 2;
}
div#footer {
position: absolute;
background-color: #666666;
height: 20px;
width: 895px;
margin-top: 476px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
border: 1px solid black;
}
ul#nav {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 9em;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
color:#FFFFFF;
text-align: center;
}
li ul {
display: none;
position: absolute;
top: 19px;
left: 0;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
background-image:url(Images/menu.jpg);
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; }
a {text-decoration:none;
color:#FFFFFF;
}
a:hover {
color:#FF0000;
}In some versions of firefox when you roll over the menu and try to select a sub-menu item, the menu dissapears, and one of the submenu items is also overlapped and looks out of place.
Any help greatly appriciated.
Thanks
