3 questions - centering and extending, and margins

I guess let me start with centering. I have


By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll.
(actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm

2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions?

Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it.

I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet).

You guys are great for newcomers - I know I really appreciate the help!

Sarah

You need to change the wrapper to have text-align:center; not text-align:left;...

Other than that you've set the width for #wrapper, twice, meaning that the first setting is redundant, it doesn't do anything...

html, body, #wrapper{width:98%; /* remove me */}

Also, there is no need to even bother with setting the position:absolute; attribute on #wrapper

If you want a simple a clean example of a page that is centered with the use of one of IE's innappropriate CSS rules, please see http://bluerobot.com/web/css/center1.html
and http://bluerobot.com/web/css/center2.html

just so you know for next time... margin: 'top' 'right' 'bottom' 'left'; where top,left,bottom, and right can be in %, em,or px

another suggestion is regarding your predicament with the main text not extending to the footer. You have to decide wether or not you want it to be an overflow, or just a page that scrolls ( scrolling normally, is the most intuitive approach from a useability perspective)

The position:absolute is necessary for the footer to appear at the bottom of the page. It appears that this is also my issue with centering - when the position is relative, the page centers (but the footer shoves up over my content). The second footer example used ablsolute positioning and (mostly) worked like a charm. Thanks!

I think the content should be overflow? I don't want the scroll to occur in the content div, but in the browser window...

Ah, I see, I didn't realize that was what you were using it for. What browsers are you aiming for this to work completely on?



If the content was set as overflow you would see an interstitial scroll bar, meaning not what you want with respect to this stament.

However, if you use absolute positioning to physically place the footer it will be a problem. The reason being is that the content div will never stretch to the footer, the footer should come up to meet the content div... It's actually the opposite of what you want. Well, at least assuming you want the footer to dynamically move up/down as content is added.

Another option would be making the footer relative to the containing div, and making the content div relative to it's container. This would allow you to create a specified height for the content div to force the footer down. Should your content overflow this height it will simply flow down more and push the footer down respectively.

Whew! I was trying to figure this out but not having a lot of luck. There's nothing seriously wrong, just little things that pile up. What I did was whack it back to the basic footer demo code and add the elements in one at a time.

The css was simplified. The html was simplified and should be valid xhtml 1. I simplified the javascript for the menu. BTW, that submenu is shhweet.

Centering is fixed.

The content stretching to the footer is sleight of hand.

The 'tab' effect on the submenu is fixed. I don't know how, it just happened as I rebuilt the page. You may spot the difference(s). It may be from using static rather than absolute positioning.

cheers,

gary

I reworked part of the css to hack an IE bug.Life would be so much better without IE

cheers,

gary

You won't hear any arguments from me.

Thanks a ton for looking at this! I had figured everything out except for the stretching background, but I was getting as lost as you with what was what and why it was there. Parlty that's b/c I copy and paste and tweak what works, without necessarily understanding what is going on.

I'm about to print everything out and really study what you did.

(very grateful)
Sarah