2 replies [Last post]
dans107
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2007-03-10
Posts: 2
Points: 0

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

Image info 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

Image infoMorbi 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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Take this

Take this out:

.container{ width: 99%; float: right; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dans107
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2007-03-10
Posts: 2
Points: 0

It worked! Much

It worked! Much appreciated.

Dan