SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical CSS Nav Help (expanding clickable region in IE)

    Alo...

    I'm having trouble getting my CSS nav to work in IE 6 & 5.5. The menu code comes from The Art & Science of CSS book. The whole background color of each <li> needs to change based on the :hover style.

    It works great in everything above IE 6, which only changes the background hover when you mouse over the text link.

    I can wrap each link with a span tag and and create a class with a width of 100% which does the trick but obviously I don't want to add all of that extraneous code.

    What should I target to just affect IE 5.5 & 6? Something like *html, body { ? }. I believe I saw it in another Sitepoint book.

    Appreciate any help.

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please post a link to the page, so we can take a look.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    First of all try adding position:relative to the anchor and see if that fixes the problem.

    If not use the star selector hack to target IE6 and under and use this.
    Code:
    * html a.anchorclass {height:1&#37;}
    The above assumes that you have already set the anchor to display:block.

    IE needs the elements to have "haslayout" so you can do this with a dimension. Read the faq on "haslayout" for more information and read the box model faq for info on the star selector hack.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks Paul.

    *html #myelement a works great. Only issue was the extra padding/width applied to the box in IE 5.5 & 6 that was corrected with

    * html #myelement
    { /* IE Box Model Hack */
    width: 180px;
    w\idth: 150px;
    }


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
  •