Site displays as I intended in safari and Firefox but not IE

[krayed]

Here is my html code:

Code:

Welcome!!!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod magna ut tortor. Sed blandit. Nam mollis ullamcorper purus. Pellentesque sit amet felis eget nisi congue interdum. Fusce sagittis, turpis sit amet auctor vulputate, nisi purus iaculis ante, id egestas augue tellus at sapien. Suspendisse fermentum justo quis ante. Phasellus nibh. Nulla mollis. Cras aliquet aliquam neque. Fusce vitae velit. Vivamus eu tortor. Vivamus arcu urna, luctus sit amet, pharetra nec, consectetur vel, purus. Duis in dolor. Cras risus lacus, blandit vitae, accumsan nec, posuere non, nisl.

Duis consequat odio eu est. Nunc bibendum ultrices nulla. Vivamus augue. Vivamus ultricies sollicitudin dui. Praesent ultrices ligula eu arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras in lorem. Vivamus aliquet. Vestibulum iaculis auctor enim. Nam sodales, nulla in semper congue, tortor ante semper nunc, ut posuere ligula diam vitae dolor. Vivamus in elit non nisl mollis laoreet. Sed nisi est, convallis id, imperdiet sed, feugiat a, ligula. Vivamus suscipit mauris a tortor. Donec diam enim, vulputate ut, cursus eu, rhoncus non, quam.

Proin mi. Curabitur interdum, urna ac porta gravida, erat nulla venenatis dui, id ullamcorper ante lectus eu justo. Vivamus semper venenatis risus. Integer orci. Fusce ac lacus in mauris ornare pretium. Sed metus turpis, viverra ut, dictum et, imperdiet tempus, pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque purus nulla, mollis sit amet, eleifend pulvinar, rhoncus eu, urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ut tellus quis mauris suscipit porttitor.

• Home
• About
• Contact
• Services

Here is my css style sheet:

Code:

/* Resets & Basic Page Setup*/
*{margin: 0; padding:0;}
html { overflow:scroll;}
body {
font:62.5% Lucidia Grande, sans-serif;
background:#000000;
}

ul {list-style:none inside; }
p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a img {border:none; }

h1 {
font-family: Georgia, serif;
font-size: 2.4em;
font-weight:normal;
}
/* End Reset */

/* ToolBox */
.floatleft {float: left; }
.floatright {float: right;}
/* End ToolBox */

/*Structure And Stuff */
#border-hl-wrap {
width: 652px;
border: 2px solid #adb397;
height: 478px;
}

#border-wrap {
width: 656px;
border: 33px solid #585c4e;
margin-top: 100px;
margin-right: auto;
margin-bottom: auto;
margin-left: 75px;
height: 482px;
}

ul#nav{
}
ul#nav li {
display: inline;
}
ul#nav li a{
display: block;
width: 165px;
text-indent: -9999px;
}
ul#nav li.home a {
height:78px;
background: url(images/nav-home.jpg) top center no-repeat;
}
ul#nav li.about a {
height:45px;
background: url(images/nav-about.jpg) top center no-repeat;
}
ul#nav li.contact a {
height:44px;
background: url(images/nav-contact.jpg) top center no-repeat;
}
ul#nav li.services a {
height:45px;
background: url(images/nav-services.jpg) top center no-repeat;
}
ul#nav li a:hover {
background-position: bottom center;
}

#main-content {
padding-top: 30px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 40px;
}
#main {
background-color:#FFFFFF;
overflow: scroll;
width: 485px;
height: 346px;
float: right;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #adb397;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #828A66;
}

#nav-container {
width:165px;
height: 348px;
float: left;
background-image: url(images/spacer.jpg);
background-repeat: repeat-y;
}

#footer {
}
/* End Structure */

The problem I am having in IE is the div containing the nav buttons and the div containing the content overlap the bottom border by a few pixels. I am obviously not a professional web designer nor claim to be. Just trying to put a simple layout together for a friend. I don’t have this uploaded to a server yet but I need to do that I can work that out. Thanks for any help in advance.

Also css-tricks ROCKS!

[Author]

Posts