SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with IE left-brain hip-check thang.

    I have been updating my own site content and design to more relevant technology... google fonts, HTML5 video, and CSS3 menus. The CSS drop drop menus will replace the FLASH drop menu. Here is my working CSS drop menu page: http://localhost/htm-communications-...-760-css03.htm

    The issue I am having with IE is the sub menu hover hotspot seems to only be the actual text area - as opposed to the background and text area of the sub menu items. Firefox, Chrome, Opera, Safari all seem to use the background and text area as the hover hotspot.

    So is there a left-brain, hip-check, web-kit, shim I can wedge in the cracks of IE?

    Greg
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your link seems to be broken! Can you post the correct link and I'll take a look.

    The usual problem with a target area is IE is usually only in IE6 (sometimes ie7) when no background colour has been set and in some instances only the text becomes active. The solution is to add a background colour and ensure the element haslayout (zoom:1.0). If you can't add a background colour then a fake background image will do (it doesn't have to exist but a non repeated 1px x 1px transparent gif will do the trick).

    However unless you are in quirks mode then IE8+ should be ok.

    I'd need to see the page to debug further.

  3. #3
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul... here is the link to an actual server. (you can't see my localhost? ) http://www.communications-by-design....-760-css03.htm I tried the background color, but I need transparent background in this case. Setting opacity to a low value affected the text as well. the transparent gif pixel sounds like its is worh a try.
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    yes the fake gif trick will work in IE.

    Code:
    #nav ul{background:url(fake.gif) no-repeat -1px -1px}
    Use a 1px transparent gif if you don't want missing image errors in your servers log but the image is not really needed.

  5. #5
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dropped the code down one level in my CSS to the #NAV UL LI.

    I tried a blue JPG as a background image to see the effect, but the background did not matriculate over to the last two top level menu choices "illustration" and "photography"... the blue.jpg was in their sub menus but not in the top level buttons. So I dropped it down to the Ul LI and every thing was good to go.

    Thanks O'Bi Wan...
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com


Bookmarks

Posting Permissions

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