Pulling My Hair Out CSS HELP! [Archive]

meupatdoes

10-08-2005, 07:20 AM

I had gotten some GREAT advice from this board previously and now I need your help again desperately.

So, I am working on a new layout and everything looks great in Mozilla but in IE it's all screwy. Here's the link: http://www.rhapsodyinlyss.com/1111.html

In IE, the blog scrolls left and right, I want that gone.
Also in IE, there is a white space above the blog. That must be destroyed as well.

I want the site to look how it looks in Mozilla.

This is the current HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
p {
padding:10px;
margin:0;
}
#container {
width:759px;
margin:auto;
}
#navcontainer {
font-size:10px;
line-height:21px;
height:177px;
background-image:url(header2.jpg);
border-bottom:1px solid #000;
}
#navcontainer ul {
margin:0;
padding:152px 0 0 2px;
list-style:none;
}
#navcontainer ul li {
float:left;
filter:alpha(opacity:70;);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
-khtml-opacity:0.70;
text-align:center;
}
#navcontainer ul li a, #navcontainer ul li a:link {
text-decoration:none;
padding:0.2em 1em;
color:#000000;
background-color:#ADA48F;
display:block;
width:131px;
}

#navcontainer ul li a:hover {
color:#000000;
background-color:#F0E0D0;
}
#other {
width:175px;
float:left;
}
#blog {
margin-left:175px;
border-left:1px solid #000;
border-right:1px solid #000;}

#footer {
clear:both;
background-color:#036;
padding:5px;
text-align:center;
color:#FFF;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div id="navcontainer">
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Visitor</a></li>
<li><a href="#">Domain</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
<div id="other"></div>

<div id="blog">
<IFRAME name="BLOG" src="http://www.rhapsodyinlyss.com/blog/index.html" width=582 height=420 frameborder=0 scrolling=auto ></IFRAME>
</div>

<div id="footer">
© Copyright 2005
</div>

</div>
</body>
</html>

Please, web geniuses, help me one more time!

EDIT: I don't know HOW those smilies got into the code! I hope you can understand it.

Reinspire

10-08-2005, 02:58 PM

This probably wont change anything right away, but we'll try and do this step by step.

First, give your container a margin of 0 auto;, this will ensure the top and bottom margins are zero.#container {
margin: 0 auto;
}Secondly, try giving your iframe an id of blog (in addition to the NAME of blog).<iframe name="blog" id="blog" ... ></iframe>Also, I'd suggest making sure that your CSS and your HTML use matching case. Right now in your CSS, you have #blog, but your iframe is named BLOG. It might not cause problems all the time, but it's a good practice to get into.

And finally, try giving your iframe margin and padding values.#blog {
margin: 0;
padding: 0;
}Not sure if any of that will solve the problem right away, but see if it makes any difference.