SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <li> menu not displaying right in IE6

    http://www.funkthis.com

    Perfect in FireFox, but in IE the left and right column menu links (which are <li>) are indented. This looks to be the reason it is then pushing the right hand column down below everything.

    html....
    <div class="menubox">
    Welcome Guest
    <ul class="menu">
    <li><a href="{DIRURL}/index.php?action=userlogin">Log-in</a></li>
    <li><a href="register.php">Register</a></li>
    </ul>
    CSS...

    /* START MENU */

    .menu ul{margin:0px; padding:0px;}

    .menuhead {
    font-size: 14px;
    display: block;
    color: #000000;
    font-weight: bold;
    text-align:center;
    background-color:#DFD9BB;
    border: #C1B67D solid 1px;
    }

    .menubox {
    background-color:#FFFFFF;
    width:160px;
    margin-bottom:7px;
    padding:5px;
    }

    .menu {
    color:#565452;
    font-weight:bold;
    padding:0px 0 4px 0px;
    }

    .menu li {
    display: block;
    border-bottom:1px solid #dbd4b4;
    list-style: none;
    }

    .menu a {
    text-decoration:none;
    color:#565452;
    display:block;
    padding:3px 14px 3px 0;
    }

    .menu a:hover {
    color:#CC0000;
    }

    .menu li:hover,
    .menu li a:hover{
    background-color:#FBF2E3;
    }
    /* END MENU */

    TIA
    Jill

  2. #2
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure why this is.... but a simple solution would be to use the ie underscore hack

    From this page:
    The Underscore Hack

    The underscore hack is particularly useful if you only have a few minor things that need adjustments. It’s also useful since you can keep your IE CSS with the real CSS, making it easier for adjustments down the road. Now you’re probably wondering how the underscore hack works.

    Let’s say you a class called text, and you want to apply a 10 pixel margin to that text. The 10 pixel margin looks great in every browser but IE. To make IE look better you think it needs a 15 pixel margin. To accomplish that you need to give IE code that only it will understand. This can be done by the following code:

    .text {
    margin: 10px;
    _margin: 15px;
    }

    This hack works because IE is stupid. An underscore in CSS acts as a comment for that attribute only, and all browsers but IE honor this. Since IE doesn’t follow the underscore rule, placing the same attribute with an underscore after the real attribute will redefine that attribute for IE, while all other browsers will skip the second redefined attribute. Ah, using IE’s stupidity to solve IE stupidity. Brilliant!

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but I'm afraid I don't really understand the remedy. I don't have margins assigned to the menu.

  4. #4
    SitePoint Zealot ejg's Avatar
    Join Date
    Jun 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that you are zeroing out the margins and padding in this line

    Code CSS:
    .menu ul {margin:0px; padding:0px;}

    That would work if you had
    Code HTML:
    <div class="menu">
         <ul> ...
                <li></li>
         </ul>
    </div>

    where your <ul> is inside a menu div but you have the class applied to your <ul> so you need

    Code CSS:
    ul.menu {margin:0px; padding:0px;}

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dtm32236 - didn't get to try the underscore as ejg's remedy fixed the problem

    Quote Originally Posted by ejg View Post
    Code CSS:
    ul.menu {margin:0px; padding:0px;}
    That did it! Thanks.

  6. #6
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can apply the underscore to anything.... margin, padding, well... any CSS property.

    So, you can do something like:

    .menu li {
    display: block;
    border-bottom:1px solid #dbd4b4;
    list-style: none;
    _margin-left:-15px;
    }

    and it will pull the list 15px towards the left in IE, making it look correct. I haven't tested this on your site, but try margin and padding on different parts of the list (maybe on the UL itself, or on the LI, etc).


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
  •