Firefox problems with website

DJMK4

DJMK4

DJMK4

Soldato
Joined
1 Dec 2004
Posts
22,552
Location
S.Wales
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
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
 
It seems that the problem is occouring with the newer versions of Firefox, maybe this is something to do with how the newer versions of Firefox interpret the CSS source code?
 
You must log in or register to reply here.
Back
Top Bottom