IE 5.2 for Mac CSS float problem (works when border enabled)...

[Tim]

hi,

I have some code that works in all web browsers except IE 5.2 for Mac
(heard this one before? :-)

the CSS code basically creates two id's, one is a container for the
other. eg:

CSS Code:
....
#main
{
background-image: url(../images/background_2.jpg );
width: 550px;
height: 390px;
margin: 30px auto 0 auto;
padding: 0;
border: 0px solid orange;

}

#main_scroll
{
overflow: auto;
float: left;
width: 550px;
max-width: 550px;
height: 310px;
margin: 40px 0 0 0;
padding: 0;
border: 0px solid orange;
}

....
HTML Code:
....
<div id="main">
<div id="main_scroll">
main stuff...
</div>
</div>
....

basically, main creates a box 550px wide and 390px high, then inside
this box should sit main_scroll, which will contain information that
may need to be scrolled...

This code works on all browsers, except IE for Mac AND works on IE for
Mac when I set "border: 1px..." on main_scroll. I don't understand why
IE for Mac doesn't position this correctly when there is no border - it

simply lines up the main_scroll box with the main box - instead of
having it sit inside the main box, 40px down...

thanks in advance.
Tim

[kchayka]

Tim wrote:

I have some code that works in all web browsers except IE 5.2 for Mac
[snip code]

I don't understand why
IE for Mac doesn't position this correctly when there is no border

MacIE has rather buggy overflow behavior. You're probably lucky it
renders anything like you want under any conditions.

I suggest you either set the border property to appease MacIE, or forget
about MacIE altogether and hide those rules from it. @media rules do
that easily, as does the escaped comment hack. Google for more info.

BTW, MacIE is a dead browser. There isn't much benefit in bending over
backwards for it unless you have a large MacOS user base. OSX users tend
to use Safari or some other browser. As long as the page is still
usable, you're covered.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Leonard Blaisdell]

In article <3k************@individual.net>, kchayka <us****@c-net.us>
wrote:

BTW, MacIE is a dead browser. There isn't much benefit in bending over
backwards for it unless you have a large MacOS user base. OSX users tend
to use Safari or some other browser. As long as the page is still
usable, you're covered.

Amen. I tend to embrace dead technology till the bitter end. I lived
with IE5 and 640x480 resolution till early March when I switched to
Safari. Well, I wasn't quite that dim. I used Mozilla as my main
browser, but it hadn't been updated for OS9 users for ages. I think I
was the last person on earth to lease an AT&T phone.

leo

--
<http://web0.greatbasin.net/~leo/

[Jul]

Dans son message précédent, Tim a écrit :

hi,

I have some code that works in all web browsers except IE 5.2 for Mac
(heard this one before? :-)

the CSS code basically creates two id's, one is a container for the
other. eg:

CSS Code:
...
#main
{
background-image: url(../images/background_2.jpg );
width: 550px;
height: 390px;
margin: 30px auto 0 auto;
padding: 0;
border: 0px solid orange;

}

#main_scroll
{
overflow: auto;
float: left;
width: 550px;
max-width: 550px;
height: 310px;
margin: 40px 0 0 0;
padding: 0;
border: 0px solid orange;
}

...
HTML Code:
...
<div id="main">
<div id="main_scroll">
main stuff...
</div>
</div>
...

basically, main creates a box 550px wide and 390px high, then inside
this box should sit main_scroll, which will contain information that
may need to be scrolled...

This code works on all browsers, except IE for Mac AND works on IE for
Mac when I set "border: 1px..." on main_scroll. I don't understand why
IE for Mac doesn't position this correctly when there is no border - it

simply lines up the main_scroll box with the main box - instead of
having it sit inside the main box, 40px down...

thanks in advance.
Tim

Well, there is an other property wich has the same effect as setting
the border to something true in this case, it is the padding property.
Try to set it to 1px, and you'll have all it working. (this also
resolves other problems, try it whenever you can.
For the padding not to be visible, I once tryed to set it to 0.1px...
it worked as I expected on some browsers but still buggy on others.

--
Jul... réapparru comme par enchantement