Float layout problem

Discussion in 'HTML' started by Jens Lenge, Oct 20, 2004.

  1. Jens Lenge

    Jens Lenge Guest

    I want to transfer a small table-based Layout to a CSS-based one. The task
    is quite simple, just have a paragraph of text appear to the right of an
    image with a fixed left margin. The result should work with as many browsers
    as possible (and has to work with Internet Explorer 6).

    Old version (table-based):
    --------------------------------
    <table>
    <tr>
    <td align="center" width="120"> <img src="image.jpg"> </td>
    <td align="left" ... (long text paragraph here)... </td>
    </tr>
    </table>

    My CSS approch:
    --------------------
    <div style="float:left; text-align:center; width:120px">
    <img src="image.jpg">
    </div>
    <divstyle="text-align:left; margin-left:120px">
    .... (long text paragraph here)...
    </div>

    When displayed with IE6, the text div has the correct position, it is
    exactly right of the image div without any gap and has the same upper
    position as the image div. The problem is that the text inside the div has a
    slightly higher indent where it is *besides* the image div than it has
    *below* the image div.

    Is this normal or just an IE6 bug? How can I fix this (so that it works even
    with IE6)?

    Jens
     
    Jens Lenge, Oct 20, 2004
    #1
    1. Advertising

  2. Jens Lenge

    brucie Guest

    In alt.html Jens Lenge said:

    > I want to transfer a small table-based Layout to a CSS-based one.


    <looks around for URL/>


    --


    v o i c e s
     
    brucie, Oct 20, 2004
    #2
    1. Advertising

  3. Jens Lenge

    Jens Lenge Guest

    brucie wrote:

    > <looks around for URL/>


    Sorry, its not available on the web. I've stripped down the code to a very
    small document and attached it to this posting.

    Jens
     
    Jens Lenge, Oct 20, 2004
    #3
  4. Jens Lenge

    brucie Guest

    In alt.html Jens Lenge said:

    >> <looks around for URL/>


    > Sorry, its not available on the web.


    upload it somewhere

    > I've stripped down the code to a very
    > small document and attached it to this posting.


    do not post attachments to non binary groups. i'm surprised my
    newsserver even let it through.

    and i'm not going to open an unknown attachment.


    --


    v o i c e s
     
    brucie, Oct 20, 2004
    #4
  5. Jens Lenge

    Jens Lenge Guest

    > upload it somewhere

    I would already have if I could, but I have no access to any webspace right
    now.

    > do not post attachments to non binary groups.


    I know this rule, but thought this is just to limit sizes and traffic,
    that's why I made it so small.
    Sorry if you feel offended, I will not post any further attachments.

    > and i'm not going to open an unknown attachment.


    Ok, I probably also wouldn't.
    As I cannot upload, would you please consider having a look at the code
    itself?
    Here is the attachment as plain text; you could just copy+paste it to a text
    file to open it.

    In the CSS approach, the first three lines have a little mor indent than the
    last three.

    ---

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>MyTitle</title>
    </head>
    <body>

    <h1>Table-based:</h1>

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="120" align="center" valign="top" bgcolor="#CCCCCC">
    (image)<br>(image)<br>(image)
    </td>
    <td align="left" valign="top" bgcolor="#CCFFCC">
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    </td>
    </tr>
    </table>

    <h1>CSS:</h1>

    <div style="float:left; text-align:center; width:120px;
    background-color:#CCCCCC">
    (image)<br>(image)<br>(image)
    </div>
    <div style="text-align:left; margin-left:120px; background-color:#CCFFCC">
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    This is a long text paragraph. This is a long text paragraph.<br>
    </div>

    </body>
    </html>
     
    Jens Lenge, Oct 20, 2004
    #5
  6. Jens Lenge

    brucie Guest

    In alt.html Jens Lenge said:

    >> and i'm not going to open an unknown attachment.


    > Ok, I probably also wouldn't.


    if i thought it had a chance of being porn i would have risked it.

    > As I cannot upload, would you please consider having a look at the code
    > itself?


    <sigh/> i'm having motivation issues today

    http://moreshit.usenetshit.info/image-floated-left-thingy.shit

    --


    v o i c e s
     
    brucie, Oct 20, 2004
    #6
  7. Jens Lenge

    Jens Lenge Guest

    > if i thought it had a chance of being porn i would have risked it.

    Uuups, didn't I tell is has some porn included? ;o)

    > http://moreshit.usenetshit.info/image-floated-left-thingy.shit


    I just figured out what makes the difference:
    If the element to the left is an <img>, then it works.
    If it is a <div > or <p> instead, then the error that I described occurs.

    How can I solve this if I need to have may text float right of an <div> or
    <p>?

    Jens
     
    Jens Lenge, Oct 20, 2004
    #7
  8. Jens Lenge

    brucie Guest

    In alt.html Jens Lenge said:

    >> http://moreshit.usenetshit.info/image-floated-left-thingy.shit


    > I just figured out what makes the difference:
    > If the element to the left is an <img>, then it works.
    > If it is a <div > or <p> instead, then the error that I described occurs.
    > How can I solve this if I need to have may text float right of an <div> or
    > <p>?


    change p{margin-left:110px;} to p{margin-right:110px;}

    and

    img{float:left;} to img{float:right;}

    easy peasy:
    http://moreshit.usenetshit.info/image-floated-right-thingy.shit



    --


    v o i c e s
     
    brucie, Oct 20, 2004
    #8
  9. Jens Lenge

    rf Guest

    rf, Oct 20, 2004
    #9
  10. Jens Lenge

    Jens Lenge Guest

    Jens Lenge, Oct 20, 2004
    #10
  11. Jens Lenge

    Henry Guest

    Henry, Oct 21, 2004
    #11
  12. Jens Lenge

    Henry Guest

    Henry wrote:

    > brucie wrote:
    >
    >
    >> easy peasy:
    >> http://moreshit.usenetshit.info/image-floated-right-thingy.shit

    >
    >
    >
    > You wish...
    >
    > FWIW in IE6 the image is to big in both examples.
    >
    >
    > ;)



    What's wrong with that one?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>New Page 1</title>
    <style>
    </style>
    </head>

    <body>

    <table border="1" width="98%" id="table1" bordercolorlight="#000000"
    cellspacing="0" cellpadding="0" bordercolordark="#000000">
    <tr>
    <td width="980">
    <img border="0" src="02-lge.png" width="100" height="100" align="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
    erat volutpat. Nulla ac purus at justo tincidunt semper. Proin
    adipiscing. Nullam at mauris. Fusce at quam. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Aliquam erat volutpat. Morbi at nunc ut ligula rutrum malesuada.
    Pellentesque varius est sed purus. Ut diam lacus, mattis nec, accumsan
    ac, pulvinar eu, eros. Cras ipsum. Aliquam augue.</p></td>
    </tr>
    </table>
    </body>
    </html>

    Size of that is 931 bytes. Is compatible with nearly all browsers.

    Size of brucie page is 990 and has a problem in IE6.

    I know that I'm the pain in ass but I have to understand properly
    something before I would use.

    brucie...

    you need sex urgently!!!

    ;)
     
    Henry, Oct 21, 2004
    #12
  13. Jens Lenge

    Henry Guest

    Sorry, I had title to long...

    ;)

    If I would use brucie' title, the size of the file is 909 bytes.

    :-O
     
    Henry, Oct 21, 2004
    #13
  14. Jens Lenge

    Karl Core Guest

    "Henry" <> wrote in message
    news:41770896$...
    > Henry wrote:
    >


    > <table border="1" width="98%" id="table1" bordercolorlight="#000000"
    > cellspacing="0" cellpadding="0" bordercolordark="#000000">


    Please don't ever create another web page again.

    -Karl
     
    Karl Core, Oct 21, 2004
    #14
  15. Jens Lenge

    Henry Guest

    Karl Core wrote:

    > "Henry" <> wrote in message
    > news:41770896$...
    >
    >>Henry wrote:
    >>

    >
    >
    >><table border="1" width="98%" id="table1" bordercolorlight="#000000"
    >>cellspacing="0" cellpadding="0" bordercolordark="#000000">

    >
    >
    > Please don't ever create another web page again.
    >
    > -Karl



    Why?


    ;P


    I'm strugling with css for some time and more I work with tables and
    css, more I hate damn thingy.

    Hack here, fix here, script here...

    If works - don't fix it!

    ;)
     
    Henry, Oct 21, 2004
    #15
  16. Jens Lenge

    brucie Guest

    brucie, Oct 21, 2004
    #16
  17. Jens Lenge

    brucie Guest

    In alt.html Henry said:

    > Size of brucie page is 990


    my page (right align) is 586 bytes html and 555 bytes image for a total
    of 1141 bytes, under 1k. i don't know where you got 990 bytes from.

    > and has a problem in IE6.


    what problem?

    > you need sex urgently!!!


    yes

    --


    v o i c e s
     
    brucie, Oct 21, 2004
    #17
  18. Jens Lenge

    Henry Guest

    brucie wrote:

    > In alt.html Henry said:
    >
    >
    >>>easy peasy:
    >>>http://moreshit.usenetshit.info/image-floated-right-thingy.shit

    >
    >
    >>You wish...
    >>FWIW in IE6 the image is to big in both examples.

    >
    >
    > too big for what?




    The image goes over box border in my IE6 with Service Pack 2

    My screen res is 1024x768.

    :(

    In Firefox looks perfect.
     
    Henry, Oct 21, 2004
    #18
  19. Jens Lenge

    brucie Guest

    In alt.html Henry said:

    >>>>easy peasy:
    >>>>http://moreshit.usenetshit.info/image-floated-right-thingy.shit


    >>>You wish...
    >>>FWIW in IE6 the image is to big in both examples.


    >> too big for what?


    > The image goes over box border in my IE6 with Service Pack 2


    just realized what you were talking about, its fixed now

    > My screen res is 1024x768.


    irrelevant

    > In Firefox looks perfect.


    because FF and other modern browsers support min-height. a hack is
    needed for IE.


    --


    v o i c e s
     
    brucie, Oct 21, 2004
    #19
  20. Jens Lenge

    brucie Guest

    In alt.html brucie said:

    > 1141 bytes, under 1k.


    i'd just like to clarify that the above is correct for my planet


    --


    v o i c e s
     
    brucie, Oct 21, 2004
    #20
    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. Rick Spiewak
    Replies:
    3
    Views:
    3,217
    Rick Spiewak
    Aug 26, 2003
  2. RobertH
    Replies:
    1
    Views:
    759
    Steve C. Orr [MVP, MCSD]
    Nov 4, 2003
  3. Replies:
    1
    Views:
    641
    John Timney \(MVP\)
    Jun 19, 2006
  4. bd
    Replies:
    0
    Views:
    663
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,648
    James Kanze
    Oct 8, 2009
Loading...

Share This Page