Welcome to WebmasterWorld Guest from 35.171.146.16

Forum Moderators: not2easy

Message Too Old, No Replies

Display issue

css

     
4:05 pm on Dec 22, 2008 (gmt 0)

New User

10+ Year Member

joined:Dec 22, 2008
posts: 6
votes: 0


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]

8:51 pm on Dec 22, 2008 (gmt 0)

New User

10+ Year Member

joined:Dec 22, 2008
posts:6
votes: 0


I figured it out. I just closed the banner div before starting the wrapper, and put a -210px margin for the top of the wrapper. All is well now. Thanks to anyone who might have been thinking about it for me.
7:15 pm on Dec 23, 2008 (gmt 0)

Senior Member

joined:Nov 12, 2005
posts:5967
votes: 0


Cool glad you got everything resolved. And welcome to WebmasterWorld! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members