Updating to CSS, and have some questions

[Michael7]

Hi Everyone,

I created my website with extremely simple HTML coding. I aimed at having the website accessible to even really old browsers, to make it as accessible to everyone as possible, even those without the newer versions and browsers (with some exceptions where absolutely necessary).

If you wish to see what I mean by simple and everything, my website is
http://workmenforChrist.org

However, after all this time, I truly am tired of all the trouble when updating and such, with having to go to every page to change the code if I mess with the sidebar, among other irritations with keeping it up to date. I'm sure you all know what I mean.

Now however, I'm highly considering switching to use CSS to make things much easier. I've held off on that all this time though because of all sorts of things I've heard of how it isn't read right in certain browsers and such. That's not good.

I hear mostly from problems with Firefox though. My questions are:

Is there a list of browsers that have problems with properly coded CSS?
What exactly are the problems, and the chances of my site experiencing them? (I am keeping things simple even with CSS and everything. Exactly the same look and everything, just with CSS coding now.)
My main concern is that the website will become unreadable by the text overlapping and such (the placement CSS not registering properly); would that be an issue with any of the troublesome browsers?

To beat the last question, I figure if necessary I could just continue to use the dreaded table for the layout (as I use now), and just use CSS for the other things. Tables for the layout, while perhaps making the page load a bit slower than CSS coding, are somewhat safe though across nearly every browser, right? But, again, if placement errors do not occur in these browsers that don't like CSS, I'd just use CSS for that too. My main concern is readability for my website. I don't want the body, to overlap the sidebar and all that.

Any and all help with these answers, is appreciated! Any advice would be GREATLY helpful (as I'm just starting to look into CSS and know little about it)!

I thank you all in advance for your help . . .

PS - If you looked at my code, or looked to validate it and everything, yes it's cluttered and I know I missed some errors when fixing them a long time ago. But that'll all be dealt with as I clean up with CSS.

[drhowarddrfine]

I hear mostly from problems with Firefox though.

The most troublesome browser today is Internet Explorer. The least troublesome would be Firefox.

Is there a list of browsers that have problems with properly coded CSS?

IE7 is nine years behind web standards and the only troublesome browser. Firefox, Opera and Safari do very well as modern browsers that follow the standards and you should have few problems with them.

What exactly are the problems, and the chances of my site experiencing them?

Little. As long as you follow the W3C standard, test your markup in a modern browser (Firefox, Opera, Safari) and validate using the W3C validators, you will have few problems except with IE. But the quirks and many bugs in IE are known as are the fixes for it.

I don't want the body, to overlap the sidebar and all that.

The only way that would happen would be with an error in your markup.

The very first problem you have with your current page is that it doesn't have a valid doctype. Without one, Internet Explorer goes into 'quirks mode' which would be like 1998 all over again. See the article about doctypes under Articles above.

Second thing you should read about is validating.

Third thing you should get used to is writing in all lower-case and not caps.

In any case, feel free to ask questions often. A link is always good for us to help you. I would abandon tables altogether and jump right in. CSS
shines when tables aren't in the way.

[Michael7]

All that sounds good. Seems like I will be alright with the correct code. Problem is I noticed most of my visitors use IE6, and you said IE has the most problems? But they are fixable . . . on my side?

I know, my current code is lacking a lot. I'll be cleaning up that and putting in the doctype. I always wondered about that, but after reading the article about it, now I understand it a bit more

And the layout would be better in CSS? No problems with it not being read right, to where the words will overlap (unless my own fault, which is easily fixable).

I appreciate the help and advice (also about coding in lowercase, I have a bad habit of capitalizing).

[drhowarddrfine]

I noticed most of my visitors use IE6, and you said IE has the most problems? But they are fixable . . . on my side?

As long as you code to web standards, then your markup should work in all browsers. Sometimes even IE. But there are hundreds of sites, a few most notable, dedicated to fixing IE bugs. These 'hacks' are something you can do without your user's input.

And the layout would be better in CSS?

Under Articles above, read the link to "The Web is Ruined and I Ruined It" written by the guy who first suggested tables for layout. Never use tables for layout.

No problems with it not being read right, to where the words will overlap

In my years of web programming (just a few) I have never used a table for page layout. I even have trouble helping people with problems who do so.

[Michael7]

As long as you code to web standards, then your markup should work in all browsers. Sometimes even IE. But there are hundreds of sites, a few most notable, dedicated to fixing IE bugs. These 'hacks' are something you can do without your user's input.

I'm glad to hear that. That way I don't have to require the users to do something just to read my site correctly.

Under Articles above, read the link to "The Web is Ruined and I Ruined It" written by the guy who first suggested tables for layout. Never use tables for layout.

Hmm . . . Thanks for the article. It did help me realize some things, thanks!

In my years of web programming (just a few) I have never used a table for page layout. I even have trouble helping people with problems who do so.

And that is VERY encouraging to hear. I'll go ahead and switch the layout to use CSS as well, instead of keeping it in tables . . . being that you know, that's what CSS does afterall ha-ha.

Thanks again for your help. This place does seem to be a great place to get help and I'm glad to have found it. I'll definitely be coming here for future help (especially as I'm new to CSS and still learning it)!

~Michael

[Michael7]

Yet one more question came to me.

A while back a user had left a comment in a section of my website that used CSS and PHP (it's a WordPress section of my website). She left a comment telling me that she couldn't read part of the page because a side was overlapping the words.

She was using WebTV I think she mentioned. Here is the page she was talking about and at the bottom is her comment:
http://workmenforchrist.org/DailyBibleStudies?p=428

I'm not sure if you can see if something is wrong with the code, because since then I have updated the version of Wordpress, so the code may have been fixed or changed.

My question is, Is there knowledge about things like WebTV (or other such things like it) not reading CSS correctly? Again, I really just ask, to get an understanding of if/how I can make my websites at least just readable on as many browsers/apps as possible.

Thank you again, very much for your help!

~Michael

[drhowarddrfine]

WebTV is a different animal but I have not had to deal with it, fortunately. I don't even recall if any of the online browser testers offer that one, though there might be one.

[Michael7]

Thanks very much for the help!

I guess I will have to rely on my users to see if it does happen to others, and if it happens only on something like WebTV. Then . . . I guess we'll know!

Thanks again!

Is there a problem with IE and Firefox both not working with SSI? I thought I read that SSI wouldn't have any problems with any browsers and such . . . but the code isn't working for me. I posted a separate thread about it, but . . .

Thanks for all the help and advice!