Getting rid of a 1px space in IE
Last Post 07/23/2008 2:48 PM by Michelle Tarby. 2 Replies.
Author Messages
Michelle Tarby
Nuke Ace
Nuke Ace
Posts:47


--
07/22/2008 9:24 AM

    I've been working on creating a mouseover effect for a HouseMenu - it works perfectly, but there's now a 1px space between the list items in IE that I can't get rid of.  Here's what I'm using to style my menu and the container its in.  Any suggestions of what I can try?

    #navigation
    {
        position: absolute;
        left: 0;
        top: 0;
        width:200px;
        background-color: #231f20;
        margin-top: -0.5em;   
    }
    #navigation ul
    {
    top: 1.1em;
    }

    #navigation ul li
    {
    height: 40px;
    list-style-type: none;
    text-align: center;
    background-color: #dfba39;
    font-family: Garamond;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid white;
    margin: 0;
    }
    #navigation a
    {
        color: #000;
        text-decoration: none;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    #navigation a:hover
    {
    text-decoration: none;
    display: block;
    background-color: #eed424;
    }

    #navigation ul li a.active
    {
    background: #7F8400;
    }


    I checked the source code that's being generated by the module and there's no space being added, so I'm a bit stumped.

    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/23/2008 3:04 AM
    When troubleshooting I tend to strip everything out of the CSS and then re-introduce it one at a time until the problem appears, you can then narrow it down to which part of the code is causing the problem in IE.

    You may want to ensure all padding, margins, borders are set to 0 as a starting point and just see if you can get rid of the space without styling the menu.
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Michelle Tarby
    Nuke Ace
    Nuke Ace
    Posts:47


    --
    07/23/2008 2:48 PM
    Thanks Lee - that did it. In case anyone runs into something similar, the gap in IE is caused by using display:block to create the rollover effect. All other browsers interpret it nicely, but IE treats it like a line break between my list items.


    ---