PDA

View Full Version : why does my site look crap in mac ie?



mcpalmer
04-12-2005, 09:22 PM
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
04-12-2005, 09:23 PM
Sorry i meant to write i am putting elements horizontally across the page, not vertically, whic h you porbably guessed :)

jscheuer1
04-13-2005, 04:43 AM
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
04-13-2005, 09:16 AM
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
04-13-2005, 03:34 PM
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
04-13-2005, 03:37 PM
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 (http://www.mlwinter.pwp.blueyonder.co.uk/dd/mcpalmer/) at that page looks in a Mac. iCapture (http://www.danvine.com/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 (http://www.mlwinter.pwp.blueyonder.co.uk/dd/mcpalmer/content-background.png) and section-background.png (http://www.mlwinter.pwp.blueyonder.co.uk/dd/mcpalmer/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. :confused:

Mike

mcpalmer
04-14-2005, 07:52 PM
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
04-14-2005, 08:07 PM
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
04-14-2005, 11:12 PM
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. :rolleyes: 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 (http://rubix.retroweb.net/~danvine/icapture/45208.png), provided by iCapture (http://www.danvine.com/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 (http://www.allmyfaqs.com/faq.pl?AnySizeDesign) entry at All My FAQs (http://www.allmyfaqs.com/faq.pl?HomePage) might be useful.

Mike

mcpalmer
04-18-2005, 11:10 AM
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.

mwinter
04-18-2005, 02:25 PM
I still can't seem to get div elements to layout horizontally though. elements seem to naturally lay out vertically one below the other.Block-level elements like div have an implicit line break following them. You can surpress this through the CSS display property by specifying a value of inline, which would make the element behave like span.


i used float:left to get a horizontal layout but it seemed buggy.There are many rendering errors that relate to floating. Care to show an example?


Of course, i could use layersI hate that word! :mad: It's one of those typically gimmicky words companies (Macromedia in this instance, I believe) roll out despite being inferior to existing alternatives.

It might be common to assume that a positioned div is a "layer", however any element can be positioned and so referred to using the same name.


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.Positioning elements isn't a bad thing to do in itself, but most attempts result in documents that only render in large monitors without horizontal scrollbars[1]. That's why I qualified with "positioning using pixels", which are the main offenders. If you can use positioning to create a fluid layout, then go with it. Floating tends to be easier due to how the document will reflow automatically.

Mike


[1] Granted, my attempt isn't comfortable in much less than 800x600, but that's the problem with side bars and wide images. An alternative style sheet that displays the section navigation horizontally is one solution.

mcpalmer
04-19-2005, 11:08 AM
Yes, a layer is a pixel positioned div tag with z-depth value, but its just a name mate, calm down! :)

Ok, i'll look at the inline css display property for horizontal div. Thanks. I really should read a book on all this stuff and stop wasting your time! :)

mcpalmer
04-19-2005, 11:35 AM
mwinter, i would really appreciate a bit of sample code for inline if you have it. I'm trying to display some text between 2 images but can't get it to work. Here is a code snippet:


<div style="display:inline; width:660px; height:148px; margin-top:4px;">
<div style="height:148px; display:inline;"><img src="images/com_sbtitle.gif"></div>
<div class="imagetext_s" style="display:inline; width:300px; height:132px; margin-top:8px; margin-bottom:8px; margin-left:8px; margin-right:8px;">
weeks. He added: "Rio cannot see himself playing for another club and I can assure everyone that Chelsea is not on the agenda. They already have two fantastic central defenders.
"He is ready to go a long way to make sure he stays at United but everybody has to give a little. It's called negotiation.
"We are focusing on staying at United and we hope very, very much to conclude an agreement in the next couple of weeks.
He added: "Rio cannot see himself
</div>
<div style="height:148px; display:inline;"><img src="images/com_sbtitle.gif"></div>
</div>

Elements still display down the page. grrr

mwinter
04-19-2005, 08:28 PM
Yes, a layer is a pixel positioned div tag with z-depth value, but its just a name mate, calm down! :)It's a pet peeve. I hate the unnecessary dumbing-down of terminology, particularly just for marketing purposes.

A similar one is 'folder'. What the heck is wrong with 'directory'? The concept of folders still needs explaining to users, so I fail to see why a new term needs to be used in place of one that has probably existed since the conception of hierarchical file systems. You'd give the same explanation, but with a consistent, universal name.

Getting back to "layers", I feel there's a more important reason to avoid that term and its assumed meaning.

In the rush to be seen as "progressive", authors are moving to CSS without understanding how to use it, nor even how to write HTML correctly. The markup you posted is a convenient example of what I mean. In replace of "tag soup" - badly written, malformed markup - you've posted "div soup" that is just as unstructured. Rather than the one containing div element necessary, you've used four. The images don't need to be placed within div elements to be manipulated, which goes back to a previous point: any element can be a "layer".

How WYSIWYG software generates layouts merely encourages this form of markup, creating inflexible layouts and less than accessible sites.


I really should read a book on all this stuff and stop wasting your time! :)I don't know if there are any decent books that would cover authoring properly. I've never read any Web development books, so I certainly couldn't recommend one.


Here is a code snippetJust so you know, you cannot set the height or width of non-replaced inline elements. Images and form controls are examples of replaced elements as they have intrinsic dimensions. Most other elements, such as span elements, are non-replaced elements and form their dimensions from their surroundings.

Anyway:


#sandwich {
margin-top: 0.5em;
width: 60em;
}
#sandwich p {
margin: 0 180px;
}

#sandwich-left {
float: left;
width: xpx;
}
#sandwich-right {
float: right;
width: xpx;
}
<div id="sandwich">
<img id="sandwich-left" alt="" src="images/com_sbtitle.gif">
<img id="sandwich-right" alt="" src="images/com_sbtitle.gif">
<p>He added: &#38;#8220;Rio cannot see himself playing for another club and I
can assure everyone that Chelsea is not on the agenda. They already have
two fantastic central defenders.</p>
<p>&#38;#8220;He is ready to go a long way to make sure he stays at United but
everybody has to give a little. It&#38;#8217;s called negotiation.<p>
<p>&#38;#8220;We are focusing on staying at United and we hope very, very much
to conclude an agreement in the next couple of weeks.&#38;#8221;</p>
</div>
You'll need to set the widths of the images in the two floating rules, and you might have to adjust the margins of the paragraphs. If you're concerned about IE4, you'll need to hide the margins from it. NN4 is a lost cause (again, if you care).

Mike

mcpalmer
04-21-2005, 11:01 AM
ok, thanks, that makes things a lot clearer