[turboSPE]

I need help! I'm coding (by hand) a web site for my job, and what I've done thus far looks "right" in all the real browsers (Safari, Firefox, etc.) but IE botches the lay out. Can anybody please look at my code and see what the problem is? Thanks!

turboSPE

http://people.smu.edu/rgaither/comptroller/

[Synotic]

Well the first thing I would do is throw out any use of absolute positioning from the entire site. For such a simple layout, there seems to be a lot of unnecessary code. You could cut the CSS in half a couple times.

I usually like to stay away from "fix this particular problem with this line of code", because that never really helps in the long run... but a more stable method of doing the two columns would be something like:

Code:
<div id="left">Left Column</div>
<div id="right">Right Column</div>
<div class="clear"></div>

Code:
#left { width: 45%; float: left }
#right { width: 45%; float: right }
.clear { clear both }

And you don't need to make everything "width: 100%". Every block element's default width is "auto", which means it will stretch to to the full width of its container by default.

Oh and IE is a real browser too... is it any coincidence that the browser(s) that display your website correctly, are the ones you coded in? Windows developers get annoyed at that "fake, 2 year old browser from Apple" as well

[turboSPE]

Originally posted by Synotic:
Well the first thing I would do is throw out any use of absolute positioning from the entire site. For such a simple layout, there seems to be a lot of unnecessary code. You could cut the CSS in half a couple times.

I usually like to stay away from "fix this particular problem with this line of code", because that never really helps in the long run... but a more stable method of doing the two columns would be something like:

Code:
<div id="left">Left Column</div>
<div id="right">Right Column</div>
<div class="clear"></div>

Code:
#left { width: 45%; float: left }
#right { width: 45%; float: right }
.clear { clear both }

And you don't need to make everything "width: 100%". Every block element's default width is "auto", which means it will stretch to to the full width of its container by default.

Oh and IE is a real browser too... is it any coincidence that the browser(s) that display your website correctly, are the ones you coded in? Windows developers get annoyed at that "fake, 2 year old browser from Apple" as well

Thanks for the tips! And, no, it's no coincidence I'm trying to convince myself I didn't do it on purpose.

turboSPE