IE duplicates a portion of text under the Navigation bar, while Firefox works fine

**akrashdi** · Dec 23, 2007 21:50

Hi,

I have created a header which is working fine with Firefox but IE duplicates a portion of text on the navigation bar.

By pressing Ctr+A in IE, you will see the text wrapped under the Navigation bar. The actuall text finishes on the Navigation Bar, but the text under it, I have no idea where it comes from.

Heres the link.
http://www.nkasolutions.com/sites/header/header.html

Appreciated...

**Paul O'B** · Dec 24, 2007 06:45

Hi, Welcome to Sitepoint.

The first step in solving problems should always be to first check that you are using valid code.

As we see form your code you don't even have a doctype so IE will be working in quirks mode and using the broken box model among other bad things.

If you add a valid doctype then you can validate your page and pick up any errors and typos that have crept into the code. We can then immediately see that you have nested divs inside your anchors which is strictly not allowed as anchors are inline elements and can only contain other inline elements. You need to put the anchors inside the divs and not the other way around.

That menu should be a list anyway and not non-semantic divs. Always try to use the correct html element for the job in hand.

The css for the menu is duplicating a lot of styles and you don't need to do it that way. Set all the styles in one go and then just add the differences via the ID you are using. Therefore all you need to add is the width and the background-image. This will save tons of code.

Once we have fixed the html errors it seems that the problem has gone away.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*--------------------------------------------------------------------------------------
Global
-------------------------------------------------------------------------------------- */
body {
    margin:0;
    font-family:Arial;
    font-size:11px;

}

a img {
    border:none;
}

div .product-list-item {
    padding:15px;
}


div .category-list-item {
    padding:10px;
}

/*--------------------------------------------------------------------------------------
Header
-------------------------------------------------------------------------------------- */

#headerWrapper {
    float:left;
    width:800px;
    height:95px;
}
    #headerLeft {
        float:left;
        width:275px;
        height:95px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/logo.gif) top left no-repeat;
    }

    #headerRight {
        float:right;
        width:240px;
        padding-top:39px;
    }
    
    .headerRightContent {
        float:right;
        margin:5px auto;
        color:#494949;
        text-align:right;
    }
    

/*--------------------------------------------------------------------------------------
Navigation
-------------------------------------------------------------------------------------- */

    ul#navWrapper {
        float:left;
        width:800px;
        height:33px;
        font-size:0px;
                list-style:none;
                margin:0;
                padding:0
    }
           ul#navWrapper li{
              float:left;
        height:33px;
        text-indent:-8000px;
        overflow:hidden;
             }
   ul#navWrapper a{
         display:block;
         height:33px;
     }
    #nav01 {
        width:53px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav01.gif) top left no-repeat;
    }

    #nav02 {
        width:64px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav02.gif) top left no-repeat;
    }
    
    #nav03 {
        width:67px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav03.gif) top left no-repeat;
    }

    #nav04 {
        width:58px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav04.gif) top left no-repeat;
    }

    #nav05 {
        width:108px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav05.gif) top left no-repeat;
    }

    #nav06 {
        width:80px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav06.gif) top left no-repeat;
    }

    #nav07 {
        width:83px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav07.gif) top left no-repeat;
    }

    #nav08 {
        width:287px;
        padding-top:9px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/nav08.gif) top left no-repeat;
        font-size:11px;
        color:#FFFFFF;
        text-align:right;
    }

/*--------------------------------------------------------------------------------------
Left Column
-------------------------------------------------------------------------------------- */
td #ctl00_leftColumn.page-column-left {
    vertical-align:top;
}

ul.module-list li {
    list-style:none;
    margin-left:-25px;
    padding:0px 0px;
}

td .mod-body-body {
    padding-top:10px;
    padding-bottom:10px;
    padding-right:12px;
}

td .mod-body-body input {
    margin-left:17px;
    font-family:Arial;
    font-size:10px;
}

td .mod-body-body img {
    width:18px;
    height:12px;
}


/*--------------------------------------------------------------------------------------
Main Content Area
-------------------------------------------------------------------------------------- */

table {
    clear:left;
}

tr.content-head-row td, tr.content-nav-row td {
    text-align:center;
}



td #ctl00_centerColumn.page-column-center {
    vertical-align:top;
/*    padding:10px; */
}

td {
    vertical-align:top;
}

.spacer20pixels {
    clear: left;
    width: 600px;
    height: 20px;
}

.spacer1pixel {
    clear: left;
    width: 600px;
    height: 1px;
}

    #welcomeBar {
        float:left;
        width:607px;
        height:26px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/welcome_bar.gif) bottom center no-repeat;
    }

    #banner {
        float:left;
        width:607px;
        height:180px;
        background:url(http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/layout/banner.jpg) bottom center no-repeat;
    }


/*--------------------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------------------- */
#belowFooterWrapper {
    float:left;
    width:800px;
    height:30px;
    margin:0 auto;
    padding-top:5px;
    color:#494949;
}
    #belowFooterLeft {
        float:left;
        margin-left:7px;
    }
    #belowFooterRight {
        float:right;
        margin-right:7px;
    }

#trademarkWrapper {
    clear:left;
    width:800px;
    text-align:center;
}

a.navLink:link, a.navLink:active, a.navLink:visited, a.navLink:hover  {
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    text-decoration:none;
}


