HTMLHelp Forums > Floating menu and content... Little space in between

dougmanic

Oct 31 2006, 10:32 PM

Alright. I have two parts on this webpage: the menu and the content. In Firefox, this displays perfectly, the border of the content touches the border of the menu. In Internet Explorer, however, there's this little puny tiny space between the menu and the content... Why is there this space, and how can I destroy it?

CODE

<html>
    <head>
        <style type="text/css">
        .navBar {
        float:left;
        border:1px solid black;
        }

        .navBar a{
        display:block;
        width:90px;
        }

        .content{
        margin-left:91px;
        width:700px;
        border:1px solid black;
        }
        </style>
    </head>
    <body>
        <div class="navBar">
            <a href="index.php">Home</a>
            <a href="?pageLink=printForm">Survey</a>
            <a href="?pageLink=showGraph">Results</a>
            <a href="?pageLink=admin">Admin</a>
        </div>
        <div class="content">
                  TEXT------------------------------>>>

        </div>
    </body>
</html>

Any thoughts?

pandy

Nov 1 2006, 01:40 AM

QUOTE(dougmanic @ Nov 1 2006, 04:32 AM)

Alright. I have two parts on this webpage: the menu and the content. In Firefox, this displays perfectly, the border of the content touches the border of the menu. In Internet Explorer, however, there's this little puny tiny space between the menu and the content... Why is there this space, and how can I destroy it?

I think the borders overlap, but never mind. The bug is a variation of this.
http://www.positioniseverything.net/explor...hreepxtest.html

The main topic doesn't apply to your page, but if you scroll down to "Two more things. When the IE float model is invoked, the float suddenly has a 3px margin on the paragraph side" it begins to make sense. The IE float model is described here http://www.positioniseverything.net/floatmodel.html, you trigger it by using a width on the non floating box.

The article about the gap is a little fuzzy, but the fix is to feed this to IE.

CODE

.navBar { margin-right: -3px }

dougmanic

Nov 1 2006, 09:53 AM

Little space has now been destroyed.

Thanks for the help!