SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text reflow on :hover in Win IE 5.x, 6

    I'm working on a page with some dynamic menus. The page seems to be working on all the browsers I tested except on Win IE 5, 5.5 and 6. When "hovering" over the menu items, the menu list expands but it causes the text in the content box to slighly reflow. I can't figure out why it is happening and how to fix it. Works fine on all other browsers I tested. Anyone have an idea?

    the page can be seen here:
    http://homepage.mac.com/pmleblanc/menutest.html

    thanks in advance-
    Paul

  2. #2
    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,

    Thats the iE 3 pixel jog that occurs on content next to floats.

    The fix is to use the following code:
    Code:
    #content {
     margin-left: 205px;
     padding-top: 15px;
    }
    * html #content{height:1%}
    That should fix it

    Paul

  3. #3
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Thanks Paul!

    Yes, that did fix it. You have no idea how long I spent trying to figure it out.

    Any ideas why in Win IE 5 that the text for the links is indented about 60px and when hovering and after hover the text indent changes to about 30px, or half the original indent? Actually where the text ends up after it moves is where it should be in the beginning, not sure why the indent seems to be doubled initially.

    Thanks again Paul, YOU ROCK!!!




    Quote Originally Posted by Paul O'B
    Hi,

    Thats the iE 3 pixel jog that occurs on content next to floats.

    The fix is to use the following code:
    Code:
    #content {
     margin-left: 205px;
     padding-top: 15px;
    }
    * html #content{height:1%}
    That should fix it

    Paul

  4. #4
    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,
    Any ideas why in Win IE 5 that the text for the links is indented about 60px and when hovering and after hover the text indent changes to about 30px, or half the original indent
    It seems to be a bug in ie5 /5.5.. You can hack it if you want like this:

    Code:
     #navlist li {
     margin:0;
     padding: 0;
      list-style-type: none;
      border-top: 1px solid #fff;
      line-height: 1.5em;
      text-indent:2em;
     }
    * html #navlist li { text-indent:0; te\xt-indent:2em;}
     #navcontainer ul a {
      margin:0;
      display: block; 
      width: 100%;
      padding: 5px 0;
     background-color: #2c66bc;
     }
    * html #navcontainer ul a {padding-left:2em;padd\ing-left:0}
    Hope that helps.

    Paul


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
  •