Display issue

Hi,
I'm an animator and UI designer, but I think I'm fairly competent with web building. I'm running into a problem with my css and how it displays. I think it has to do with my structure and not my coding. In IE it displays pretty much correct and in FF it displays a 20px padding/margin at the top. It also wraps the H2 in the Work Sample area. Any help is much appricieated!

Here is my CSS(which does validate):


@charset "utf-8";
/* CSS Document */
body {
margin: 0px;
padding: 0px;
background-image: url(../_images/stripeBG.jpg);
}
#banner {
margin:0px;
padding:0px;
height: 210px;
width: auto;
background-image: url(../_images/bannerBG.jpg);
background-repeat: no-repeat;
position: relative;
}
#wrapper {
margin: 0px auto;
padding: 0px;
height: 600px;
width: 800px;
}
#logo {
display: block;
border: none;
width: 300px;
height: 230px;
margin: 10px 0;
padding: 0px;
float: right;
}
#logo .img {
border: none;
}
#about-me{
width: 450px;
float: left;
margin: 50px 0 0 0;
padding: 0px;
text-align: justify;
}
#contact-me{
display: block;
width: 495px;
float: left;
margin: 15px 0px;
padding: 0px;
}
h1{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
margin: 0px;
}
h2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: 100;
color: #FFFFFF;
text-align: left;
}
p{
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
margin: 0px;
}
#lower-body{
width:800px;
margin:0px;
}
workSamples{
}

My HTML:


<!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>My Site</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="_css/main.css" />
</head>
<body>
<div id="banner">
<div id="wrapper">
<!--- Start of the header with static content ---> 
 <div id="logo">
 <a href="/"><img src="_images/Logo.png" alt="TheJonesBox" class="img" /></a> </div>
<div id="about-me">
 <h1>About Me</h1>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus in quam ut lacus facilisis iaculis. Aliquam erat volutpat. Integer porttitor pede id lectus. Quisque tristique mattis quam. Quisque tincidunt scelerisque tortor. Nam dui mi, varius eu, imperdiet vitae, tempor non, lacus. Duis congue ligula posuere elit. Aenean non nulla ac enim dapibus auctor.</p>
 </div>
 <div id="contact-me">
 <h1>Contact Me</h1>
 <p><a href="mailto:myMail@example.com?subject=from%20your%20site">myMail@example.com</a> � 555.555.5555 � 0000 Address RD #000, My City, FL 11111</p>
</div>
<!--- End of the header with static content --->
<!--- Start of the lower-body with dynamic content ---> 
 <div id="lower-body">
<div id="workSamples">
 <h2>Work Samples</h2>
 </div>
 <div id="right">
 <div id="blog-recent"></div>
 <div id="flickr-thumbnail"></div>
</div>
 </div>
<!--- End of the lower-body with dynamic content --->
<!--- Start of the footer ---> 
 <div id="footer"></div>
<!--- End of the footer ---> 
</div>
</div>
</body>
</html>

Thanks for reading.

[edited by: TheJones at 4:08 pm (utc) on Dec. 22, 2008]

[edited by: swa66 at 5:40 pm (utc) on Dec. 22, 2008]
[edit reason] example.com is one of the few domains that cannot be owned [/edit]

Display issue

css

TheJones

TheJones

eelixduppy

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week