SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast CanaryWoolf's Avatar
    Join Date
    Dec 2005
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disappearing Navigation in IE7

    OK - any idea what might be going on here? (fine in IE6, FF, Opera etc)

    http://www.cavaliermailing.com/content/services.html

    The left hand navigation text disappears on 'hover' but reappears if another main navigation is hovered over.
    Code:
    #Menu li.suboff a:hover{
    width:90%;
    text-decoration:none;
    color:#777570;
    background:#d0cdc3;
    font-weight:normal;
    display:block;
    padding: 8px 0px 8px 8px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #fff
    }
    What's even weirder is that the middle navigations uses the same css code but works fine??

    Code:
    #MidMenu li.suboff a:hover{
    width: 95%;
    text-decoration:none;
    color:#777570;
    background:#d0cdc3;
    font-weight:normal;
    display:block;
    padding: 8px 8px 8px 8px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #fff;
    min-height: 87px
    }
    Also is there any mechanism for reporting these faults to Microsoft - and hopefully getting the bugs fixed before it goes live?

    CW
    Last edited by CanaryWoolf; Jun 21, 2006 at 13:51. Reason: Addition to text
    Canary Woolf
    Do you know what a zook is?
    www.bamzooki.org.uk + | + www.cavaliermailing.com

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have IE7 installed on this PC, but it could be a problem with the min-height rule.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it the latest IE7 Beta you are using?

  4. #4
    SitePoint Enthusiast CanaryWoolf's Avatar
    Join Date
    Dec 2005
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    Is it the latest IE7 Beta you are using?
    Version 7.0.5346.51S if that helps?

    CW
    Canary Woolf
    Do you know what a zook is?
    www.bamzooki.org.uk + | + www.cavaliermailing.com

  5. #5
    SitePoint Enthusiast CanaryWoolf's Avatar
    Join Date
    Dec 2005
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    I don't have IE7 installed on this PC, but it could be a problem with the min-height rule.
    Fixed - thanks.

    I added
    Code:
    min-height: 15px
    to the navigation hover and it worked.

    Cheers

    CW
    Canary Woolf
    Do you know what a zook is?
    www.bamzooki.org.uk + | + www.cavaliermailing.com

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

    Nothing to do with your problem but you can cut your css code down considerably by not repeating the same things over and over again.

    e.g.
    Code:
    #Menu li.suboff a{
    width:90%;
    text-decoration:none;
    color:#777570;
    background:#ece9e0;
    font-weight:normal;
    display:block;
    padding: 8px 0 8px 8px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #fff
    }
    #Menu li.suboff a:hover{
    width:90%;
    text-decoration:none;
    color:#777570;
    background:#d0cdc3;
    font-weight:normal;
    display:block;
    padding: 8px 0px 8px 8px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #fff
    }
    could simply be reduced to :
    Code:
    #Menu li.suboff a{
    width:90%;
    text-decoration:none;
    color:#777570;
    background:#ece9e0;
    font-weight:normal;
    display:block;
    padding: 8px 0 8px 8px;
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #fff
    }
    #Menu li.suboff a:hover{
    background:#d0cdc3;
    }
    The code "#Menu li.suboff a" defines all states of the anchor and therefore you only need to define the differences and save almost 50% of the code.


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
  •