FF not displaying Hover content

[ackerley1]

All, I have a simple form page with some minor javascript and CSS hover styles.

the page can be seen here: q.vacationprovisioning.com/FIXED.php

In FF I have a problem with the Terms and Conditions hover window (lower right of the page, in the Guest Information Form). The odd part is that when I check this page on my XAMPP Localhost server, it looks and functions perfectly, but when uploaded to a live server, it does not show the text in the hover pop-up.

I use this same hover pop-up no less than 15 other times on the page and they all work properly.

In addition to this, sometimes when the page loads in FF, some of the UL's that are supposed to be hidden in the hover pop-up show the list un-hidden and distorts various aspects of the page.

Any ideas on what would be causing this?

Thanks
Rob

[HTMLBasicTutor]

You have a lot of HTML errors on the page. Try fixing those first and see if that solves the problem. This will eliminate coding errors as the problem.

There is also 1 CSS error.

[ackerley1]

Thanks, it pointed out some important errors, but unfortunately didn't fix things... that being said, the most common error I recieved was:

Line 366, column 16: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<h2>Perfect for 2</h2>

This seems to stem from the way I have marked up the content of my hover boxes. It seems to not like any html (h2, p, ul, li, etc) inside the hover (which is contained by a <a href...>HOVER LINK<b class"right"> ...hover content... </b></a>

Then it also gives me JS errors on the page for what it perceives as incorrect use of < and & symbols/operators?

Any ideas on what should be done to eliminate those errors?

Please advise.

Thanks

Rob

[ackerley1]

okay, I managed to fix it so that the T & C's display in the hover window as they shoud. Replaced the <b> tag with a <span> tag. This didn't eliminate the errors at W3C, but don't suspect that I can remove those errors.

Now however the one issue that remains is that in FF, there are certain hover boxes that will arbitrarily not hide when the page is loaded. This results in the hover content being displayed on the page and ruins the formating for the rest of the page. Check it out in FF and reload the page a few times...

is there anything I am missing?

[weegillis]

First off, <a> is an inline element, and may not contain any block level element (in valid code).

<!-- This is invalid: -->
<a href="#"><h2>Link Text</h2></a>

<!-- This is valid -->

<h2><a href="#">Link Text</a></h2>

Likewise, <span> is also an inline element, and the same rule applies as with <a> (and all inline elements).

Second, could be the CSS cascade. Is the :LINK pseudo class BEFORE the :HOVER pseudo class? If it is after, the hover properties will never be seen. Link, Hover, Active, Visited, in this order.

This is without actually seeing your code, so these may not even be the problem. Some good rules of thumb, though.

Whenever a CSS property is not being rendered, the most likely culprit is the cascade, and when not this, specifically, it falls to inheritance issues. Pencil check your cascade, and study your document tree to trace the inheritance of 'global' properties, such as those applied on BODY or outer wrap, H1, etc. headline, DIV, P, and so on.

[dgswilson]

a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; } Put this at the "end" of the style sheet and see what happens

[weegillis]

Good call, @dgwilson. Caught again being 'wrong'; should have remembered the old hint phrase: LiVe HAppy. a:link, a:visited, a:hover, a:active, is the correct order.

On looking at the code this time, there are some validation issues, but as suspected they have to do with block level elements being wrapped in inline level elements.

<div class="details"><span><p>..</p><ul>..</ul></span></div>

This issue can be overcome by replacing SPAN with DIV, then in the CSS dial in the specificity:

CSS

div.details div {
 display: none;
}
div.details:hover div {
..
}

The OP seems to have resolved the HOVER event, though might be unpleasantly surprised to find it not supported in some older browsers, especially IE. (CSS2 is getting old, but support is less than universal, even now.) Not a really big issue, since IE6 is practically in retirement.

QuirksMode: :hover