The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Internet Explorer spacing problem(SOLVED)

  • # December 9, 2008 at 10:27 pm

    Hey Everyone, I cant figure this out for the life of me. I have a nav bar under a image, and there is a gap beneath the image but only in IE. I have did some research and found that if you change your image to display: block; that should do the trick. This has not worked for me. I have a reset at the start of my css, and have all of the elements margins zeroed out. I am out of ideas, can someone please help. Thnax.


    <div class="headercontain">
    <div class="headercontainer">
    <div class="headerbox">
    <div class="content_12"><div class="contentbox">
    <img src="/images/headerpic.png" alt="Welcome to The Truth Fightwear" width="940"height="321"></img></div></div>
    <div class="clearfix"></div>
    <div class="content_12"><div class="menubox">
    <li><a href="">First Link</a></li>
    <li><a href="">Second Link</a></li>
    <li><a href="">Thirth Link</a></li>
    <li><a href="">Fourth Link</a></li>
    <li><a href="">Fifth Link</a></li>


    .headercontainer {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    .headercontain {
    width: 100%;
    background-image: url(../images/headrpt.png);
    background-repeat: repeat-x;
    margin: 0;

    .headerbox {
    margin-left: auto;
    margin-right: auto;
    height:auto !important;
    /* background-image: url(../images/footrck.png);*/
    background-repeat: no-repeat;
    margin-bottom: 0;
    .container .content_12 {
    width: 940px;
    .menubox {
    display: block;
    list-style: none;
    margin: 0px;
    padding: 0px;
    .menubox ul{
    background-color: #601818;
    font-family:"Trebuchet MS",Arial,sans-serif;

    .menubox li{
    float: left;

    .menubox li a{
    padding:0 17px 0 18px;
    text-align: center;
    margin-right: 10px;

    .menubox li a:hover{
    background-image: url(../images/footrpt.png);
    background-repeat: no-repeat;


    # December 9, 2008 at 11:43 pm

    This reply has been reported for inappropriate content.

    you need to post a link to your site. it would be much easier to find your problem if we can see it.

    # December 10, 2008 at 5:11 am

    This reply has been reported for inappropriate content.

    yea I would agree with Cyber, I have recreated the code but I cant see any gap between the image and the menu bar.

    I would say try to use a lot less divs, there isnt a need for that many, and they can lead to their own formatting issues :)

    # December 10, 2008 at 10:39 am

    Hey guys, thanks for the replies. It seems like every time I post a problem on a forum I end up fixing it by just messing around with it. Thanks for the tip on making the sites live, I am now in the process of setting up a second domain for testing purposes. Thanks again.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed