Forums

Give help. Get help.

  • # 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">

    ADP Computer “Your Source for Solutions”


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag