Background adds extra color to right side of right floated image in Webkit

HTML & CSS
1

I’m floating a little gif to the right and have it wrapped in a div, and a background added. I’m just curious why there’s a band of background color to the right of this floated image of about 5 pixels. Here’s a screen shot http://img.skitch.com/20100926-x332s54ih95n24kb88tq9kijab.jpg . Note you can’t see the code above but I’ve used a very basic reset to make sure that no browser specific css is messing things up. Anyhow, I notice this is not adding the extra background in Firefox 3.x but it is doing it in Safari 5. Is this a Safari bug?

2

Hi,
Always best to post code like ralph mentioned but I was able to set up a test case.

I was testing with some other whitespace bugs in Webkit today so I was able to pinpoint your problem to the whitespace shown in red below.

Scroll to the right

    <div class="floatright">
        <img src="OrangeSquare.jpg" width="100" height="100" alt="OrangeSquare"[COLOR=Red][B]> <[/B][/COLOR]br>Caption Here
    </div>

To clarify: I think Webkit was not collapsing the spacebar entry with the adjoining text node.

  1. If ‘white-space’ is set to ‘normal’, ‘nowrap’, or ‘pre-line’,
    [LIST=1]
  2. every tab (U+0009) is converted to a space (U+0020)
  3. any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has ‘white-space’ set to ‘normal’, ‘nowrap’ or ‘pre-line’ — is removed.
    [/LIST]

But it also states that :

Note. CSS 2.1 does not fully define where line breaking opportunities occur. Floated and absolutely-positioned elements do not introduce a line breaking opportunity.

If you want to keep your html readable with line breaks you can also float the image to kill the whitespace.

<!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=utf-8">
<title>Test Page</title>

<style type="text/css">
img {
    margin: 0 0 10px 0;
    border:.2em dotted #F00;
    padding:.5em;
    background:purple;
    float:left;
}
.floatright {
    float:right;
    background:gray;
    border:1px dotted #000;
    text-align:center;
}

</style>

</head>
<body>
    <div class="floatright">
        <img src="OrangeSquare.jpg" width="100" height="100" alt="OrangeSquare">
        <br>
        Caption Here
    </div>    
    <p>
        Lorem ipsum dolor sit amet consectetuer nibh feugiat gravida a Curabitur. Praesent Vivamus 
        faucibus adipiscing Sed orci semper egestas dui convallis nisl. Eget hendrerit tincidunt sem 
        venenatis Integer Curabitur interdum quis lorem ac. Leo et iaculis tellus senectus natoque et 
        Vestibulum et volutpat ipsum. Quis ante Suspendisse convallis cursus adipiscing leo vitae 
        semper nascetur turpis. Gravida auctor elit ut Morbi gravida nibh dolor mi risus nec. Aenean 
        laoreet vel wisi laoreet nisl Phasellus porttitor sagittis nulla ullamcorper. Nulla adipiscing 
        enim eros consequat pede pellentesque a ornare neque nibh. Consectetuer.
    </p>
</body>
</html>
3

Hmm, highly unlikely I’d think. It’s really hard to tell without some live code to play with. Could you post the full page code with CSS so we can test it? (We can easily make a test image.)

All I can suggest off the cuff is to place <p> tags around the caption.

4

Thanx!

5

Hi P-Dog,

Sorry I did not check that example I gave above in IE. Since your caption text was not wrapped in a block all versions of IE were not placing the text below the image. I think ralph had mentioned that and the image itself should really be wrapped in a block as well. Some <p> tags will do the job just fine.

I have set up a live example with lt & rt captions
Fixed Width Image Captions

Here is another example that you may find helpful too.
Auto Width Image Captions

Here is the code from that fixed width example -


<!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=utf-8">
<title>Fixed Width Image Captions</title>

<style type="text/css">
#wrap {
    width:85&#37;;
    min-width:500px;
    margin:0 auto;
    padding:10px 10px 0;
    overflow:hidden;
    background:#EEF;
    border:1px solid #000;
    text-align:justify;
}
h1 {
    margin:0 0 5px;
    font-size:1.5em;
    text-align:center;
}
p {margin:0 0 10px;}

/* Image Caption Styles */
.caption {
    margin:0 10px 0 0;
    background:#CCC;
    border:1px dotted #000;
    text-align:center;
}
    .lt {
        float:left;
        clear:left;
        margin:0 10px 10px 0;
    }
    .rt {
        float:right;
        clear:right;
        margin:0 0 10px 10px;
    }
    .caption p {
        float:left;
        margin:0 0 5px 0;
    }
    .caption img {
        float:left;
        border:2px dotted #F00;
        padding:5px;
        background:purple;
    }
    .caption p.info {
        clear:both;
        width:100px;
        margin:0;
        padding:0 5px 5px;
    }
</style>

</head>
<body>

<div id="wrap">
    <div class="caption lt">
        <p><img src="images/orange.jpg" width="100" height="100" alt="Orange Img"></p>
        <p class="info">Caption Here with some long text that wraps</p>
    </div>    
    <div class="caption rt">
        <p><img src="images/orange.jpg" width="100" height="100" alt="Orange Img"></p>
        <p class="info">Caption Here with some long text that wraps</p>
    </div>
    <h1>Fixed Width Image Captions</h1>   
    <p>
        Lorem ipsum dolor sit amet consectetuer nibh feugiat gravida a Curabitur. Praesent Vivamus 
        faucibus adipiscing Sed orci semper egestas dui convallis nisl. Eget hendrerit tincidunt sem 
        venenatis Integer Curabitur interdum quis lorem ac. Leo et iaculis tellus senectus natoque et 
        Vestibulum et volutpat ipsum. Quis ante Suspendisse convallis cursus adipiscing leo vitae 
        semper nascetur turpis. Gravida auctor elit ut Morbi gravida nibh dolor mi risus nec. Aenean 
        laoreet vel wisi laoreet nisl Phasellus porttitor sagittis nulla ullamcorper. Nulla adipiscing 
        enim eros consequat pede pellentesque a ornare neque nibh. Consectetuer.
    </p>
    <div class="caption lt">
        <p><img src="images/orange.jpg" width="100" height="100" alt="Orange Img"></p>
        <p class="info">Caption Here with some long text that wraps</p>
    </div>    
    <div class="caption rt">
        <p><img src="images/orange.jpg" width="100" height="100" alt="Orange Img"></p>
        <p class="info">Caption Here with some long text that wraps</p>
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetuer nibh feugiat gravida a Curabitur. Praesent Vivamus 
        faucibus adipiscing Sed orci semper egestas dui convallis nisl. Eget hendrerit tincidunt sem 
        venenatis Integer Curabitur interdum quis lorem ac. Leo et iaculis tellus senectus natoque et 
        Vestibulum et volutpat ipsum. Quis ante Suspendisse convallis cursus adipiscing leo vitae 
        semper nascetur turpis. Gravida auctor elit ut Morbi gravida nibh dolor mi risus nec. Aenean 
        laoreet vel wisi laoreet nisl Phasellus porttitor sagittis nulla ullamcorper. Nulla adipiscing 
        enim eros consequat pede pellentesque a ornare neque nibh. Consectetuer.
    </p>
</div>

</body>
</html>
6

Hi,
Thanx for the reply. Next time I post I’ll be sure to use the code insertion feature. My mistake. Regards,
Steven

7

Hi,
Brilliant answer! So floating the containing div solves it or removing the white space. Thanx.