Grow your CSS skills. Land your dream job.

Navigation bar looks different in Internet Explorer.

  • # December 18, 2009 at 2:19 pm

    Hello Friends,

    I am new to web development. I am in the process of making a website using PHP and MYSQL. I have structured the pages of my website into 3 main divisions.
    (1) Header
    (2) Content
    (3) Footer

    The problem that I am facing is in the header portion. Functionality wise my website is working fine. But for some reason it looks very ugly in Internet Explorer(6.0). I have checked it in 3 different browsers. (Chrome, Firefox, and Internet Explorer). In Chrome and Firefox, It looks as expected, but for some reason it looks completely different in Internet Explorer.

    Currently This website is in development phase, and not live, so I cannot give you the link of the website, but I can give you the screenshot of the header portion. Following are the two screenshots. The first one is of Mozilla Firefox, and the second screenshot is of Internet Explorer.
    [attachment=1]ff.jpg[/attachment]

    [attachment=0]ie.jpg[/attachment]

    The navigation bar is looking fine in other browsers, but not in Internet explorer. You can see that the height of navigation bar is reduced in Internet Explorer. I am not able to fix this issue. I have been trying a lot to fix this but no success so far.

    For you people to get a clear picture of my header.php, I am also including the code I have written for header.php, and its CSS part.

    <div id="header"><!–BEGIN HEADER–>
    <div class="title"><!–BEGIN TITLE SECTION–>
    <a href="index.php"><img src="images/Title1.jpg" border="0"></a></div><!–END TITLE SECTION–>

    <div class="sign" id="sign" style="display: <?php echo ($org==’0′ ? ‘block’ : ‘none’); ?> "><!–BEGIN SIGN IN SECTION–>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;</td>
    <td><a href="#" class="basic1 txt3">Sign In</a></td>
    </tr>
    <tr>
    <td class="txt1">New User ?</td>
    <td><a href="register.php" class="txt3">Sign Up</a></td>
    </tr>
    </table>
    </div><!–END SIGN IN SECTION–>

    <div class="nav"><!–BEGIN NAVIGATION SECTION–>
    <ul>
    <li ><a href="index.php" class="home">TODAY’S ZULBI</a></li>
    <li><a href="blog" class="blog">BLOG</a></li>
    <li><a href="forum" class="forum">FORUM</a></li>
    <li><a href="aboutus.php" class="aboutus">WHAT’S ZULBI</a></li>
    <li><a href="contactus.php" class="contactus">WRITE US</a></li>
    </ul>
    </div><!–END NAVIGATION SECTION–>

    <div class="welcome" style="display: <?php echo ($org==’1′ ? ‘block’ : ‘none’); ?>"><!–BEGIN WELCOME SECTION–>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="50%" nowrap="nowrap" class="txt4"><?PHP if($_SESSION!="") { echo Welcome. " " . $first; } ?></td>
    <td width="25%"><a href="user_profile.php" class="txt5">Profile</a></td>
    <td width="25%"><a href="#"><a href="logout.php" class="txt5">Sign Out</a></td>
    </tr>
    </table>
    </div><!–END WELCOME SECTION–>

    <div class="divider1"><!–BEGIN DIVIDER SECTION–>
    <hr color="#000066" size="3">
    </div><!–END DIVIDER SECTION–>

    </div><!–END HEADER–>

    Following is the CSS part for the Header:

    #header{width:100%; margin:1.5% auto;}
    .title{float:left;}
    .nav ul{float:right; padding:3px 0; margin-left:0; font-family:"Times New Roman"; font-size:14px; font-weight:bold;}
    .nav ul li{list-style:none; margin:0; display:inline; padding:0;}
    .nav ul li a{text-decoration:none; border:1px solid #CCCCCC; padding:14px; background-image:url(images/bak.jpg); background-repeat:repeat-x; color:#000066;}
    .nav ul li a:link{color:#000066;}
    .nav ul li a:visited{color:#000066;}
    .nav ul li a:link:hover, .nav ul li a:visited:hover{background-image:url(images/hov.jpg); color:#00FFFF;}
    body.home a.home, body.aboutus a.aboutus, body.contactus a.contactus, body.blog a.blog{background-image:url(images/active.jpg); color:#000066;}
    .sign{float:left; margin-left:5%; margin-top:1%; width:15%;}
    .divider1{clear:both; /*background-image:url(images/divider.png); background-repeat:repeat-x; */width:100%; margin:0 auto;}
    .welcome{clear:both; float:right; margin-bottom:0%; margin-top:0%; margin-right:0%; width:30%;}

    I hope I have explained my problem clearly.
    I am new in web development field. I am not able to solve this issue. Any help will be highly Appreciated. Thanks.

    # December 18, 2009 at 3:20 pm

    Add "display:block" to your nav ul li a declaration.

    # December 18, 2009 at 8:31 pm
    "JaredAM" wrote:
    Add "display:block" to your nav ul li a declaration.

    Thanks for the help Jared. I have added "display:block" to my .nav ul li a declaration.
    Using the said property resolves the issue of shrinking navigation elements, but it has created one more problem. Instead of displaying all the navigation links horizontally, It is displaying all the navigation links vertically, one on top of the other. I am sending a screenshot of the header after the display:block property is applied.

    [attachment=0]display_block.jpg[/attachment]

    I tried using display:inline at the end of the .nav ul li a declaration, but this again shrinks all the navigation elements in Internet Explorer. Help Please…

    # December 18, 2009 at 9:37 pm

    Setting display: block should make them go on new lines, so I don’t think that solution will work. Perhaps I’m just missing it, but I don’t see anywhere where you define a height for your navigation bar and each of the items in it. If this is the case that could be your problem.

    # December 18, 2009 at 10:06 pm
    "nosecreek" wrote:
    Setting display: block should make them go on new lines, so I don’t think that solution will work. Perhaps I’m just missing it, but I don’t see anywhere where you define a height for your navigation bar and each of the items in it. If this is the case that could be your problem.

    I have even tried specifying the height of the navigation bar and its elements. But this also does not work. Currently I am using 3 images in the navigation bar.
    (1)bak.jpg — For the background.
    (2)hov.jpg — For the hover effect
    (3)active.jpg — For highlighting the current link (Current Page).

    Following are all the 3 images:
    [attachment=2]bak.jpg[/attachment] [attachment=1]hov.jpg[/attachment] [attachment=0]active.jpg[/attachment]

    All the images are of the size 4px X 50px. All the images repeat in the x-direction.
    So I think Mozilla Firefox, and Chrome are taking the height of navigation bar as the height of the image.The navigation bar looks fine in both the browsers. But for some reason It is not getting displayed in Internet Explorer as it should. I have even tried specifying the height of navigation bar elements to 50px. But that also doesnot work. I am not sure, what is causing this.

    # December 19, 2009 at 12:26 am

    Hmm, that is strange. Without any height declaration I can see why I might only make the element as high as the text, but with it I’m not sure why it would still be too small. What happens if you declare "line-height: 50px;" for the navigation bar elements?

    # December 19, 2009 at 2:34 am

    Nosecreek was correct, you’ll need to set both the height AND block on .nav ul li a.

    # December 19, 2009 at 4:11 am
    "TheDoc" wrote:
    Nosecreek was correct, you’ll need to set both the height AND block on .nav ul li a.

    I have used the following property for .nav ul li a, as suggested

    .nav ul li a{height:50px; display:block; text-decoration:none; border:1px solid #CCCCCC; padding:14px; background-image:url(images/bak.jpg); background-repeat:repeat-x; color:#000066;}

    Specifying height =50px doesnot make any difference to the navigation bar. If I am using both the properties height=50px, and display:block, then the navigation bar looks as shown below:

    [attachment=1]ie1.jpg[/attachment]

    [attachment=0]ff1.JPG[/attachment]

    I am not able to understand, what exactly is causing the problem. Somebody please help me in resolving this issue.

    # December 19, 2009 at 12:23 pm

    Okay, the issue is this: In order to go to the proper height the display needs to be set to block. The problem is that by doing this it is just creating another problem. Since block elements have line breaks before and after them they will each go on a new line. The solution is to wrap each block-level element in an inline element. Right now your code is like this:

    You can use the "li" as the wrapper and the "a" as the block. Set the li to "display: inline;" and ".nav ul li a" to "display: block;". The background image will have to be on the link as well for this to work properly (so ".nav ul li a { background-image: url(‘yourimg.jpg’); }). If you want an example of this in action you can look at the source of the CSS-Tricks main navigation bar.

    Edit: Also remember to set the height of .nav ul li a to 50px!

    # December 23, 2009 at 4:30 am
    "nosecreek" wrote:
    Okay, the issue is this: In order to go to the proper height the display needs to be set to block. The problem is that by doing this it is just creating another problem. Since block elements have line breaks before and after them they will each go on a new line. The solution is to wrap each block-level element in an inline element. Right now your code is like this:

    You can use the "li" as the wrapper and the "a" as the block. Set the li to "display: inline;" and ".nav ul li a" to "display: block;". The background image will have to be on the link as well for this to work properly (so ".nav ul li a { background-image: url(‘yourimg.jpg’); }). If you want an example of this in action you can look at the source of the CSS-Tricks main navigation bar.

    Edit: Also remember to set the height of .nav ul li a to 50px!

    I have already tried the suggested step. It is still not working.
    Here you have suggested me to use "li" as the wrapper, and "a" as block. I have already done that. I have already set li to display: inline, and .nav ul li a to display: block. But still this does not work. Please check the php and css code that I have sent with the first post. Following is the css part for the header:

    Following is the CSS part for the Header:

    #header{width:100%; margin:1.5% auto;}
    .title{float:left;}
    .nav ul{float:right; padding:3px 0; margin-left:0; font-family:"Times New Roman"; font-size:14px; font-weight:bold;}
    .nav ul li{list-style:none; margin:0; display:inline; padding:0;}
    .nav ul li a{text-decoration:none; border:1px solid #CCCCCC; padding:14px; background-image:url(images/bak.jpg); background-repeat:repeat-x; color:#000066;}
    .nav ul li a:link{color:#000066;}
    .nav ul li a:visited{color:#000066;}
    .nav ul li a:link:hover, .nav ul li a:visited:hover{background-image:url(images/hov.jpg); color:#00FFFF;}
    body.home a.home, body.aboutus a.aboutus, body.contactus a.contactus, body.blog a.blog{background-image:url(images/active.jpg); color:#000066;}
    .sign{float:left; margin-left:5%; margin-top:1%; width:15%;}
    .divider1{clear:both; /*background-image:url(images/divider.png); background-repeat:repeat-x; */width:100%; margin:0 auto;}
    .welcome{clear:both; float:right; margin-bottom:0%; margin-top:0%; margin-right:0%; width:30%;}

    Nothing seems to work. Please help.

    # December 23, 2009 at 12:11 pm

    Aaaahhhh, I see it now.

    You should be floating your <li>’s to the left as well as the block display on the <a>. Here’s an example of a menu that I just recently did:

    Code:
    #main-navigation {
    position:absolute;
    top: 60px; right: 226px;
    }

    #main-navigation li {
    float:left;
    list-style:none;
    margin-right: 15px;
    }

    #main-navigation li a {
    display:block;
    height:25px;
    text-indent: -99999px;
    }

    #main-navigation li ul li a {
    text-indent: 0;
    }

    #main-navigation li a.about {
    background: url(../images/main-nav-about.png) no-repeat;
    width:70px;
    }

    #main-navigation li a.products {
    background: url(../images/main-nav-products.png) no-repeat;
    width:71px;
    }

    #main-navigation li a.services {
    background: url(../images/main-nav-services.png) no-repeat;
    width:62px;
    }

    #main-navigation li a.gallery {
    background: url(../images/main-nav-gallery.png) no-repeat;
    width:58px;
    }

    #main-navigation li a.booking {
    background: url(../images/main-nav-booking.png) no-repeat;
    width:115px;
    }

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".