Ie6 Css

[infringer]

Look at http://beta.holidaytoursinc.com

I'm trying to figure out why the header title "Your Best Vacation Value" is centered correctly in Firefox.

But not in IE6?? Any clues, and any suggestions on how to fix it?


I mean I know I can margin or pad it and move it over manually. But there has to be a better way to do it.

Open for any comments.

Thanks in advance,
-David

[Sardtok]

Looks centered in IE6 here...
Don't have FF installed on this comp, so can't check that right now, could you describe what the difference is?
The text is centered the same as the text footer is.

[infringer]

Yeah I guess I should clarify.

Text is centered on screen, but it should be centered between edge of logo and edge of browser. That's how it is in Firefox.

While not that big a deal until you shrink the window size, it would be nice to figure it out.

Thanks,
-David

[igner]

I don't have IE 6 readily available at the moment, but here's something to try:

Add text-align: center; to the outer content div, to center align the elements within the div in IE (thanks to the fact that IE incorrectly applies text-center to block-level elements as well). Shouldn't have any effect on more compliant browsers.

HTH

[infringer]

Nope adding text-align: center; to the outer-content div makes not difference.

I know this seems crazy to worry about something like this. But its more of a learning thing now than it is that it needs to be done.

-David

[igner]

I know the feeling. A couple things that often help me sort out issues like this are to put borders around all the elements in question - it helps me visualize the actual dimensions of the elelments. (Sometimes I do it manually, sometimes using the excellent web developer plug-in for Firefox).

A quick test of three browsers here on my Mac shows that FF and Safari will both center in the space available, so if there's a floated element, the width of that element is taken into account. IE 5 Mac calculates the width of the element, then offsets the entire object the width of the float...

Another thought, though I haven't tried it to see what happens, would be to remove the 100% width on the topcontent element, and set margin left and margin right to auto. This'll center it in the more compliant browsers, keep the text-align: center on the containing div to center it in IE.

One other note - it looks as though you've an extraneous div in the file - instead of setting a border on the outer div, then offsetting the inner div the width of the border, why not simply set a background color for the containing div, and a height of 100px? Then you can eliminate the outer-content div...

Also, a few good resources for working with CSS-based layouts:

www.positioniseverything.net
www.quirksmode.org

[infringer]

igner,

Thanks for the help.

The margin-left & margin-right: auto commands did not work.

But since I know what the width of my logo is I simply set a margin-left: 200px; on the topcontent div and it performed exactly like I wanted it to in both IE6 and FF.

Also thanks for the tip on the outer div. CSS is still fairly new to me for layout purposes, so I'm still learning.

Thanks!

-David

[igner]

D'oh, why didn't I suggest that? Just trying to make it harder than it needs to be, I suppose...

Glad to hear you got it working...it's well worth the effort in the long run, particularly if you're dilligent about separating structure and style.

One more universally huge list of resources:

http://www.dezwozhere.com/links.html

Good luck - it pays off in the end...really.