Converting an older template site to CSS

CSS Resources

[MarkJ]

I have a site that's about 8 years old and full of Tables, Spacers, JavaScript (Menu pre-loaded image rollovers. date and time, etc), Flash Header and pretty much anything else you can think of that causes migraines! It's a 2 column site with Header/Footer and an image border (narrow bar) around the content.

Well I need to keep the site pretty much as is, so I started trying to bring the thing into the age of CSS. As of now I'm using a HTML 4.01 Transitional Doc Type and managed to validate the main pages at W3C. I also have the CSS validated as 2.1.

The problems I'm running into is that between IE (6/7/8) and Firefox (3.6.3) not working even a little bit the same I end up with just a very slight crack in the bottom of the side border in Firefox and huge gaps in IE. I removed every 'height' instance except those associated with images to try and get both IE and Firefox to look the same but have had absolutely no luck at all.

Which brings me to the end of my long-winded first post, I am looking for some advice on a course of action. What I am wondering is if I spend more time to convert all the tables to CSS (and I am not very CSS proficient yet) is it likely that my height issues between browsers will go away? Or should I try and resolve these browser issues before I attempt the table conversion to CSS?

I'd be grateful for any suggestions...

[swa66]

IMHO it's best to :

- Redesign the site in CSS first.
- Ignore IE while doing this. Really, it's faster that way, IE only sets you on the wrong foot - all the time.
- Use a very strict doctype and make sure it's all valid. The more strict the better.
- use conditional comments to work around the plethora of IE bugs (version specific).
- Make test pages for all sorts of content and make sure the (x)html and css work well for all of them before starting to convert your existing tables.
- While doing the conversion: use things like SSI etc to make your next migration easier. While doing this for many pages: contemplate how nice it would be to be able to automate this (you'll need xml for that - hence my use of xhtml instead of the next to impossible to parse html)

[MarkJ]

Thank you very much for the suggestions.

I'll start with using a strict Doc type first.

The site doesn't have a lot of pages, maybe half a dozen or so and they are not dynamic. I'm hoping that makes it a little easier.

Is IE really going to render the site that badly with CSS on the finished project or will it be adequate?

[milosevic]

Yes with a site like this you are better off extracting the content from it and starting from scratch.

I have done things like this before but unless you are a god with regular expressions / find and replace it's a recipe for a nightmare.

[MarkJ]

I'm certainly not a god with any aspect of this, I just try make my way through it and hope that by following all the rules it works for all (or most) of the browsers.

This site is very outdated though, at the time it was all of the latest, greatest bling but now it's sooo Commodore 64....

[meelosh]

MarkJ I understand your problem all too well as i have tried the easy way out many times in redeveloping these types of sites...but there is really only one way and that is to redesign with css completely you will be thankfull in the end. The problem you are experiencing at the moment is that most of the browsers have different preset padding and margin and space things like lists differently so when working with css and keeping that in mind you can often get the pages looking pretty much the same if you add into consideration a few pixels here and there for fluctuation.....but once again as said above test and test again and you will get the feel of what type of fluctuation your pages need....also before i attempt anything like this i make sure to 0 padding and margin for* this helps a little..good luck

[MarkJ]

Well I now have an XHTML 1.0 Strict validated, Table-less site that is all busted up! I guess the good in this is that at least it's the exact same busted site in all 3 Browsers I tested it with. Now I just have to get everything in the right place and I'll be good to go.

Thanks again for all the advice...