Positioning in IE and FireFox

[Luis]

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:

• Home
• About Us
• Service
• E-Store
• Download
• Testimonials
• Contact

Software & Drivers

E-Store

Data Backup

[Author]

Posts