DIVs floating to left display incorrect if IE4

Discussion in 'HTML' started by =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=, Oct 23, 2003.

  1. Hi all,
    did everone of you solve following problem:

    a couple of div ( or table or spans ... what ever ) styled float:left;
    display incorrect in ie4x. More specificly it doesnot warp to "next
    row", it continues on to right, so the browser gets scrollbar, insted
    of warping it.

    here is the very simple htmlCode:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style type="text/css">
    .floatLeft { float: left;}
    .tblStyle { float:left; border: inset 1px; }
    </style>
    </head>
    <body>
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    <br><br>
    <script type="text/javascript" language="JavaScript">
    <!--
    var i;

    for ( i=0;i<20;i++ )
    document.write('<table class="tblStyle" cellpadding="0"
    cellspacing="0"><tr><td><img src=".." width="100"
    height="100"></td></tr></table>');
    //-->
    </script>
    <br clear="left">
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    </body>
    </html>


    Does enyone know how make ie4 display it correctly or is there any
    other way how to display unknown count of objects sidebyside without
    using table?

    Thanks a lot. Tomas

    --------------------------------------------------------------
    Tomas; BEDNAR; | Web Programmer
    FG Forrest, a. s.
    , www.fg.cz
    Tel.: +420 222 242 204, +420 491 417 111
    Fax: +420 491 433 022
    --------------------------------------------------------------
    Creative technologies... for your success
    --------------------------------------------------------------
     
    =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=, Oct 23, 2003
    #1
    1. Advertising

  2. =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=

    Richard Guest

    Tomás Bednáø wrote:

    > Hi all,
    > did everone of you solve following problem:


    > a couple of div ( or table or spans ... what ever ) styled float:left;
    > display incorrect in ie4x. More specificly it doesnot warp to "next
    > row", it continues on to right, so the browser gets scrollbar, insted
    > of warping it.


    > here is the very simple htmlCode:


    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    > <html>
    > <head>
    > <title>Untitled</title>
    > <link rel="stylesheet" type="text/css" href="css/main.css">
    > <style type="text/css">
    > .floatLeft { float: left;}
    > .tblStyle { float:left; border: inset 1px; }
    > </style>
    > </head>
    > <body>
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode

    <br>><br>
    > <script type="text/javascript" language="JavaScript">
    > <!--
    > var i;


    > for ( i=0;i<20;i++ )
    > document.write('<table class="tblStyle" cellpadding="0"
    > cellspacing="0"><tr><td><img src=".." width="100"
    > height="100"></td></tr></table>');
    > //-->
    > </script>
    > <br clear="left">
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
    > </body>
    > </html>



    > Does enyone know how make ie4 display it correctly or is there any
    > other way how to display unknown count of objects sidebyside without
    > using table?


    > Thanks a lot. Tomas


    Just a friendly suggestion. Don't use tag attributes as class identifiers.
    ..floatleft {float:left;}
    Some browsers may not like that idea as an attribute should only be used
    where appropriate.
    Then, just to give one simple command like that you'd be better off with an
    inline style request.

    <div style="float:left;">

    or even

    <div class="sample" style="float:left;">

    In any programming language, it's a good idea not to use reserved words for
    variables or identifiers of any type other than for their intended purposes.
    you could possibly get away with "afloat" though.

    BTW, IE 4 was designed before CSS came into fashion so yes it's going to be
    a headache.

    The way I see it, if you're gonna surf in today's web, have the right tools.
     
    Richard, Oct 24, 2003
    #2
    1. Advertising

  3. Richard wrote:

    > Just a friendly suggestion. Don't use tag attributes as class identifiers.
    > .floatleft {float:left;}
    > Some browsers may not like that idea as an attribute should only be used
    > where appropriate.


    There is no browser that is going to care about a class named floatleft.

    > Then, just to give one simple command like that you'd be better off with an
    > inline style request.
    > <div style="float:left;">
    > or even
    > <div class="sample" style="float:left;">


    No! Inline styles are fine while you're first playing around with a
    layout, but once things are decided, use a proper style sheet -- this
    helps with cachability and aids in style/content seperation.

    > In any programming language, it's a good idea not to use reserved words
    > for variables or identifiers of any type other than for their intended
    > purposes.


    Lucky HTML isn't a programming language then.

    > BTW, IE 4 was designed before CSS came into fashion so yes it's going to
    > be a headache.


    IE 4 is a surprisingly capable browser and does remarkably well with CSS
    layouts (better than IE 5.x in my experience).

    As early as verison 3, Internet Explorer had some rudimentry CSS support.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
     
    Toby A Inkster, Oct 24, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SabMan
    Replies:
    2
    Views:
    116
    Lasse Reichstein Nielsen
    Dec 6, 2003
  2. buildmorelines

    copying a string to clipboard in IE4

    buildmorelines, Nov 25, 2004, in forum: Javascript
    Replies:
    4
    Views:
    106
    Michael Winter
    Nov 26, 2004
  3. Replies:
    4
    Views:
    256
  4. Dr John Stockton

    IE5/6, but not IE4, doing unexpected

    Dr John Stockton, Oct 14, 2005, in forum: Javascript
    Replies:
    20
    Views:
    248
    Dr John Stockton
    Oct 24, 2005
  5. Dr John Stockton

    Problem in IE6 but not IE4

    Dr John Stockton, Nov 12, 2005, in forum: Javascript
    Replies:
    9
    Views:
    130
    Dr John Stockton
    Nov 15, 2005
Loading...

Share This Page