Layout problem in IE5.1/Mac

[Nico Schuyt]

Site: http://www.debedweters.nl looks good in IE, Mozilla, Lynx and Opera
but horrific in IE5.1 on Mac: http://www.nicoschuyt.nl/test/problem_mac.jpg
HTML and CSS (view-source:http://www.debedweters.nl/layout.css) both
validate.

Problem is I can't test it myself. Anyone a suggestion for a solution??

Thanks, Nico

 

[brucie]

Site: http://www.debedweters.nl looks good in IE, Mozilla, Lynx and Opera
but horrific in IE5.1 on Mac:

IE6 is over 2 years old, that makes it ancient. any version prior to
that is prehistoric. if you're so concerned with how prehistoric
browsers render modern pages then what about NS2 or opera3.6?

you can only do so much to try to keep everyone happy, supporting
prehistoric browsers with anything other than plain text is way beyond
what could be considered reasonable expectations of a site author.

 

[brucie]

Site: http://www.debedweters.nl looks good in IE, Mozilla, Lynx and Opera
but horrific in IE5.1 on Mac: http://www.nicoschuyt.nl/test/problem_mac.jpg
HTML and CSS (view-source:http://www.debedweters.nl/layout.css) both
validate.

looks the same in opera 7.2 (win) as it does in your mac screencap.
cut out <div class="menu"> </div> and everything between and paste it
back in right after the </div> that has the "end of content" comment.

 

[brucie]

looks the same in opera 7.2 (win) as it does in your mac screencap.
cut out <div class="menu"> </div> and everything between and paste it
back in right after the </div> that has the "end of content" comment.

forgot a bit.

instead of floating elements left and right in future an easier method
is to apply a margin to the main content and float the menu into that
margin.

#menu{width:20ex;float:left;border:1px solid green;}
#content{margin-left:21ex;border:1px solid red;}

<div id="menu"> <-- has 20ex width
menu<br>
menu<br>
menu<br>
</div>

<div id="content"> <-- has 21ex left margin that the 20ex menu floats into
content<br>
content<br>
content<br>
</div>

if you want the content to be physically first in the markup instead
of the menu:

body{margin:0;padding:8px;}
#content{margin-left:21ex;border:1px solid red;}
#menu{width:20ex;left:8px;top:8px;border:1px solid
green;position:absolute;}

<div id="content"> <-- same style as before. 21ex left margin
content<br>
content<br>
content<br>
</div>

<div id="menu"> <-- positioned rather than floated into the the left margin of the content <div>
menu<br>
menu<br>
menu<br>
</div>

if you want the menu to stay in one spot when scrolling change
absolute to fixed (not supported by IE)

 

[Nico Schuyt]

<solutions/advices for problem with rendering on Mac>

Thanks!!!!!
Nico

 

[Toby A Inkster]

IE6 is over 2 years old, that makes it ancient. any version prior to
that is prehistoric.

Except that there was no IE6 for Mac...

 

[Nico Schuyt]

Nico Schuyt wrote

looks the same in opera 7.2 (win) as it does in your mac screencap.

Strange, I upgraded from 7.11 tp 7.2 but it looks good:
http://www.nicoschuyt.nl/test/bedweters_o72.jpg

cut out <div class="menu"> </div> and everything between and paste it
back in right after the </div> that has the "end of content" comment.

So I did (http://www.debedweters.nl/index2.php). Result is slightly better:
http://www.nicoschuyt.nl/test/problem_mac2.jpg

instead of floating elements left and right in future an easier method
is to apply a margin to the main content and float the menu into that
margin.
#menu{width:20ex;float:left;border:1px solid green;}
#content{margin-left:21ex;border:1px solid red;}

Hey, that's an improvement, especially on font resize!
http://www.debedweters.nl/index3.php
But still not good on that bloody Mac/IE5.1:
http://www.nicoschuyt.nl/test/problem_mac3.jpg

Regards, Nico