Trouble with Safari

[miker1961]

I have designed and coded what I thought was a very simple landing page. It seems to display fine in all browsers except for Safari. I am setting text-align to center at the body level for IE and div level for Mozilla, then adjusting the alignment for other elements accordingly. The only problem is that Safari doesn't seem to be affected by the text-align center. Do I need to do something specific for this browser? Here is the url to view the page.

http://www.corvairflair.com/VerdeBook/

Thanks,
Mike

[drhowarddrfine]

I don't have Safari handy right now. You are using -moz-center for text-align but regular text-align elsewhere. So this feeds Mozilla only at that point but does nothing for IE or Safari. I'm wondering if it was an attempt to correct Mozilla but, in the process, messes up Safari. This is one reason why you should always correct IE, not modern browsers.

OT - I don't own a Mac. I should and want to but I do have Safari on Windows for testing. I really, really like Safari.

[Stang02GT]

you might, i know that i have run into a lot of problems when I view a page i created in IE vs FireFox. Each browser picks things up differently. So you might wan to check out how Safari handles things.

Unfortunately i don't know enough about Safari to help you but if i were you my 1st step would be to research safari and see if you have to handle certain things differently in it.

[miker1961]

Yes, I was trying to correct for both IE and Moz. For some reason I wasn't able to get text-align center to work properly in Moz without that snippet of code. I suspect that you are correct in that this may be messing up the Safari layout.

One other question. Does height: 100% work in all browsers? I can't seem to get it to work. For some reason when I use this style attribute, the height for my text container never changes.

Thanks
Mike

[drhowarddrfine]

height does not work properly in IE. IE treats height as 'min-height' but min-height itself does not work at all in IE. Of course, height works correctly in all other browsers.

For height to work, you have to think "100% of what?". The parent/containing element must also has a height set.

[miker1961]

Thanks, I seem to have the height working for me now, but have run into another issue. I want my rotating image in the header to align to the right side of my mainContent div. But I also want to make sure the entire container stays centered in the screen. Right now if you minimize your browser window that rotating image stays in a fixed place on the right.

Thanks
Mike