Grow your CSS skills. Land your dream job.

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.

    //html

    <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">
    <ul>
    <li><a href="http://www.w3.org">First Link</a></li>
    <li><a href="http://www.w3.org">Second Link</a></li>
    <li><a href="http://www.w3.org">Thirth Link</a></li>
    <li><a href="http://www.w3.org">Fourth Link</a></li>
    <li><a href="http://www.w3.org">Fifth Link</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>

    //css

    .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;
    min-height:650px;
    height:auto !important;
    height:650px;
    /* 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;
    list-style-type:none;
    width:100%;
    position:relative;
    height:27px;
    font-family:"Trebuchet MS",Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    margin:0;
    padding-left:123px;
    }

    .menubox li{
    float: left;
    height:27px;
    }

    .menubox li a{
    display:block;
    float:left;
    color:#fff;
    background:#D89030;
    line-height:27px;
    text-decoration:none;
    padding:0 17px 0 18px;
    height:27px;
    width:86px;
    text-align: center;
    margin-right: 10px;
    }

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

    }

    # December 9, 2008 at 11:43 pm

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

    Rob
    # December 10, 2008 at 5:11 am

    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.

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