SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2005
    Location
    London
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Anthology Book DHTML menu IE7 css problem?

    Anyone trying out the javascript drop down menus from the Sitepoint Javascript Anthology book might have noticed that in IE7 the sub menus are misaligned, they are offset to far to the right.

    Has anyone else come across this problem and does anyone know how to fix it? It has unfortunately broken several of my menus, though if you just try the demo menus from the book in IE7 they also suffer the same problem.

    I think this must be a CSS issue where a hack is no longer valid.

    Help much appreciated.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'm unfamiliar with the menus,
    But it could be beacuse IE7 needs the same code that is being delivered to IE6.
    If the code is using '* html' hacks you may need to replace them with the 'IF IE' conditional comments to make IE7 recognize it.

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the first time I've ever seen a style sheet in uppercase (well, mixed..).
    Cross browser css bugs

    Dan Schulz you will be missed

  4. #4
    SitePoint Member
    Join Date
    Aug 2005
    Location
    London
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fixed it

    Thanks for the star html (* html) hack info. It appears this was the main problem.

    I made another stylesheet and put IE7 only stuff in there, and then put the link inside:
    <!--[if IE 7]>
    <link rel="stylesheet" href="http://{$WEB_ROOT}/css/{$NAME}MenuIE7.css" type="text/css" media="all" />
    <![endif]-->

    The main fix was this:
    ul.horizontal li:hover {
    position:static;
    }

    I also had to set the li height to a fixed height to get IE7 to display the drop down menu items without gaps between them:
    ul.horizontal ul li {
    width: 200px;
    float: none;
    left: auto;
    margin: -1px 0px 0px -1px;
    padding: 0;
    height:18px;
    }

    The only problem then is if the menu item text is too long it goes onto the next line and creates a gap again, so i made the width 200px to allow for this.

    One last tweek was:
    /* iframe layer */
    ul iframe {
    position: absolute;
    z-index: 1010;
    border: none;
    overflow:hidden;;
    filter: alpha(opacity=0);
    }

    So that the iframe that gets put behind the drop down didn't show around the edges.

  5. #5
    SitePoint Member
    Join Date
    May 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    see my thread 'Sitepoint drop-down menu and IE7' a bit further down the page.
    The solution is not very elegant, so if there's a better one...
    It's being used on www.testyourself.tk


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
  •