Sat, 2007-03-10 19:49
Hi,
Apologies if this is asked regularly. I've had a look about, and couldn't see anything, so would appreciate your help.
I'm new to CSS, and have been going through a few different tutorials, and have come to a bit of a brick wall.
In Firefox, it all looks fine. In Internet Explorer 7 however, the content goes under the left navigation.
This is the HTML:
Untitled Document
An h1 header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas aliquet. Ut mattis auctor tellus. Aliquam justo mauris, dignissim eget, vehicula a, fermentum ut, turpis. Morbi a ligula ultricies nulla ultricies accumsan. Morbi sollicitudin mauris blandit augue. Vestibulum id mauris.
An h2 header
Morbi a ante. Donec hendrerit justo sollicitudin lorem. Proin id quam sit amet sem feugiat accumsan. Morbi vel massa. Praesent cursus porttitor ligula. Pellentesque vitae nunc ac nunc tempus consectetuer. Vivamus accumsan.
And this is the CSS:
/* CSS Document */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
body{
font-family: Arial, Helvetica, sans-serif;
color: #666666;
background-color: #666666;
text-align: center;
}
#wrapper {
background-color: #FFFFFF;
margin: 10px auto;
width: 770px;
border: 1px solid #000000;
text-align: left;
}
#banner {
height: 110px;
background-image: url(../StopGo%20logo%20DIFFERENT%20SIZE.jpg);
background-repeat: no-repeat;
}
#leftcol #nav {
border-bottom: 1px solid #000000;
}
#leftcol #nav ul{
padding: 0;
margin: 0;
background-color:#transparent;
list-style-type: none;
border: 1px solid #000000;
}
#leftcol #nav ul li{
display: inline;
padding: 0;
margin: 0;
}
#leftcol #nav ul li a{
font-size: 80%;
color: #000000;
background-color: #869BCC;
text-decoration: none;
padding: 4px 0 6px 4px;
border-bottom: 1px solid #000000;
display: block;
height: 1%;
}
#leftcol #nav ul li a:hover, #leftcol #nav ul li a:focus {
background-color: #003366;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
}
#content{
margin-left: 200px;
}
#content p{
margin: 20px;
}
#content h1{
color: #003366;
padding: 0;
margin: 20px;
}
#content h2{
color: #003366;
padding: 0;
margin: 20px;
}
.leftimage{
float: left;
margin: 0 10px 20px 0;
border: 1px solid #000000;
}
.rightimage{
float: right;
margin: 0 0 20px 15px;
border: 1px solid #000000;
width: 150px;
}
.clearit {
clear: both;
display: block;
}
#footer{
clear: both;
border-top: 1px solid #000000;
background-color: #003366;
color: #FFFFFF;
}
#footer p{
clear: both;
margin:0;
font-size: 70%;
padding: 3px;
}
#leftcol{
margin-left: 10px;
margin-top: 20px;
float: left;
width: 170px;
}
#leftcol p{
margin: 10px;
}
#leftcol h1{
color: #003366;
padding: 0;
margin: 20px;
}
.container{
width: 99%;
float: right;
}
It's probably a really stupid mistake, so I apologise!
If there's anything I can do to explain this further, please just let me know.
Many thanks for your help,
Dan
