horizontal menu in fixed width one column layout

[beckyw]

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:
http://home.comcast.net/~welch40/index3.htm

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?

[benniaustin]

First of all, great descision on switching over to css, from tables. Congradulations. It's difficult at first, but once you get the hang of it, it's easier this way.

Now, lets get down to the nitty gritty....

You're using the below method to center the page, it has it's flaws. try resiszing the browser to about 400px wide, and you'll see you cannot scroll anymore.

I have never seen the problem that your site has before, but that's the first mistake I saw, so I tried using a different method, and that fixed the issue.

body {
width:730px;
padding-left:50%;
}
#frame{
width:730px;
margin-left:-365px;
}

Get rid of that stuff, out of your css, and just use this instead

#frame{
width:730px;
margin:0 auto;
}

[benniaustin]

Some other notes....

dont forget your ";"s, if you dont close your css declarations, it will void out the line you forgot to close, and the one after it.

When you gave your <LI>'s an inline display method (display:inline, you can no longer use margins. Ie will show them fine, but firefox will not. Instead simply leave the display, and use, float:left;.

Also your <A> tags are inline, so you cannot use margins there either. you can also swap them to display:block, and float:left;

All of this floating will present a problem though since the text that comes after will go to the right, so wrap the page's content in a div, and use clear:both. This will allow nothing to float next to it.

[beckyw]

You are so awesome!!!! Thank you. I have fought this for about 3 days.

[beckyw]

Getting the width and padding out of the body and changin the margin to 0 and auto worked seemed to fix my crazy problem. I found where I left off the ";"s, but I am not understanding a couple of your other suggestions. When I made the change to the <LI>'s and <A>'s, I lost my narrow centered width. The line underlining the tabs at the top jumped up behind the tabs.

Here is my second try:
http://home.comcast.net/~welch40/index4.htm

[benniaustin]

You lost your frame div. Must have gotten deleted somewhere. Putting that back will fix the width issue

<div id="frame">

And your line jumped to the top becasue all of the elements inside of the <ul> are floated. This will collapse the <ul> to 0px.

There's a couple of fixes for this, the easiest one, is to just add the border to the top of the content div, instead of the <ul>

  #content {
     clear:both;
     border-bottom:1px solid #778;
  }