a.grayLink:link, a.grayLink:active, a.grayLink:visited, a.grayLink:hover  {
    color:#494949;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    text-decoration:none;
}


</style>
</head>
<body>
<div id="headerWrapper">
    <div id="headerLeft"> </div>
    <div id="headerRight">
        <div class="headerRightContent"> <a href="login.aspx">Sign in</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; <a href="cart.aspx">View Cart</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; <a href="checkout.aspx">Checkout</a></div>
        <form id="form1" method="post" action="">
            <div class="headerRightContent">
                <label for="searchtxt">Search</label>
                <input id="searchtxt" name="searchtxt" type="text" />
                <input type="image" src="http://www.nkasolutions.com/sites/header/themes/myframesmaster/images/buttons/custom_search_submit.gif" name="go"/>
            </div>
        </form>
    </div>
</div>
<ul id="navWrapper">
    <li id="nav01"><a href="index.aspx">Home</a></li>
    <li id="nav02"><a href="products.aspx">Products</a> </li>
    <li id="nav03"><a href="about-us.aspx">About Us</a></li>
    <li id="nav04"><a href="policies.aspx">Policies</a></li>
    <li id="nav05"><a href="newsandevents.aspx">News and Events </a></li>
    <li id="nav06"> <a href="frameshop.aspx">Frame Shop</a></li>
    <li id="nav07"><a href="tipsandfaqs.aspx">Tips &amp; FAQs</a></li>
    <li id="nav08">Questions? (800) 241-3196 M-F 10am-5pm PST &nbsp; </li>
</ul>
</body>
</html>

I'm not sure why you are using images for the navigation when the images look just like a text equivalent anyway., This seems really strange to me as you should simply be using text which is much more accessible.

Hope that helps

**akrashdi** · Dec 24, 2007 07:36

Paul,

Your code has set my direction for future development. I've been working with older HTML techniques, now its time for me to switch rapidly to the best practices of current era.

I knew that there is a better way of doing it, but to get to that way I had to post my thread to this forum.

The code is working fine, except there is a little bit extra space under the Navigatoin which Firefox is comfortable with but IE is not.

The actuall space between Nav and Main section is only 3px, which I have covered with the 3px white space above the Shopping Cart Button. So there is no space under the Nav but IE is showing it.

The original height of the Nav was 30px not 33px which I have changed in the CSS, but still the problem exists.

Heres the link: http://myframemaster.com/

I will trying my best to figure it out until I get your response.

I greatly appreciate your help.

**Paul O'B** · Dec 24, 2007 07:57

Hi,

The gap is because you are adding 9px padding to nav08 and that increases the height by 9px.

Remove the padding and use this instead.

Code:

    #nav08 {
       width:287px;
       line-height:30px;
              background:url(http://myframemaster.com/themes/myframesmaster/images/layout/nav08.gif) top left no-repeat;
        font-size:11px;
        color:#FFFFFF;
        text-align:right;
    }

Note that you can only use an ID once in your page as it should identify a unique element. You should be using classes if you want to re-use styles such as your top- and bottom navs.

You have a number of errors in the code that are creeping in and you should validate the page as there seem to be missing closing tags in there which may trip you up later.

I realise you are new to CSS but try and steer away from nested tables as they are bad on all fronts. While you are learning its ok to use a table for the main structure but don't use a table for everything. Eventually you can get rid of the tables altogether and just use them for tabular data.

**akrashdi** · Dec 24, 2007 08:10

Yes Paul, I just figured this out.

Code:

    #nav08 {
        width:287px;
/*        padding-top:9px; */
        background:url(../images/layout/nav08.gif) top left no-repeat;
        font-size:11px;
        color:#FFFFFF;
        text-align:right;
    }

but I need to make that Toll vertically center-aligned.

I also tried this but it doesn't work

Code:

        height:21px;
        padding-top:9px;

Yes, I'm new to CSS layouts, but I learning it quickly.

**akrashdi** · Dec 24, 2007 08:16

Paul,

Thank you for your help.

I know CSS, very rare I have to go and look up for the reference, but I have been using it blindly as inline styles with my Frontpage designs. I have been away from the best practices established in the web design industry.

Is there any book or tutorials that specifically focus on best practices or about what should be used and what should be avoided?

Appreciated..

**akrashdi** · Dec 24, 2007 08:20

Paul,

I'm responsible for just Header and Footer, the code of the Main content area is generated by some automated shopping cart tool.

Now you know that I'm not that bad coder.

**Paul O'B** · Dec 24, 2007 08:49

Is there any book or tutorials that specifically focus on best practices or about what should be used and what should be avoided?

Yes this one

It's not really a tutorial but a reference site with a lot of good information (even if I say so myself

).

And read the CSS FAQ.

**akrashdi** · Dec 25, 2007 10:19

Paul,

I appreciate your help.

Thank you.

**akrashdi** · Dec 25, 2007 10:40

Waow ! U R Da Man Paal !

User Tag List

Thread: IE duplicates a portion of text under the Navigation bar, while Firefox works fine

Thread Tools

Display

IE duplicates a portion of text under the Navigation bar, while Firefox works fine

Amazing code for Navigation !

Thats right ! Its 9px Padding !

Great ! that line-height:30px worked.

Just the Header & Footer is mine !

Bookmarks

Bookmarks

Posting Permissions