24 replies [Last post]
Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Hi there,

I'm currently creating an XHTML/CSS website. What I've made so far looks fine on a PC with Internet Explorer 6. All of the HTML code validates as XHTML 1.0 Transitional. And all of the CSS code validates.

Apparently, though, it looks a total mess on a Mac with Internet Explorer 5. Could someone test it for me who has a Mac and IE5, and see how it looks, and perhaps offer some suggestions on how to fix it?

Many thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Website Looks Wrong On Mac IE5

To be frank, IE5 Mac is [email protected] Nothing works as it should. Look for hacks to fix it. The tantek hack, Tan hack and so forth.

Verschwindende wrote:
  • CSS doesn't make pies

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi thepineapplehead,

Yes, I've been reading that IE5 on the Mac is crap. It was discontinued in 2003. So, what's the best browser for the Mac? What's the most popular?

If I apply "hacks" to my CSS, won't this screw up the way the site looks on a PC with IE6? I don't even know what "hacks" I should apply. It's all so complicated.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

You two are obviously PC users. EVERY browser has it's downfalls.

Alan, I believe the intended layout fails in Safari as well as IE/Mac. Are you trying to put the 4 img in a single column or 2 rows of 2? I'm guessing the two rows but I'm viewing single column. I think the problem lies within the #content {width: 391px;}. You note that it's 1 px larger than it should be, but for two .homephoto divs side by side it would need to be 400px. IE PC has the CSS box model incorrect, and hence, probably shows what your looking for. The margin, border, and padding should be added to the width, but IE PC takes the overall width and subtracts the margin, border, and padding.

I'm no expert on this, so I hope this helps.
Chris

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi Wolfcry,

Thank you very much for your reply.

I want the 4 images on the Home page to be arranged in 2 rows of 2.

So, I'm using the incorrect width for my #content div? According to what you said it should be 10 + 190 + 10 + 190 + 10 pixels, so that's 410 pixels wide. Correct? So, do you think that will solve the problem? And will that work on all browsers?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

As far as I know, you only need 400px. Each .homephoto is 190px wide with 10px right margin. That's 400 total. You don't account for the padding in the #content because the browser (all but ie) take that into account when rendering.

I just tested it here and 400 works. Give it a try, and I'll let you know what I see in Safari and IE/Mac

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi wolfcry911,

I have changed the width of the content div to 400px:

#content {
OFFbackground-color: #00CC00;
overflow: hidden;
padding: 10px;
float: left;
width: 400px; /*should be 390px, and display as 410px*/
}

Despite this change, the website still looks correct in Internet Explorer 6. But how does it look on a Mac with IE5?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

Well, it looks right in Safari now, but still not in IE/Mac. Here are some screenshots.

I can look at this more later tonight. For now, try 410px.

I'm not sure how the top is looking in IE6 - is it the same in Safari?

*links deleted*

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

oops, messed up the image tags. But you can copy/ paste....

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi Wolfcry,

Ok, well I've changed the width to 410px, as you requested:

#content {
OFFbackground-color: #00CC00;
overflow: hidden;
padding: 10px;
float: left;
width: 410px; /*should be 390px, and display as 410px*/
}

I looked at your 2 screenshots. The Safari one looked almost like how it does in IE6 on my PC. The only difference was the space, between the title "home" and 4 images below, was too small.

Here's how the home page looks in IE6 on my PC:

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

okay,

Unfortunately that didn't work. From what I'm reading, it's the way IE/Mac handles floats. It tries to push them left then up, and not up then left like other browsers do. There's question as to what the specs actually are. IE/Mac may actually have it right - but that's another story.

I have one more suggestion. Don't float the .homephoto at all. They should still line up and wrap given the container they're in.

Sorry I couldn't be of more help. Oh, one other thing - I find it helpful to change the backgrounds of the different divs so I can see what's happening. Actually, it looks like you had done that too, and then shut them off...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

Alan,

As you can see, I'm not an expert in CSS. I have a test code here imitating your layout - and it works in both Safari and IE. I'm not sure why yours won't. I'm still playing around with it...

I had yet another idea however. Why not create a second .homephoto class and float it right? Apply it to the second and fourth image. I tested that here on this end and it works as well.

Hey, I just found the difference between my test page and your page. I applied the .homephoto class to divs not images (I simply had divs with a different background to imitate your img). So if the divs float correctly simply wrap you images in divs and move the class from img to div. And I believe you can return the #content width to 400px.

Hope this does it :!:

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 16 years 3 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

Website Looks Wrong On Mac IE5

firefox doesn't appear to be showing the boxes beside each other. it appears to be fine in IE and safari on my machine.

my site has a page that has smaller boxes floating beside each other and as the page gets wider more boxes float on the side, otehrwise they get pushed down.
http://www.waycoolwebdesign.com/website-design/gallery.asp

there is also an article on that site talking about techniques for hacking for MacIE5 which i really wouldn't suggets doing unless you know your audience will have a decent percewntage of Mac viewers. It's just too time consuming to get ROI out of it. Bascially you can use a hack to add another style sheet into your page that only MacIE5 will read, so u could basically totally change your CSS just for IE5Mac.

