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

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Tim

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

    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.jp g );
    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

    #2
    Re: IE 5.2 for Mac CSS float problem (works when border enabled)...

    Tim wrote:[color=blue]
    >
    > 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[/color]

    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.

    Comment

    • Leonard Blaisdell

      #3
      Re: IE 5.2 for Mac CSS float problem (works when border enabled)...

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

      [color=blue]
      > 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.[/color]

      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/

      Comment

      • Jul

        #4
        Re: IE 5.2 for Mac CSS float problem (works when border enabled)...

        Dans son message précédent, Tim a écrit :[color=blue]
        > 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.jp g );
        > 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[/color]

        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

        Comment

        Working...