i need firefox users to check this

Doesnt work properly for me (Firefox v1.0.7).

The menu expands when I hover over the heading, however when I try and move to a menu item it collapses again.
 
does not work on my comp :( iv got version 1.0.2

anyone think why this maybe?? its not too much of a problem because its being designed as a uni project and they view in IE but they may get me on accessability grounds..

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: 10em;
  border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
color:#FFFFFF;
text-align: center;

  }
  
  li ul {
  display: none;
  position: absolute; 
  top: 1em;
  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;
}

cant think what would be causing the conflict?
 
If you want to make sure you pass accessibility/usability checks it might be an idea to ensure the site Validates

Have a look at CSS Validation also. (Alternatively you could also download the web developer extension for Firefox which has a CSS code checker).
 
Last edited:
It works fine in 1.5.0.1. It doesn't work properly in IE7 beta though. In FF the options appear underneath the heading. But in IE7 they appear in a column to the side of the heading, so when I try to mouse over the options, my mouse goes off the heading and the options disappear. Making it impossible to click anything :)
 
why is it complaining about this

*html div#container { position: absolute; margin-top: 20px; }

in the css validator?

i used this line to pass the error through the difference in box models between IE and Firefox

Im assuming that the problem with the menu working in firefox is down to a css issue..
 
[Sniper][Wolf] said:
why is it complaining about this

*html div#container { position: absolute; margin-top: 20px; }

in the css validator?
Click to expand...
That parser hack requires a space between the two initial selectors:
Code: 
* html div#container { position: absolute; margin-top: 20px; }
 
Well my css has been validated sucsessfully, and i cant see how it could be a problem with the xhtml because the problem is to do with style of the menu causing it to dissapear for some unknown reason??
 
You must log in or register to reply here.
Back
Top Bottom