SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    London
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS menu issue in IE

    take a look at this menu... looks great in Moz n Nutscrape but looses the borders on the menu after a few rollovers in ie6 and probably ie5 too

    any pointers

    http://www.jonowoods.f2s.com/prob.htm


    css here

    http://www.jonowoods.f2s.com/main.css

    cheerz

  2. #2
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm.. i don't see a problem. Borders (do you mean the strong border on the righthand site by hovering a linkbutton?) are displayed every time in every browser.
    But in ie the navibox (where all the linkbutton are in) stretches when i hover one linkbutton

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    London
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I really mean is the bottom margin of each link.. sorry for the confusion.

    When looking at it in ie 6, when you roll over the menu, it seems to ripple... this is because the margin which is set to be 1 at the bottom seems to dissapear on links that are not rolled over

    margin: 0px 0px 1px 10px;

    It works fine in Moz based browsers

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use a margin-bottom on your menu divs to create the bevel, use a border-top instead. That should work without the sideeffects in IE i hope.

    a.menu:link, a:visited, a:active{
    display: block;
    font-family: Verdana,Arial,sans-serif;
    font-size: 10px;
    color: #000000;
    font-weight: normal;
    float: none;
    width: 124px;
    margin: 0px 0px 0px 10px;
    padding: 2px 0px 2px 4px;
    background-color: #DADADA;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #B0B0B0;
    text-decoration: none;
    }

    a.menu:hover{
    display: block;
    font-family: Verdana,Arial,sans-serif;
    font-size: 10px;
    color: #000000;
    font-weight: normal;
    float: none;
    width: 124px;
    margin: 0px 0px 0px 10px;
    padding: 2px 0px 2px 4px;
    background-color: #E9E9E9;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #B0B0B0;
    border-right: 5px solid #000000;
    text-decoration: none;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    London
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers... just check your reply and I had managed to do the same.... great minds n all that

    All I have to do now is get the box model hack working properly


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
  •