Hi all. This looks to be such a great helpful forum. I am hoping you might be able to help me.
Background and minor rant: I am a wannabe web designer who is working very hard to learn CSS. I have been making pages on a small scale for quite a few years and have been Queen of Tables. I am trying hard to put that behind me and embrace the future. This is all pretty tough though. Although I find CSS very powerful for some things, I find it not that great a replacement for my beloved tables. Over the last 3 or 4 weeks I have read several books on CSS and prowled many websites. I am so disappointed in the way that web browsers implement the standard. There seems like so much variation. I also see quite a few well-meaning little tricks to trick this browser or that one (mostly IE) to get the desired result. What a mess. I see that version IE version 7 breaks some of these workarounds. I don’t see how I am ever going to get a good grasp of all this.
The problem: Specifically, I am trying to make a page with one centered column with a fixed width. I am also trying to have a horizontal menu contained in this centered column. I can do this easily with tables. I initially got the idea from the “CSS Cookbook” to do this with CSS. The main problem with its design is that when I add a hover to change the background color of the menu buttons, the page jumps over to the left in IE 6.0 when hovering over a button. This is so crazy!
Here is my page:
Other opinions: I am doing the whole centered column with the fixed width thing in order to be agreeable with recommendations I read in a book called “Web Style Guide”. The book talks about how the human eye can read and find the next line easier if there are only about 12 words in a column. Monitors are getting huge and I can see this to be a problem I need to address in my site. I find this difficult to implement in CSS. What are your thoughts on the subject?