CSS Layout Issues (IE vs Firefox)

I've been experimenting with css based layouts, rather than table based layouts lately. I found some templates online, and I have been pretty much copying them line for line, learning how to do certain things. So far, it's been successful, until now.

My issue is the how the layout appears in IE versus Firefox.

Here's the lowdown:



From the bat, you can see that in IE, the navigation menu does not fully extend to the edge of the gray border. Second, there is no padding in the white part (i.e. where Jepona Cula and Genia Huma are) Also, you'll notice that the white does not extend to the full width of the top blue border.

Here's the site:
http://www.trappedinside.net/templates/sphs2/

Here's the code:
http://www.trappedinside.net/templat...2/css/site.css

Here's the original site:
http://trappedinside.net/templates/mandarin/

Here's the original code:
http://trappedinside.net/templates/m.../gorotron1.css

Do keep in mind, I have changed certain things to help fit the theme of my site. Otherwise, the code is almost identical, line for line.

All, and any, help is appreciated!

Thank You
- Keith

Hi Keith:

The code looks really good. The one thing I noticed and I'm not sure if it's going to help in IE 7 or not is that you didn't state a width on the column_left div.

I'd add in

Code: Select all

width: 130px;

There are a couple of ways to fix your issue in IE7.

1)

Code: Select all

#column_left {
    float: left;
    width: 130px;
    margin-right: 20px;
}

#column_right {
    float: left;
    width: 510px;
    color: #666666;
    padding-left: 20px;
}

I've highlighted the changes in red. For some reason when you have two div's floating left, IE 7 prefers you add a margin-right to the first div.
The second way to fix this is this way:

Code: Select all

#column_left {
    float: left;
    width: 130px;
    }

#column_right {
    float: right;
    width: 530px;
    color: #666666;
    padding-left: 20px;
}

So take your pick. Either one will work. I have a feeling fix #2 will work better in IE 6 since IE6 likes padding better than margins.

Thank you for your help.

Upon further research, I found a quick "hack" to make IE do things other browsers wouldn't. (Using an underscore before the tag)

So, I simply just fixed the width of the navigation (a bit wider) and then shortened the width of the whole page just a few pixels.

The finished web layout can be found here:
http://www.trappedinside.net/stonypoint

Thanks for all the help, I appreciate it!

- Keith

looks good to me fellow texan

Thanks. Where in Texas are you from?

houston, its where im working out of right now