View Full Version : problems with :hover in IE7 and Firefox 3.0.11

Jul 20th, 2009, 03:24 PM
On my home computer and also on my work computer, I use IE7 and firefox 3.0.11. The links on my website work fine on my home computer but they do not appear long enough for me to click on them on my work computer - why is this?

Another related problem that I have not yet been able to solve is that the :hover links do not appear at all in IE6.

Here is the CSS:

"-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">

<title>Utah Vacation</title>

<style type="text/css">

body {
margin: 50px 0px;
padding: 0px;
text-align: center;
color: inherit;
font-family: Verdana, Sans-serif;
font-size: 12pt;
text-spacing: 0.05em;

text-align: center;

font-family: Verdana, Sans-serif;
font-size: 14pt;
text-spacing: 0.05em;

#banner {

width: 600px;
margin: auto;



width: 578px;
margin: 10px auto;
text-align: left;
float: left;
display: inline;
padding: 10px;
border: 3px solid #00688B;
background-color: #FEE8D6;
color: #5E2612;



list-style-type: none;

#mainmenu li{
position: relative;
text-align: center;
width: 118px;
margin: 0 auto;
border:1px solid #00688B;
background-color: #00688B;
color: #FFDAB9;

#mainmenu a {
display: block;
padding: 0;
text-decoration: none;
background-color: #00688B;
color: #FFDAB9;


#mainmenu a:hover{
background-color: #691F01;

#mainmenu li ul {
position: absolute;
margin: 0px;
padding: 5px;
left: -3px;
top: 22px;
display: none;
border:2px solid #deb887;

#mainmenu li ul li{
width: 123px;
font-size: smaller;
border-top: none;

#mainmenu li:hover ul {
display: block;

#footer {
color: #5E2612;
background-color: inherit;



Here is the HTML:

<body onload = "window.status= 'There are no ordinary cats. - Colette'; return true">

<div id="banner">
<img src="pond.jpg" alt="View of the pond at the Best Friends Sanctuary Welcome Center" alt="View of the pond at the Best Friends Sanctuary Welcome Center" title="View of the pond at the Best Friends Sanctuary Welcome Center" />

<div id="mainmenu">
<li><a href="home.html" alt="home" title="home"> Home</a></li>
<li><a href="angelcanyon.html" title="Angel Canyon">Angel Canyon</a></li>
<li><a href="angelsrest.html" title="Angel's Rest">Angels Rest</a></li></ul></li>


<li>Cat World
<li><a href="catworld.html" alt="cat world" title="Cat world">About</a>

<li><a href="catgallery3.html" title="Benton's House">Benton's House</a></li>

<li><a href="kittymotel.html" title="Kitty Motel">Kitty Motel</a></li>

<li><a href="casadecalmar1.html">Casa de Calmar</a></li>

<li><a href="colonels.html" title="Colonel's Barracks">Colonel's Barracks</a></li>

<li><a href="vinnys.html" title="Vinny's House">Vinny's House</a></li>

<li><a href="Mondrians.html" title="Mondrian's">Mondrian's</a></li>


<li><a href="Dogtown.html" alt= "dog town" title="Dogtown">Dogtown </a></li>

<li> Scenery

<li><a href="zion.html" title="Zion">Zion </a></li>

<li><a href="bryce.html" title="Bryce Canyon">Bryce Canyon </a></li>
<li><a href="redcanyon.html" title="Red Canyon">Red Canyon</a></li>
<li><a href="drive.html" title="Drive">Drive</a></li>


Jul 20th, 2009, 03:44 PM
W3 validator gives these CSS errors.

text-spacing is not acceptable

<li> is only acceptable within <ul> or <ol> tags

There are some misplaced and missing tags. <ul> </ul>

Use the mark up validator here (http://validator.w3.org/). and for css here (http://jigsaw.w3.org/css-validator/).


W3C CSS Validator results for file://localhost/TextArea (CSS level 2.1)
Sorry! We found the following errors (2)
URI : file://localhost/TextArea
9 body Property text-spacing doesn't exist : 0.05em
17 h1 Property text-spacing doesn't exist : 0.05em

↑ Top

The W3C validators rely on community support for hosting and development.
Donate and help us build better tools for a better web.
Warnings (4)
URI : file://localhost/TextArea
60 #mainmenu li Same color for background-color and border-top-color
60 #mainmenu li Same color for background-color and border-right-color
60 #mainmenu li Same color for background-color and border-left-color
104 #footer In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected

Jul 20th, 2009, 06:31 PM
hover did not work on anything other than anchors <a> in IE until IE7.