CSS Forum

**Kaelink** · 09-04-2007, 01:32 PM

The website I'm referring to is this: http://www.freewebs.com/kaelink/IHRF/
In Firefox, it shows up exactly as I had planned, but in IE, it looks horrible...
I was wondering if someone could find the flaw in the code (because I'm not great with CSS/Div, which is painfully obvious). I want this site to look the same (more or less), regardless of the user's browser.

Thanks!
Kae

An image demonstrating the problem can be found at: http://www.freewebs.com/kaelink/IHRF/Problem.gif

**LadynRed** · 09-04-2007, 03:18 PM

FIRST - put a proper DOCTYPE on your page, that will ensure that you get more consistent results on all browsers, though IE6 will still need a few other kicks to make it behave.

Second - get rid of the tables for layout, you don't need them and they are soo 1997. Your layout can be achieved completely without tables and w/o too much effort.

Third, put your text inside <p></p> tags as they are supposed to be.

Get rid of things like <div align="center"> and properly use CSS to center the div. Also get rid of the background colors and such you have crammed into the <body> tag and put all that presentational markup into the CSS , where it's supposed to be.

In your CSS, define a default typeface and size - FF is displaying it in TimesNewRoman whereas IE6 is showing it in what appears to be Arial or Verdana.

**joder** · 09-04-2007, 03:57 PM

Here is a great reference
http://www.w3schools.com/tags/tag_doctype.asp

I agree with LadynRed.

There a lot of div's and they are contained within a table. I noticed towards the top there were 4 closing </div> tags and I could count only 3 opening <div>'s.

The layout is neater and easier to keep up with using CSS. With the tables and div's it's hard to see what is going on without reproducing the site and rewriting it.

**Kaelink** · 09-04-2007, 05:28 PM

Thanks guys.
I'm not sure if it's actually any better, but the problem is, at the very least resolved.
Joder, thanks for the reference.
LadynRed, thanks for what was essentially a checklist for me to go by.

Like I said, it may not be properly designed, and probably still not the most efficient thing ever, but it looks like the "problem" is fixed.

Thanks guys.
http://www.freewebs.com/kaelink/IHRF/index2.html (Updated version)

Oh, and any further advice is greatly appreciated.

**joder** · 09-04-2007, 05:47 PM

I'm glad it's working for you. You may want to play with adding padding to your css classes. That will add space around the font and help with learning more about CSS