New to CSS and need a Little Alignment Help

[greg_talbot1]

Hi All!

I'm relatively new to CSS, but I've been working on a page for a few weeks, and I'm stumped on a couple of sections. It currently looks best (minus the bugs described below in IE7). Overall, I'm happy with it, but I need help with the following if you have any insight:

1) Can't get the text vertically centered in two sections (div id=slogan, div id=callus). Text starts "Fine French & European
Antique Furniture and Accessories" and "Historic Downtown Newberry, South Carolina," respectively. I've tried a lot of things, and just can't seem to get vertically centered.

2) Navigation Bar (div id=navigation). I've been struggling with these links for awhile. I want to center them, which I've managed to do, but now they're sort of stacking on top of each other. I've tried all kinds of things to get them not to stack, but nothing is working outside of allowing the <li> to display as block. But when I do that, I can't get the links to center anymore. I want to be able to have multiple lines of links as necessary, always being centered. I would like for these links to appear over a background (black, preferably), but the <ul> and <li> don't seem to want to nest into a div properly.


3) I'm having trouble with class .tabcontent in terms of width. It is appearing wider than the rest of the page, even though it is nested within the #main div. I want all sections to be the width as the total logo bar at the top (1024px). I've checked my average user, and 93% of them are using 1024px or better, so I think it's OK to go with that.

4) I am also having some problems rendering this page properly in Firefox. Like I said, it works best in IE7, but my customers use Netscape Nav 4.0 (51%), IE6 (22.5%), Mozilla (Gecko) (16.4%), and Safari (7%). I'd like to make sure that the page looks good for these folks to, but as a newbie to CSS, I'm struggling with the hacks. It's seems everytime I change something to look good in another browser, IE sort of blows up. I'm not real clear on the hacks and what I should be doing so it looks good across browsers.

5) Any other constructive input is also appreciated. Overall, I'm pleased if I could get these minor issues worked out. I validated the CSS, and it checked out OK, so I think I'm close.

I sincerely appreciate your help!
Thanks,
Greg

The link:

http://www.euroluxantiques.com/Final.html

[Medyman]

Hi Greg,

The very very first thing you should do is to validate your markup. Your page has a lot of errors that the validator is great at catching -- open divs, misplaced elements, etc... That will go a long way to achieving a cross-browser design/layout.

[greg_talbot1]

I was able to validate all but the javascript "<" characters, which the validator doesn't like but I need to make the js work. I still have a little gap between the bottom announcement and the entire logobox in IE6 and some of my borders on my links aren't quite displaying correctly in Firefox, but I'm OK with those little quirks for now. I figure I'll be able to resolve those in time. Thanks for your help! Greg

[Medyman]

Yeah, the validator throws errors when it encounters some JavaScript. It's not necessary but here is what the WDG recommends you do to prevent such errors.

[mattpowers]

Hi Greg, I just viewed it in FireFox 2, at 1280x800 and it looked fine. Some things you might want to think about though:

I'm having trouble with class .tabcontent in terms of width. It is appearing wider than the rest of the page, even though it is nested within the #main div. I want all sections to be the width as the total logo bar at the top (1024px). I've checked my average user, and 93% of them are using 1024px or better, so I think it's OK to go with that.

Even though someone's resolution is 1024px, you have to leave some space for sidebars, etc. so your total layout width is best at 1000-1005px, instead of 1024.

4) I am also having some problems rendering this page properly in Firefox. Like I said, it works best in IE7, but my customers use Netscape Nav 4.0 (51%), IE6 (22.5%), Mozilla (Gecko) (16.4%), and Safari (7%). I'd like to make sure that the page looks good for these folks to, but as a newbie to CSS, I'm struggling with the hacks. It's seems everytime I change something to look good in another browser, IE sort of blows up. I'm not real clear on the hacks and what I should be doing so it looks good across browsers.

You should probably learn to code for Firefox first, since it actually renders things properly, then fix for I.E. The big thing with alignment and cross-browser problems (in my experience) is that I.E. puts padding and borders on the inside of a set width, where standards-compliant browsers add them to the width. so if you have a 1024px div, with 10px padding, and 2px borders, the entire width of your div in Firefox is going to be 1048px, and 1024px in I.E. That's where you need the hacks

so to fix the above scenario for firefox, you would set: div width (1000) + borders (4px) + padding (20px) = 1024px. instead of the other way around. for I.E.

I hope that helps some.

-Matt