CSS difference between Firefox, IE and Chrome

On most pages, I have a three column site. However, the left column is eliminated on my forum pages, which has led to a cascading set of headaches and I’m lost. The easy answer would be to eliminate the right column instead of the left, but as someone else put it my “advertisements look too aggressive”.

Firefox always works as intended, but IE and Chrome have different issues.

IE on all pages - When the window width is decreased, the main content shrinks but the right column stays in the correct spot, which creates increasing white space between the columns and the right column disappears off to the right.

Google Chrome on the forum page - The forum width collapses to around 150px. From what I could find, this is due to width: auto; in Chrome defauting to the minimum width instead of the maximum.

There is one odd css setting that I should explain. I set the right column position as absolute so I could set the top. Otherwise on all three browsers, the column top starts where the bottom of the main content ends.

Here are the links:

Home page: http://www.resumeremodel.com
Forum: http://www.resumeremodel.com/community-resume-reviews.html

Thanks for any help.

If you want an easy way to just remove a column and have it all fall into place check out Pauls site

Check out a 3col layout. To get it to two, just eleminate one column from the source code, and depending iif it is left or right column, just remove the appropriate left/right margin on the outer div.

IE on all pages - When the window width is decreased, the main content shrinks but the right column stays in the correct spot, which creates increasing white space between the columns and the right column disappears off to the right.

The side effect of Ap…see below

Google Chrome on the forum page - The forum width collapses to around 150px. From what I could find, this is due to width: auto; in Chrome defauting to the minimum width instead of the maximum.

The problem is the table-layout:fixed; you set on the table!

There is one odd css setting that I should explain. I set the right column position as absolute so I could set the top. Otherwise on all three browsers, the column top starts where the bottom of the main content ends.

If you flota and position:absolute; something the position:absolute wins out. I would float it but then give position:relative;top: x amount to move it. I would not AP…

Thanks Ryan. Unfortunately the relative positioning doesn’t work because it calculates it as relative to the bottom of the previous div. If I flip the order in the code, the main content’s top is below the right’s bottom.

I returned the site to an earlier state, where the problem was different but much less problematic. Maybe it’s best to try to fix it from here.

The problem is that the white space between the main content and the right div can be too large, depending on the width of the browser. I’d like the space to always be 25px. The issue is most pronounced on the forum page.

I assume you mean #main2 and #right

On “#main2” just give a margin-right:5px. 5px and not 25 because already a 20px padding is set.

On #right just float it left instead of right. 25px always…

Thanks again Ryan. Unfortunately the float left for the right side div didn’t have the desired effect. There was no change in Firefox so the same amount of white space remains between the two divs. In IE and Chrome, the right div stays 25 px from main2, so the extra white space moves to the right of the right div.

Originally the right div didn’t have a defined width, so it widened to cover the white space. That too often looked odd, so I changed the width to 200px.

CSS is giving me headaches! :confused:

I tested everything locally so you must have done something wrong.

If you floated the #right div left they would be sidebyside next to each other (20px padding though). The 5px margin should have done the trick but your saying it didn’t? As I said I got everything working locally so you must have done something wrong. I’ll go take another look at your site…

Edit:

Site isn’t updated.

Thanks again Ryan. I can’t tell you how much I appreciate your help.

I checked to confirm that it was uploaded. I also noticed my Firefox comment before is wrong because I had been looking at a test directory. Firefox acts like IE and Chrome with the extra space to the right.

I looked in Firebug to check the CSS and this is what it has:

#right {resume_r...model.css (line 293)
float:left;
width:200px;
}

There are other issues to get correct the 25px, such as .moduletable. Don’t worry about this though. I can figure it out. The other problem is the one driving me nuts.