IE 5 Mac mess

@suppafreakMar 20.2005

I have rebuilt the site from tables to CSS.

The site is ~~[URL=http://www.v-t-d.com]~~www.v-t-d.com[/URL]

While redoing it I spent majority of the time making sure it works in FireFox and Mozilla.

So at this point the site appears as it should on latest FireFox, Mozilla and IE 6, all on Windows environment.

However, it is a huge mess in the IE 5 for Macs. The menus are not inline and the content is out side of the box.

If anybody using Macs or if you are CSS guru please looked it and tell me how can this be corrected? My next project is to create a site that mostly will be viewed on Macs.

Thanks.

to post a comment

CSS

5 Comments(s) _↴

@FantatierMar 20.2005 — #well im still of the opinion that the mac IE users are soo little in numbers to ignore :p

that is obviously not a very professional answer, nor the one you where looking for, but well just my opinion

@suppafreakauthorMar 20.2005 — #any help at all, please.

@toicontienMar 21.2005 — #Since I don't have a mac in front of me, I can't give you specific answers, however I have spent a considerable amount of time trouble-shooting layouts in IE5-Mac. Here are some known bugs:

1) It incorrectly and irreversibly inherits the "clear" property in CSS. All child elements of a cleared element will also inherit the clear property.

<i>
 </i>.
 .
 .
 #box {
 clear: both;
 }
 
 #foo {
 float: left;
 }
 
 #bar {
 float: right;
 }
 --&gt;
 &lt;/style&gt;
 .
 .
 .
 &lt;body&gt;
 &lt;div id="box"&gt;
 &lt;div id="foo"&gt;&lt;/div&gt;
 &lt;div id="bar"&gt;&lt;/div&gt;
 &lt;/div&gt;

In the above example, #foo and #bar have clear: both; applied to them because their container, #box, has that CSS property set. Therefore #foo and #bar will not float side-by-side.

2) Floated elements take up the max width available if they contain block elements that do not have a width set.

3) Floats do not "float" above block elements. They get cut off. Check out this page for more info on IE5-Mac problems: http://www.positioniseverything.net/explorer/floatmodel.html

Bottom line: If you don't design sites professionally and you do it just for yourself, don't worry about IE5-Mac. If you are doing it professionally, invest in a Macintosh. The $1,000 to $2000 you'll spend is tax deductible (At least in the USA).

@suppafreakauthorMar 21.2005 — #This is a code from the page.

How does it affect me? What happens is the Bodyblock is the outside of the Outer. Also the menus are not horizontal, but vertical in the middle of the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<link href="vtd_presentation.css" rel="stylesheet" type="text/css">

<link href="vtd_menu.css" rel="stylesheet" type="text/css">

<style type="text/css">



</style>

</head>

<body>

<div id="outer">

<div id="hdr" align="center">

<div id="menu">

<ul>

<li><a href="http://www.v-t-d.com/home.html">HOME</a></li>

<li><a href="http://www.v-t-d.com/info.html">INFO</a></li>

<li><a href="http://www.v-t-d.com/packages.html">PACKAGES</a></li>

<li><a href="http://www.v-t-d.com/whydvd.html">WHY DVD</a></li>

<li><a href="http://www.v-t-d.com/legal.html">LEGAL</a></li>

<li><a href="http://www.v-t-d.com/contact.html">CONTACT</a></li>

</ul>

</div>

</div>

<div id="bodyblock" align="center">

<div id="cont">

<p>Did you know your videotapes have an expiration date? With the convenience and popularity of videotapes, most of

us think our special video recordings are permanent. But in fact they begin to lose information immediately after

being recorded. We preserve your irreplaceable videos by converting them to DVD.</p>

<p>Imagine this.... You pop the videotape of your wedding or the tape of your child's first steps into the VCR. At best,

the colors and images have faded and the picture is a little snowy. Or worse, the picture is unwatchable and the

sound garbled. It's not a matter of if your tape will fail but when. Your personal videotapes will not be playable

within 20 years, most likely closer to 10-15 years; but if you wait that long to preserve your videos, they won't be

worth saving anyhow, because of the significant loss of video quality.</p>

<p>At Video to DVD, we professionally transfer up to 2 hours of your video onto a high-quality genuine DVD. Unlike

some other services, we do NOT transfer onto cheap video CDs (VCDs) or compromise the video quality by lowering

the bitrate to try to squeeze too much onto the disc.</p>

<h4>We transfer all types of videos including:</h4>

<ul>

<li>Wedding</li>

<li>Anniversaries</li>

<li>Birthdays</li>

<li>Holidays and Vacations</li>

<li>Children's plays</li>

<li>Baby's first steps</li>

<li>Home movies and any other footage you might have</li>

</ul>

<h4>For businesses we transfer:</h4>

<ul>

<li>Training videos</li>

<li>Corporate videos and much more</li>

</ul>

<p>Additionally, we use the newer DVD technologies and professional authoring software to produce the best possible

DVD for you. Our discs are compatible with nearly every DVD player on the market. Don't allow your memories to

fade away over the years. Convert your videos to DVD and enjoy the benefits that DVD has to offer. Imagine your

video on DVD!</p>

<br>

</div>

</div>

<div id="ftr">

<div align="center"><img src="http://counters.honesty.com/cgi-bin/honesty-counter.cgi?df=gen.8948688.00000" alt="counter">

<h5>copyright (c) 2005 www.v-t-d.com</h5>

</div>

</div>

</div>

</body>

</html>

@suppafreakauthorMar 22.2005 — #Screw IE 5.

Can anybody check the website on the Safari browser and post some screen shots. If posible the contact and packages pages.

Thanks.

Also in #CSS _↴

shifting group of images horizontally on click (no swap/hide)select box styling Weird element rendering issue.

Success!

Help @suppafreak spread the word by sharing this article on Twitter...

Tweet This

IE 5 Mac mess

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE 5 Mac mess

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