Okay I'm tearing my hair out here!
I'm working on a Web design for a class. I'm trying to make a fixed header that is centered on the screen. The block containing the header is 950 pixels wide and should auto-center.
Here's a link:
This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).
I cannot figure out how centering works. Supposedly margin: 0 auto should center a div, but that only occasionally works. I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.
The CSS file for the header is the one called headernav. The others are part of the Blueprint framework which I'll be using on the grid underneath the header. So just ignore the others.
Can anyone help me with this?
Wait, I did get it to center without the negative margins (by putting in text-align: center all over the place). But the page doesn't function in Internet Explorer (some items -- including the background image -- are shoved halfway off the screen). This is driving me crazy! Any help would be appreciated. Thanks, Phyllis
I got the background images to move over onto the page since I can specify those as left: 0. I can't do that with the 950-pixel wide divs though. So they're still all messed up.
I love CSS, but I really miss the "center" tag (I learned basic HTML a long time ago when everything was done with table-based layouts -- it was super-easy to center stuff).
I figured it out! Well, sort of. I just redid everything from the beginning. I think the problem was that I had a wrapper element set to absolute positioning. I guess it has to be relative positioning in order to center to the page? So if I want a fixed-width navigation that's absolutely positioned I need to put it inside a wrapper that's relatively positioned with auto margins?
new version (please let me know if it doesn't work on your version of IE!):
Can't see your page. But static (unspecified) positioning is all that's required for 98% of page layouts. I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus. And then I wrap them inside a position:relative container.