[york28]

I'm redesigning my website, and I've come across this problem with everyone's favorite browser, Mac IE. The site works great in everything else (Win IE 5-6, Moz, Safari, etc.), but in Mac IE it chokes hardcore.

Here it is. And here is the CSS.

I've been hacking away at this for a couple days and I still haven't figured out what I need to change to fix this problem. Anybody have an idea?

Thanks for the help.

[ntt]

Originally posted by york28:
I'm redesigning my website, and I've come across this problem with everyone's favorite browser, Mac IE.

Maybe this article will help:
Apple Developer Site - CSS Hints for IE5 Mac

Hope that helps?

[philzilla]

reading this might help you to fix it. it's definitely something you should be aware of.

[Synotic]

Originally posted by york28:
I'm redesigning my website, and I've come across this problem with everyone's favorite browser, Mac IE. The site works great in everything else (Win IE 5-6, Moz, Safari, etc.), but in Mac IE it chokes hardcore.

Here it is. And here is the CSS.

I've been hacking away at this for a couple days and I still haven't figured out what I need to change to fix this problem. Anybody have an idea?

Thanks for the help.

The problem probably stems from your method of horizontally centering your boxes. You shouldn't really need any positioning at all since the design is fairly linear. A simple way is to use margin: auto with a box that has a width applied. Using margin: auto doesn't suffer from any box model problems with Windows if your wondering... Just a simple example:

<div style="width: 300px; margin: 0 auto">blah</div>

Try it out and if it works for you then you can just apply it to all the boxes you want to center.

Also this is some what unrelated but your background properties can be condensed into one "background:" property like...

background: url() top left no-repeat;

and also "transparent" is the default value for background-color so you don't need to always define it.

Hope this helps

[york28]

Thanks for the input everyone.

ntt- The article did help, it ends up that part of my problems were due to using position: relative for the positioning of a few divs. The problem is I can't remember why I did that in the first place, but I'm pretty sure there was a reason. I never use relative unless there's a reason.

phil- Thanks, I do know about the box model problem, but my issue was with Mac IE, not IE for Win. The more I code web sites the less trouble I have with Win browsers, and the more I do with Mac IE.

Synotic- I previously had my main div centered how you suggested (but with tex-align: center in the body to account for IE Win), but I changed it at some point for a reason that I again can't remember. You are right about those background rules, I'm never sure about what order the values go in (if any), so I usually end up doing it longhand. Something I ought to brush up on I guess.

In any case, progress continues. Thanks for your suggestions, I cleaned up my code a lot. Any more feedback is welcomed. The links above point to the new files, with pretty debug borders for your viewing pleasure.

[Synotic]

Originally posted by york28:
Thanks for the input everyone.

ntt- The article did help, it ends up that part of my problems were due to using position: relative for the positioning of a few divs. The problem is I can't remember why I did that in the first place, but I'm pretty sure there was a reason. I never use relative unless there's a reason.

phil- Thanks, I do know about the box model problem, but my issue was with Mac IE, not IE for Win. The more I code web sites the less trouble I have with Win browsers, and the more I do with Mac IE.

Synotic- I previously had my main div centered how you suggested (but with tex-align: center in the body to account for IE Win), but I changed it at some point for a reason that I again can't remember. You are right about those background rules, I'm never sure about what order the values go in (if any), so I usually end up doing it longhand. Something I ought to brush up on I guess.

In any case, progress continues. Thanks for your suggestions, I cleaned up my code a lot. Any more feedback is welcomed. The links above point to the new files, with pretty debug borders for your viewing pleasure.

For background shorthand it doesn't really matter what order everything goes in. And since we're on shorthand... you can change your margin: 30px auto 15px auto; to just 30px auto 15px; I find it pretty easy to remember just because the first value is the top the second is left and right and the third is the bottom. Pretty much goes in order.

Anyways, so is your problem essentially fixed now or is there something else I can't see?

[york28]

Thanks, I never knew that about the background shorthand.

Yeah, so everything is working now- my last problem was Mac IE displayed the top cloud div, but moved teh content from teh div below into it- adding a nbsp worked.

Thanks again for the help.