Forums

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:



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


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html lang=\"en-US\" xml:lang=\"en-US\" xmlns=\"http://www.w3.org/1999/xhtml\">
<head>

<title>ADP Computer \"Your Source for Solutions\"</title>
 
<link rel=\"shortcut icon\" href=\"\" type=\"\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />

<meta name=\"Keywords\" content=\" \" />
<meta name=\"Description\" content=\"\" />

<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />  

</head>

	<body id=\"home\">
		
		<div id=\"page-wrap1\">
		
			<div id=\"nav\">
			
				<ul>
					<li><a class=\"home\" href=\"index.html\">Home</a></li>
					<li><a class=\"about\" href=\"about_us.html\">About Us</a></li>
					<li><a class=\"services\" href=\"services.html\">Service</a></li>
					<li><a class=\"store\" href=\"store.html\">E-Store</a></li>
					<li><a class=\"download\" href=\"download.html\">Download</a></li>
					<li><a class=\"testimonials\" href=\"testimonials.html\">Testimonials</a></li>
					<li><a class=\"contact\" href=\"contact.html\">Contact</a></li>					
				</ul>		
				
			</div>			
			
			<div id=\"header\"></div>			
				
				<div id=\"subnav\">
				
					<div id=\"driver\">
						
						<p><a HREF=\"download.html\">Software & Drivers</a><p/>
												
					</div>
					
					<div id=\"store\">
						
						<p><a HREF=\"store.html\"> E-Store </a><p/>
												
					</div>
				
					<div id=\"data\">
						
						<p><a HREF=\"store.html\">Data Backup</a><p/>
												
					</div>
									
				</div>
			
		</div>	
				
	</body>
	
</html>

cybershot

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.

treehouse : what would you like to learn today?

Forums

Positioning in IE and FireFox