Forum Moderators: not2easy
First post here so please be gentle with me
I have created a web site using css, the problem i have is that it works fine in the latest version of ie but in IE 6 or older the text i put in my sidebar (div id sidebar) instead of being on the right side of the page next to the main body of text is displayed on the right but underneath the stuff on the left
Can anyone tell me why, i have run my code through a css checker that says its fine as does the w3c validator
thanks for looking
gibbo
//CSS
body {
margin: 0;
background: #355379 url(images/img01.jpg) no-repeat center top;
color: #000000;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 13px;
}
h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
font-weight: normal;
color: #003399;
}
h4 {
margin: 0px 0px 0px 0px;
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: normal;
font-style: italic;
color: #003399;
direction: rtl
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
a {
text-decoration: none;
border-bottom: 1px dotted #999999;
color: #000000;
}
a:hover {
background: none;
}
#wrapper2 {
margin: 0px;
padding-top: 30px;
}
/* Header */
#header {
width: 910px;
height: 100px;
margin: 0 auto;
padding-top: 10px;
}
.topimg img {
border-style: none;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* Logo */
#logo {
width: 700px;
height: 220px;
margin: 0px 48px;
}
#logo h1 {
padding:20px 0px 0px 90px;
text-transform: lowercase;
letter-spacing: -2px;
font-size: 4em;
}
#logo h1 span {
font-size: .7em;
font-weight: normal;
}
#logo h2 {
margin-top: -0.5em;
padding: 0 0 0 0px;
text-transform: uppercase;
letter-spacing: .2em;
font-size: .8em;
font-weight: bold;
}
#logo a {
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 725px;
height: 50px;
margin: -40px auto 0 10px;
background: url(images/img02.jpg) no-repeat;
}
#menu ul {
float: left;
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
color: #000000;
display: block;
float: left;
padding: 17px 20px 0 20px;
text-decoration: none;
text-transform: lowercase;
font-size: .8em;
font-weight: bold;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active a {
text-transform: uppercase;
}
/* Page */
#page {
width: 725px;
height: 725px;
margin: 0 auto;
padding: 0;
border: 15px #EEEEEE solid;
background: #EEEEEE ;
}
/* Content */
#content {
float: left;
width: 400px;
padding: 10px 0 0 0px;
}
.post .title {
color: #003399;
}
.post .title a {
background: none;
color: #003399;
border: none;
}
.post .title a:hover {
text-decoration: underline;
}
.post .meta {
padding-bottom: 10px;
background: url(images/img04.gif) repeat-x left bottom;
text-transform: uppercase;
text-align: left;
font-family: Arial, sans-serif;
font-size: 9px;
}
.post .entry {
padding: 10px 0 20px 0;
text-align: justify;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
padding: 40px 20px 0 0;
color: #333333;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li p {
padding-left: 15px;
}
#sidebar li ul {
padding-bottom: 30px;
}
#sidebar li li {
margin-left: 15px;
padding-left: 10px;
line-height: 25px;
border-bottom: 1px;
background: url(images/img06.gif) no-repeat left 50%;
}
#sidebar h2 {
letter-spacing: -.5px;
padding-bottom: 10px;
color: #003399;
background: url(images/img04.gif) repeat-x left bottom;
}
#sidebar p {
padding-bottom: 20px;
text-align: justify;
}
#sidebar a {
color: #000000;
border: none;
}
#sidebar a:hover {
text-decoration: underline;
color: #000000;
}
/* Footer */
#footer {
width: 725px;
height: 0px;
margin: 0 auto;
padding: 40px 0;
font-family: Arial, sans-serif;
color: #B2B2B2;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
}
#footer a {
color: #999999;
}
blockquote p
{
float: left;
background: url(./images/quote_down.png) bottom right no-repeat;
}
blockquote
{
padding: 0 0 0 20px;
background: url(./images/quote_up.png)
top left no-repeat;
}
cite
{
font-size: 1.2em;
float: right;
padding: 10px 10px 10px 30px;
}
//html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test PAge</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
<div id="logo">
<h1><a href="#"><span>Test</span>Page</a></h1>
<h2><a href="#">leading by example</a></h2>
</div>
</div>
<div id="search">
</div>
<!-- end #search -->
</div>
<!-- end #header -->
<div id="wrapper2">
<div id="page">
<div id="content">
<div id="menu">
<ul>
<li><a href="http://www.gibbos.net">Home</a></li>
<li><a href="./index2.html">Blog</a></li>
<li><a href="./forum">Forum</a></li>
</ul>
</div>
<!-- end #menu -->
<div class="topimg"><img src="images/banner2.jpg" alt="" width="725" height="90"/></div>
<br>
<!-- left main -->
<div class="post">
<h1 class="title"><a href="#">Welcome! </a></h1>
<p class="meta">Posted by <a href="#">Gibbo</a> on January 17th 2009 •
<a href="#" class="comments"></a> • <a href="#" class="permalink"></a></p>
<div class="entry">
<p>Hi all, and welcome to my site</p>
<p>I intend to develop this site into something that will be of use to anybody involved in leadership<p>
</div>
</div>
<!--a post-->
<div class="post">
<h2 class="title"><a href="#">What is leadership</a></h2>
<p class="meta">Posted by <a href="#">Gibbo</a> on January 17th 2009 •
<a href="#" class="comments"></a> • <a href="#" class="permalink"></a></p>
<div class="entry">
<p>
So what is leadership? There are a number of definitions on the web, you only need to do a
<a
href="http://www.google.co.uk/search?hl=en&lr=&rlz=1G1GGLQ_ENUK311&defl=en&q=define:leadership&sa=X&oi=glossary_defi
nition&ct=title"> dictionary search on google</a> to see that.</p>
</div>
</div>
<!-- end post -->
</div>
<!-- end left main -->
<div id="sidebar">
<ul>
<h4>Never look down on anybody, unless you're helping them up</h4>
<cite>Jesse Jackson</cite>
<br>
<li>
</li>
<li>
<h2>Useful Reading</h2>
<ul>
<li>Coming soon...</li>
<li>A list of useful books to read</li>
</ul>
</li>
<li>
<h2>Useful Links</h2>
<ul>
<li>Coming soon...</li>
<li>A list of useful links</li>
</ul>
</li>
<li>
<h2>How Do I?</h2>
<ul>
<li><a href="#"></a> coming soon...</li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<p><a href="">contact
us</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
Your problem is you've specified that your #content div is 400 width but you then add #menu inside it which is 725px and you also add a 725px img. For IE6 this has pushed the content far outside of the 400 width which is why your other content drops down.
You can test the fix by adding display:none to #menu and adding
.topimg {display:none;}
By doing this you remove the problem in IE6
You will need to add these two styles outside of the content div.
I still have one other problem that i havnt spotted yet and that is in ie6 the actual position of the main body of the page is lower down than in ie7, if someone can help me with that one im just about there, funny what you miss when you ve been looking at it half the day!
thanks
Gibbo
I ve resolved the first issue by moving my image and menu above the content div so it is now on the page div which is 725 wide (SO thanks for the help as that was the main issue for me) and I reduced my menu to 350 and my image to 350, this solved the original problem but i still find the page is lower down on ie 6. its not a masive issue, just does look quite right and i d like to understand what i ve got wrong
thanks
gibbo
Thanks again for helping me out, still learning and this has helped a fair bit
Gibbo
