Trouble With Columns (Tried following Screencasts #1,2,3)

[spyderf22]

Hey all, I tried following the first 3 screencasts, but with my own fake mockup to get a feel for doing it myself, but I’m having some problems with the code between Firefox 3 and IE6. I’m on a Mac, so testing cross-browser compatibility is a bit difficult. I’m using that ie4osx (http://www.kronenberg.org/ies4osx/) program.

At any rate, the columns appear to be fine in FireFox, but they looked jacked like no other in IE6.

Firefox 3.0
[img]http://img300.imageshack.us/img300/7868/firefoxli0.jpg[/img]

~~

Internet Explorer 6
[img]http://img261.imageshack.us/img261/3975/ie6pl5.jpg[/img]

~~

Here is my code.. I’ve commented out the navbar list items because they, too, are looking wonky in IE6 and their spacing is all sorts of discombobulated. This is my real first adventure into CSS layout coding.

HTML

Code:

Mission

---

Suspendisse pulvinar interdum metus. Nullam quis enim. Duis augue odio, elementum et, venenatis nec, pellentesque vitae, diam. Maecenas lobortis, mauris vitae sodales lacinia, augue nulla mollis massa, a tincidunt mi risus eu nibh. Nullam eros purus, eleifend vitae, faucibus eget, cursus sed, ipsum. Suspendisse consequat, orci ac convallis pretium, quam dui dignissim sapien, eget malesuada urna libero id massa. Vivamus ipsum arcu, pellentesque vitae, dignissim non, ornare in, orci. Ut tincidunt congue eros. Aliquam a nulla sed enim venenatis venenatis. Suspendisse erat risus, iaculis sed, dapibus ut, suscipit quis, urna.

Vivamus vitae metus sit amet neque auctor congue. Cras nibh mauris, feugiat sit amet, dignissim ac, lobortis pellentesque, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Fusce ac eros vel metus eleifend accumsan. Aliquam nec odio. Praesent lacinia mauris sit amet felis. Praesent varius blandit urna. Suspendisse libero. Nunc porttitor libero eu nisl. Vivamus posuere nisl a ante. Liquam id erat. Class aptent.

©2008 Ethiopian Education Endeavors, Inc.

~~

CSS Stylesheet

Code:

@charset “UTF-8”;
/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
background: url(images/body_bg.jpg) repeat-x top #fdf4d8;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 14px;
}

p {
text-indent: 2em;
line-height: 22px;
}

h1 {
font-size: 18px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}

hr {
margin-top: -4px;
margin-bottom: 14px;
}

div#page-wrap {
width: 738px;
margin: 0 auto;
background-color: #fffdf4;
}

.clear {
clear: both;
}

ul#nav {
height: 161px;
background: url(images/header_bg.jpg) no-repeat;
list-style: none;
padding-left: 20px;
}

ul#nav li a {
display: inline;
width: 105px;
margin-right: -10px;
margin-left: 20px;
padding: 0px;
float: left;
margin-top: 141px;
color: black;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: red;
}

ul#quicklinks li a {
font-size: 18px;
text-decoration: none;
padding-left: 40px;
}
ul#quicklinks li a:visited {
color: black;
}

div#footer {
background-color: #e5bf97;
color: white;
padding: 8px 0px 8px 0px;
text-align: center;
}

div#main {
padding-bottom: 50px;
}
div#main div#right-column {
float: right;
width: 420px;
padding: 20px;
}

div#main div#left-column {
float: left;
width: 200px;
}

img {
border-style: none;
}

~~

I tried having a friend help me with it, but it’s driving me crazy. I feel like it’s such an easy fix that takes just a few more snippets of code, but I’ve tried everything that someone with my skill level can do. Just FYI, the page wrap is 738px.

Please help :oops:

[Author]

Posts