jschnyderite
20 Jan 2010, 10:52 AM
having trouble getting this to line up with my background on both browsers. Seems to happen after the mainnav div..anyone have a suggestion?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hillsborough, New Jersey - East Coast Media & Printing</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="features.js"></script>
</head>
<body>
<div id="container">
<a href="index.htm"><img src="images/logo.jpg" id="logo" /></a>
<div id="topnav">
<a href="">Home</a>
<a href="">Contact</a>
<a href="">Directions</a>
<a href="">Sitemap</a>
</div>
<div id="header"></div>
<div id="mainnav">
<ul id="nav">
<li><a href="">Print & Bindery</a>
<ul>
<li><a href="">Commercial Printing</a></li>
<li><a href="">Short Run Color</a></li>
<li><a href="">Quick Printing</a></li>
</ul>
</li>
<li><a href="">Posters & Signs</a>
<ul>
<li><a href="">Large Format Output</a></li>
<li><a href="">Lamination</a></li>
<li><a href="">Displays</a></li>
</ul>
</li>
<li><a href="">Mailing & Fulfillment</a>
<ul>
<li><a href="">Barcoding</a></li>
<li><a href="">Booklets</a></li>
</ul>
</li>
<li><a href="">Web & Graphic Design</a>
<ul>
<li><a href="">Logo Creation</a></li>
<li><a href="">Flash Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Domain & Hosting Services</a></li>
</ul>
</li>
<li><a href="">Promotional & Apparel</a>
<ul>
<li><a href="">Gifts/Giveaways</a></li>
<li><a href="">Flash Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Domain & Hosting Services</a></li>
</ul></li>
</ul>
</div>
<div id="contenthome">
<div id="contenttext">
<h1>Your Full-Service Solution.</h1>
At East Coast Media, our 21,000 square foot facility
houses a fleet of 3 and 4 color presses, large format
printers, and color copiers. Our in-house mailing
department is equipped to handle delivery of your
printed pieces.
<p>
We staff a team of designers in-house who believe in the
philosophy - <em>One Design, Many Applications</em>. We can
take design elements from your printed material or website
to create a corporate identity across all of your media and
advertisements - all under one roof!</p>
<p>
Please browse our site to see all that East Coast Media &
Printing has to offer and feel free to call us with any
questions.
</p>
</div>
</div>
<div id="features">
<script type="text/javascript">
randomorder(feature, '')
</script>
</div>
</body>
</html>
@charset "utf-8";
body{
background:url(images/bg.jpg);
background-repeat:repeat-x;
font-family:palatino, georgia, courier new, serif;
font-size:12px;
line-height:18px;
margin:0;
padding:0;
height:100%;
}
#container{
width:999px;
position:relative;
margin:0 auto 0 auto;
min-height:1050px;
padding:0;
}
#logo{
position:absolute;
top:0px;
left:-9px;
border:0;
}
#topnav{
padding:32px 0 0 0;
text-align:right;
}
#topnav a{
font-size:11px;
text-decoration:none;
padding-right:8px;
color:#333;
}
#header{
height:162px;
}
#mainnav{
height:26px;
padding-left:8px;
}
#mainnav a{
font-size:13px;
text-decoration:none;
padding-right:15px;
color:#FFF;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#contenthome {
clear: left;
height:401px;
padding-left:10px;
background:url(images/content/home.jpg);
background-repeat:no-repeat;
}
#contenttext{
width:400px;
height:380px;
padding:19px 0 4px 5px;
}
#features{
margin:0;
padding:0;
}
img.boxart{
margin:0;
padding:0;
border: none;
float:left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hillsborough, New Jersey - East Coast Media & Printing</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="features.js"></script>
</head>
<body>
<div id="container">
<a href="index.htm"><img src="images/logo.jpg" id="logo" /></a>
<div id="topnav">
<a href="">Home</a>
<a href="">Contact</a>
<a href="">Directions</a>
<a href="">Sitemap</a>
</div>
<div id="header"></div>
<div id="mainnav">
<ul id="nav">
<li><a href="">Print & Bindery</a>
<ul>
<li><a href="">Commercial Printing</a></li>
<li><a href="">Short Run Color</a></li>
<li><a href="">Quick Printing</a></li>
</ul>
</li>
<li><a href="">Posters & Signs</a>
<ul>
<li><a href="">Large Format Output</a></li>
<li><a href="">Lamination</a></li>
<li><a href="">Displays</a></li>
</ul>
</li>
<li><a href="">Mailing & Fulfillment</a>
<ul>
<li><a href="">Barcoding</a></li>
<li><a href="">Booklets</a></li>
</ul>
</li>
<li><a href="">Web & Graphic Design</a>
<ul>
<li><a href="">Logo Creation</a></li>
<li><a href="">Flash Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Domain & Hosting Services</a></li>
</ul>
</li>
<li><a href="">Promotional & Apparel</a>
<ul>
<li><a href="">Gifts/Giveaways</a></li>
<li><a href="">Flash Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Domain & Hosting Services</a></li>
</ul></li>
</ul>
</div>
<div id="contenthome">
<div id="contenttext">
<h1>Your Full-Service Solution.</h1>
At East Coast Media, our 21,000 square foot facility
houses a fleet of 3 and 4 color presses, large format
printers, and color copiers. Our in-house mailing
department is equipped to handle delivery of your
printed pieces.
<p>
We staff a team of designers in-house who believe in the
philosophy - <em>One Design, Many Applications</em>. We can
take design elements from your printed material or website
to create a corporate identity across all of your media and
advertisements - all under one roof!</p>
<p>
Please browse our site to see all that East Coast Media &
Printing has to offer and feel free to call us with any
questions.
</p>
</div>
</div>
<div id="features">
<script type="text/javascript">
randomorder(feature, '')
</script>
</div>
</body>
</html>
@charset "utf-8";
body{
background:url(images/bg.jpg);
background-repeat:repeat-x;
font-family:palatino, georgia, courier new, serif;
font-size:12px;
line-height:18px;
margin:0;
padding:0;
height:100%;
}
#container{
width:999px;
position:relative;
margin:0 auto 0 auto;
min-height:1050px;
padding:0;
}
#logo{
position:absolute;
top:0px;
left:-9px;
border:0;
}
#topnav{
padding:32px 0 0 0;
text-align:right;
}
#topnav a{
font-size:11px;
text-decoration:none;
padding-right:8px;
color:#333;
}
#header{
height:162px;
}
#mainnav{
height:26px;
padding-left:8px;
}
#mainnav a{
font-size:13px;
text-decoration:none;
padding-right:15px;
color:#FFF;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#contenthome {
clear: left;
height:401px;
padding-left:10px;
background:url(images/content/home.jpg);
background-repeat:no-repeat;
}
#contenttext{
width:400px;
height:380px;
padding:19px 0 4px 5px;
}
#features{
margin:0;
padding:0;
}
img.boxart{
margin:0;
padding:0;
border: none;
float:left;
}