Submit Your Article Forum Rules

Results 1 to 7 of 7

Thread: FF not displaying Hover content

  1. #1
    Senior Member
    Join Date
    Jul 2003
    Posts
    290

    FF not displaying Hover content

    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
    Rob

  2. #2
    Moderator HTMLBasicTutor's Avatar
    Join Date
    Apr 2010
    Location
    Canada
    Posts
    1,214
    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.
    Hidden Content - Search engine friendly websites, ecommerce websites & blogs
    Hidden Content - Web page mistakes with solutions
    Hidden Content - HTML help to learn HTML basics

  3. #3
    Senior Member
    Join Date
    Jul 2003
    Posts
    290
    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
    Rob

  4. #4
    Senior Member
    Join Date
    Jul 2003
    Posts
    290
    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?
    Rob

  5. #5
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,794
    First off, <a> is an inline element, and may not contain any block level element (in valid code).
    HTML 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.

  6. #6
    Senior Member dgswilson's Avatar
    Join Date
    Jul 2009
    Location
    Texas
    Posts
    284

    a:hover

    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
    In search of the self determined path

  7. #7
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,794
    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.

    HTML Code:
    <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:
    Code:
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •