Grow your CSS skills. Land your dream job.

Positioning in IE and FireFox

  • # September 16, 2008 at 7:36 pm

    Hey guys;

    I’m having problems with positioning of the elements. It looks good in IE but, the positioning in firefox is wrong.
    As you can see below there gap between the divs, I can fix one browser then the other browser has the same
    problem.

    Sorry the site is not live yet, so attach the code in image so you can see.

    Thanks

    here is my CSS Code:

    Code:
    body{
    background-color: #000;
    }

    #driver{
    color: white;
    position:relative;
    left:125px;
    top: 55px;

    }

    #store{
    color: white;
    position:relative;
    left:450px;
    top: 10px;
    }

    #data{
    color: white;
    position:relative;
    left:690px;
    top: -35px;
    }

    #header{
    background-image:url(images/header.png);
    width: 840px;
    height: 300px;
    position: relative;
    top: 0px;
    clear:both;
    }

    #page-wrap1{
    width: 840px;
    margin: 0 auto;
    }

    #subnav{
    background-image:url(images/subnav.png);
    width: 840px;
    height: 150px;
    position: relative;
    top: 0px;
    }

    /* Reset*/
    ul {list-style: none inside;}
    p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a { outline: none; color:#FB8000; text-decoration: none }
    a:hover{ color: white;}
    a img { border: none; }
    .clear{ clear:both;}
    /* END RESET */

    #nav{
    height: 50px;

    }

    #nav ul{
    list-style: none;
    }

    #nav ul li {
    display: inline;
    }

    #nav ul li a {
    height: 50px;
    float: left;
    padding: 0px 0px 0px -50px;
    text-indent: -9999px;
    position:relative;
    left:-40px;
    }

    #nav ul li a.home{
    width: 120px;
    background: url(images/nav-home.png) center bottom no-repeat;
    float: left;
    }

    #nav ul li a.about {
    width: 120px;
    background: url(images/nav-about.png) center bottom no-repeat;
    }

    #nav ul li a.services {
    width: 120px;
    background: url(images/nav-services.png) center bottom no-repeat;
    }

    #nav ul li a.store {
    width: 120px;
    background: url(images/nav-store.png) center bottom no-repeat;
    }

    #nav ul li a.download {
    width: 120px;
    background: url(images/nav-download.png) center bottom no-repeat;
    }

    #nav ul li a.testimonials {
    width: 120px;
    background: url(images/nav-testimonials.png) center bottom no-repeat;
    }

    #nav ul li a.contact {
    width: 120px;
    background: url(images/nav-contact.png) center bottom no-repeat;
    position: relative;
    left: 680px;
    top: -50px;
    }

    #nav ul li a:hover {
    background-position: center center;
    }

    body#home #nav ul li a.home,
    body#about #nav ul li a.about,
    body#services #nav ul li a.services,
    body#store #nav ul li a.store
    body#download #nav ul li a.download
    body#testimonials #nav ul li a.testimonials
    body#contact #nav ul li a.contact{
    background-position: center top;
    }

    Here is my HTML Code

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    # September 16, 2008 at 8:27 pm

    is there a reason that you have used position:relative so many times? i would think that has something to do with it. I don’t see any margins or padding. What I like to do when i get this problem is remove the image and use a background color. That will show you where the leak is. or what element is leaking.

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

You must be logged in to reply to this topic.

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