CSS problem?

Hey guys, working on a site here..

http://bellsouthpwp.net/b/u/budjordan/bamboohouse/index.html

Can anyone tell me why there's a white rectangle above the picture (banner.gif)? It doesn't show this rectangle in IE, only in Firefox.

The CSS is located at bamboohouse/style.css

Thanks!!

 

Oh, also... How do I make it so that the line under each paragraph in my CSS doesn't extend farther on the right than it does on the left?

To get an idea of what I mean, look under a paragraph. You'll notice that the text isn't centered above each line.

And lastly, why does the "dotted" border look dotted in Firefox but dashed in IE? Blasphemy!!!

 

try this:

body {
background-color: #FFFFFF;
font-family: trebuchet ms;
font-size: 0.8em;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
}

a {
background-color: #FFFFFF;
color: #ce3a2b;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#container {
background-color: #ffffff;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;

border-left: 1px solid #000000;
color: #000000;
margin: 0 auto;
position: relative;
text-align: left;
width: 750px;
}

#header {
background: url(banner.gif) no-repeat;
height: 150px;
text-align: center;
width: 100%;
border-top: 1px solid #000000;
}

#header h1 {
font-size: 2.2em;
position: relative;
left: 260px;
top: 10px;
}

#header a {
background-color: transparent;
color: #ffffff;
font-family: trebuchet ms;
text-decoration:none;
}

#header a:hover {
background-color: transparent;
color: #999999;
}

#sidebar {
float: left;
margin-top: 10px;
width: 100px;
}

#sidebar ul {
list-style: none;
margin-left: 15px;
padding-left: 0px;
}

#sidebar ul li {
display: block;
padding-bottom: 8px;
}

#sidebar a {
background-color: #ffffff;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
color: #666666;
display: block;
font-size: 0.9em;
font-weight: bold;
padding: 2px 8px;
text-decoration: none;
width: 100px;
}

#sidebar a:hover {
background-color: #002d47;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
color: white;
}

#content {
float: right;
padding-left: 10px;
padding-right: 10px;
margin-top: 8px;
width: 580px;
}

#footer {
background-color: #ffffff;
clear: right;
color: #000000;
font-size: 0.7em;
margin: 0 auto;
padding:20px 10px 4px 10px;
text-align: right;
width: 730px;
}

#footer a {
border-bottom: 1px dotted #666666;
}

#footer a:hover {
text-decoration: none;
}

p {
margin-top: 10px;
margin-right:20px;
border-bottom:1px dotted #999;
text-align:justify;
}

 

Great! Thanks a ton!