the mac import hack is "@import("macie.css");"

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi wolfcry911,

I've just tried out one of your ideas. I've turned the "float: left;" off for the .homephoto and .thumbnail classes.

So, how does the site look now, in IE5 on Mac?

If that doesn't work, I'll try your other suggestion, which was to move the class styles from the images, to new DIVs which wrap around the images.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

Quote:

I've just tried out one of your ideas. I've turned the "float: left;" off for the .homephoto and .thumbnail classes.

So, how does the site look now, in IE5 on Mac?

If that doesn't work, I'll try your other suggestion, which was to move the class styles from the images, to new DIVs which wrap around the images.

Alan, it looks as though it could work. The problem is IE isn't accepting the <p> after the heading img. So the first .homephoto img is sitting just to the right of the 'home' heading. I made the heading longer (>200) so that the img is forced to the next line. This works, but brings up another problem. The heading is realtively positioned and sits atop the first image. Can you eliminate the positioning and pad the top of the content div instead or increase the height of the heading? Or wrap all the .homephoto img in a single div?

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi wolfcry911,

Ok, I removed the relative positioning of the heading, and also of the logo on the left side of the page. What I did was add a top margin to the entire container div.

So, how does it look now? Is the whole IE5 on a Mac problem any nearing being solved?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

Getting closer, but the home heading needs to be wider than half the content div so that the next img doesn't line up to the right of it. Or display: block the heading. In either case, there will probably be a space problem between the heading and pictures which can be corrected with margin bottom on the heading or extra height in the heading.

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi Wolfcry,

Ok, I've made more changes, following your advice. I added display: block; to both the id="heading" and logo="heading".

So, how does it look now? Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Website Looks Wrong On Mac IE5

I think you got it Alan,

The only problem is the spacing between the headings and images below. Heres a screenshot

I won't be able to look at it again until tomorrow...

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi WolfCry911,

I removed all of the <p></p> tags, and replaced them with margin-bottoms on the logo and heading images. So, the spacing between the heading and everything below should be fixed now.

Did you go to the "lifestyle" page, or any of the other pages, to check that they look alright? They all share the same stylesheet file, so I assume they're alright.

There's just one little thing that I'm still not happy about, when viewing the site with IE6 on a PC. I've deliberately changed the stylesheet to demonstrate this problem.

Each thumbnail on the "lifestyle" page has a class called "thumbnail" assigned to it. As you can see, the bottom and right margins are set to 0px, yet in IE6 they have appear as 3px. So, there's this mysterious grid of 3px around all the thumbnails. I don't know why it's happening. Have you any idea?

.thumbnail {
background-color: #575757;
border: none;
height: 90px;
margin-bottom: 0px;
margin-right: 0px;
width: 90px;
}

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 16 years 3 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

Website Looks Wrong On Mac IE5

Alan wrote:
So, there's this mysterious grid of 3px around all the thumbnails. I don't know why it's happening. Have you any idea?

maybe this helps?
http://www.positioniseverything.net/explorer/threepxtest.html

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi TimeBandit,

I read that link you gave me, but woah, it's quite technical. If I added this code to my .thumbnail class, would it solve the problem? Or do I need more code, to control how things display in IE5 on the Mac?

.thumbnail {
margin: 0 -3px;
ma\rgin: 0;
}

Actually, I just tried adding that code, and it didn't do anything. The thing is, it's designed for floated images, isn't it? But my thumbnails aren't floated.

So, what code do I need to use, to stop the 3px margins on images that aren't floated?

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 16 years 3 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

Website Looks Wrong On Mac IE5

Alan wrote:
I read that link you gave me, but woah, it's quite technical. If I added this code to my .thumbnail class, would it solve the problem? Or do I need more code, to control how things display in IE5 on the Mac?

not sure. I don't personally use all that is used on that page, i just thought maybe you could glean something from it. I personally code a site for FireFox then I go back to whatever is not displaying well in IE and I use the "* html" hack to change the CSS for IE-only browsers.

There are a couple articles on my site that talk about this process, hacking for IE then (un)hacking for MacIE.

It's very tough for me personally to just look at a bunch of code and be able to say "yes this will fix your problem". Can you zip all your html, images, and css for this page and post it somewhere?

Alan
Offline
Enthusiast
Last seen: 16 years 49 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Website Looks Wrong On Mac IE5

Hi TimeBandit,

Go to the website, using the link in the first post of this thread. Then go to the "lifestyle" page. There are a collection of JPEG thumbnail images that have a class called .thumbnail assigned to them.

Basically, I want a 10px margin to separate all of the thumbnails, so margin-right: 10px, and margin-bottom: 10px.

The problem is, in IE6 on the PC, there is always a 3px margin, even when the margins are set to 0px. This is something to do with me not using floats. I'm intentionally avoiding using floats, so that the page looks alright in IE5 on the Mac.

So, want a way of getting rid of the mysterious 3px, that works in IE6 on the PC, as well as IE5 on the Mac.

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 16 years 3 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

Website Looks Wrong On Mac IE5

would like to help, post a zip.