IE6, Opera, NS8...7px gap in Text below image on float

Discussion in 'CSS' started by badlael, Feb 12, 2006.

0
  1. #1
    Yes, new to CSS and jazzed. Simple problem...I think. I wish to float an image left (eg. div id="box_1Flt") and have the text wrap around it. That part I think I've got down. My Q. is the white space between the bottom of the image and the text. When I view my code in Opera, NS8, and IE6 they all display a gap of approximately 7px. Any ideas on how to code this to a reasonable px ht would be appreciated. - The test page has 3 boxes left and 3 boxes right inside a container div.

    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>New & Crazy to CSS</title>
    <link href="/KHDWeb/sunday.css" rel="stylesheet" type="text/css">
    </head>

    <body>

    <div class="pgCntnr">

    <div id="lftCntnr">

    <div id="box_1">
    <div id="box_1Flt"><img src="/KHDWeb/Images/engineShotFt.jpg" alt="Test Float"></div><p>This would be box one to the left of the page at the top. Will the text flow tight against the bottom of the image in IE6, Opera, NS? Answser is NO. Now with the blah, blah, blah, blah, blah, we'll see if the text will wrap closely around the bottom of the image. I doubt this will make any difference at all but it's worth a try. How bout it. OK, time to go to post. I'm blue in the face. Reading the CSS spec is about to make me go postal.</p>
    </div>

    <div id="box_2"><h2>This would be box two to the left of the page, second from the top</H2></div>
    <div id="box_3"><h2>This would be box three to the left of the page, third from the top with text floated against an image</h2></div>
    </div>

    <div id="rtCntnr">
    <div id="box_4"><h1>This would be the box four to the right of the page at the top.</h1></div>
    <div id="box_5"><h2>This would be the box five to the right of the page just below box 4.</h2></div>
    <div id="box_6"><div id="box_6Flt"><h1><img src="/KHDWeb/Images/preOwned_LgTxt.jpg">This would be the box six to the right of the page just below box 5 and with an image floated.</h1></div></div>
    </div>
    </body>
    </html>

    CSS

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    }
    .pgCntnr {
    margin:0px;
    width:700px;
    }

    #lftCntnr {
    margin:0px;
    width:350px;
    float:left;
    }
    #box_1 {
    margin:0px;
    width: 350px;
    float:left;
    border: dashed;
    border: #FF0000;
    }
    #box_1Flt {
    margin:0px;
    float:left;
    }

    #box_2 {
    margin:0px;
    width: 350px;
    float: left;
    border: dashed;
    border: #0000FF;
    }
    #box_3 {
    margin:0px;
    width: 350px;
    float: left;
    border: dashed;
    border: #CCCCCC;
    }
    #rtCntnr {
    margin:0px;
    width:350px;
    float: right;
    clear: right;
    }
    #box_4 {
    margin:0px;
    width: 350px;
    float: right;
    border: dashed;
    border: #00FF00;
    }
    #box_5 {
    margin:0px;
    width: 350px;
    float: right;
    border: dashed;
    border: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    #box_6 {
    margin:0px;
    width: 350px;
    float: right;
    border: dashed;
    border: #FF00FF;
    }
    #box_6Flt {
    margin:0px;
    float: left;
    }
     
    badlael, Feb 12, 2006 IP
  2. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think I got this correct?

    Do the things in bold and give it a go. Not sure why you need a div tag around your images as a simple <img src="/KHDWeb/Images/engineShotFt.jpg" alt="Test Float" width="200" height="200" hspace="2" vspace="2" align="left"> added to you image tags would help, enabeling you to remove those imag div's (play around with the numbers).

    We remove the float: left/right; from the div boxes because they are contained in left/right container divs that float left/right anyway.

    I hope this helps.
     
    Blame Me, Feb 12, 2006 IP
  3. badlael

    badlael Guest

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    OK. Newbie gone wild with floats. Your suggestions worked out very well. I definitely went overboard with the float and clear call outs. Now; your suggestion re: vspace and hspace works to reduce the white space below the image. I was, however, hoping to use CSS to make this detail adjustment instead of a depreciated tag/tags. Is there no way to adjust with CSS because of cross browser issues....? Again, thanks for the help. I'm way better off than I was 20 minutes ago! Many Thx
     
    badlael, Feb 12, 2006 IP
  4. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I still use the image tags vspace/hspace fir the tme being as they work in all browsers, and I suppose its about tme to move over to the modern stuff :D

    I think you canget what you want with this:

    img.floatLeft { float: left;
    margin: 1px 2px 1px 1px; }

    Also give the images a class tag of <img class="floatLeft"> and play with the numbers. You can of course take out the width & height (providing the image sizes are the same) and the vspace & hspace.

    Hope this one helps.
     
    Blame Me, Feb 13, 2006 IP