why does my site look crap in mac ie?

[mcpalmer]

I really hate mac ie. I always have trouble getting my sites to look how they should on a pc. Why!!!?? I'm not actually very good or experienced at coding html which could be a good reason, other than mac ie being a stroppy git. So can anyone help with this site here and give some tips on why it looks crap:

http://www.mrpdev.co.uk/epic/NewSite/kwikzip.htm

I've started using div tags a lot more, and css, rather than tables where i can. I haven't actually got a mac, i got a friend to look at it and he said the layout was really flakey and all over the place. I think some of my div tag styles are "wrong" for mac ie - i've been using float:left to put elements vertically across the page. Is this the right way to do it? or should i positional tags. float:left has also been causing left alignment problems, with the margin-left value not being read properly? Don't know what this is about. Any advice here would be much appreciated, thanks.

[mcpalmer]

Sorry i meant to write i am putting elements horizontally across the page, not vertically, whic h you porbably guessed

[jscheuer1]

I'm not sure how many, if any serious answers you will get to this question. I vote for:

1)Because IE for Mac is Crap

2)IE for Mac is the result of an unholy trinity of Microsoft(tm), Netscape(tm) and Apple(tm)

3) it is the spawn of satan.

Anyways, I will give you a somewhat serious answer. It is because IE Mac has the mind of IE5 win and the soul of NS4. Seriously, it behaves at times like NS4 and at times like IE5 win. To get a complete breakdown on why pages breakdown on it and what can be done about this, check out:

http://www.quirksmode.org/

WARNING: Not Light Reading

[mcpalmer]

The question one must ask is why ie comes with osx as the standard mac browser when safari is far better? If it didn't, i wouldn't bother with it.

Anyways, my question about layout and float:left and margin:left still stands - left alignment is not as it should be, any ideas?

[jscheuer1]

As I have no Mac to test on and insist on testing advice of this nature, my original advice stands, check out quirksmode.org, the information you seek is there, though it may take some reading and searching to find it. I suspect that it has to do with the 'box model' mentioned on their pages. IE Mac apparently treats margins differently and there are 'hacks' to correct that.

[mwinter]

Anyways, my question about layout and float:left and margin:left still stands - left alignment is not as it should be, any ideas?

Possibly because you haven't specified an explicit width on the floated elements. Though CSS 2.1 doesn't require explict widths for floated elements, earlier specifications did so you should still include them.

Out of interest, could you tell me how my attempt at that page looks in a Mac. iCapture doesn't seem to be taking submissions at the moment.

Aside from the few main images in the header and alongside the content, there are only two other images. They are content-background.png and section-background.png, which are tiled horizontally and vertically, respectively. Everything else it text. I ditched the other images purposely as they are far too small. I'm certain that anyone with poor eyesight would just see a fuzzy blob, rather than micro-font text. If you must use images for text, at least specify alternative text. Also, are the "before" and "after" images the right way around? The before image looks much better.

Mike

[mcpalmer]

I gave up and used tables in the end for the horizontal stuff.

I'll get back to you asap on the mac appearance for the site, but it looks a bit all over the place on my pc. Is this a specific layout for mac only? And do you want mac ie and safari checked?

Forgive my ignorance, but why are the horizontal and vertical pngs so small? Are you simply doing this to save img size and strtching the images within the html?

Regarding text size and images, i agree the image text is fuzzy, but this was how i was requested to present the site, and i'm not being paid enough to deviate from that. I personally would not present the site this way, but there you go. And that after image is crap, but this is a wip so it won't stay.

It looks a lot clearer than mine overall, the text is really crisp. It seems crisper than mine. How do you get your text so crispy?

[mcpalmer]

I see what you were doing with the page layout now, making it changeable width-wise so it fills the whole page. cool. I must learn how to layout a page like this when i get a chance. I think maybe that the specific layout my client wants doesn't suit this type of layout though, fixed dimesnions would be better.

[mwinter]

I see what you were doing with the page layout now, making it changeable width-wise so it fills the whole page. cool.

Yes, precisely. Was your "all over the place" comment related to these layout changes, or is there something more serious happening? I wasn't attempting to produce a faithful reproduction, just a close match. I did intend to draw attention to the intentional changes.

I have only just noticed two rendering errors in IE, but they aren't serious. The phone number is on a line higher than the site navigation menu, and the space below the section navigation menu isn't white. I can't provide any rational explanation for why these problems have occurred, though it's a gimme that IE is crap. I could have sworn they didn't exist when I published the document yesterday, but I must have overlooked them. They don't occur in Firefox, Opera, or Safari (as a screenshot, provided by iCapture proves). Even early Mozilla versions exhibit no problems.

You might have the answers to the questions in your earlier post, but if not I'll rush through them now.

Is this a specific layout for mac only?

It's actually for "anything other than NN4", though IE4 should be excluded, too. I didn't get around to looking up CSS hiding hacks for IE4. These user agents should get a readable, yet rather ugly version as they're just to old handle anything more complicated than basic positioning and colour.

And do you want mac ie and safari checked?

I've seen it in Safari now, but not IE/Mac. However, please don't make any undue effort. I was only curious.

Forgive my ignorance, but why are the horizontal and vertical pngs so small? Are you simply doing this to save img size and strtching the images within the html?

The images aren't stretched, but tiled. Using small, repeatable images not only saves bandwidth, but allows for a more flexible design as it won't matter how much, or how little, space the images need to fill.

On the subject of image stretching, never use the height or width attributes (or CSS properties) to resize an image. That's partially why the "after" image looks so bad: user agents use simple pixel resizing methods, not the more computationally expensive approaches, such as bilinear or bicubic resampling.

It looks a lot clearer than mine overall, the text is really crisp. It seems crisper than mine. How do you get your text so crispy?

By using pure text. The font size (at least for body text) is also set to the default, though the menu text is slightly smaller.

I must learn how to layout a page like this when i get a chance.

The first step is to simplify your mark-up. The file for my demo is ~5.5KB plus ~2.3KB for the style sheet. Yours was ~24KB. Layout tables, inline style declarations, and Macromedia's extremely inefficient image rollover system adds a surprising about of bloat. Once you have a simple document structure, it becomes very flexible and inherently fluid.

You have to carefully consider how you position elements. Absolute positioning using pixels is not usually the way to go. The AnySizeDesign entry at All My FAQs might be useful.

Mike

[mcpalmer]

Hey, thanks for the informative, helpful reply! I think my html is slowly getting better, practice makes perfect. I used to use tables for layout (!) but only use these as a last resort now. I still can't seem to get div elements to layout horizontally though. elements seem to naturally lay out vertically one below the other. i used float:left to get a horizontal layout but it seemed buggy. Of course, i could use layers to layout like this but, i heard this was not a good way to layout pages, and you said much the same in your last post. Why is using layers bad? It seems a really flexible way to layout pages.