SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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-x332s...88tq9kijab.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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by PhilosopherDog View Post
    Is this a Safari bug?
    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.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
        <div class="floatright">
            <img src="OrangeSquare.jpg" width="100" height="100" alt="OrangeSquare"> <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',
      1. every tab (U+0009) is converted to a space (U+0020)
      2. 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.
    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.
    Code HTML4Strict:
    <!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>

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Brilliant answer! So floating the containing div solves it or removing the white space. Thanx.

    Quote Originally Posted by Rayzur View Post
    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

    Code:
        <div class="floatright">
            <img src="OrangeSquare.jpg" width="100" height="100" alt="OrangeSquare"> <br>Caption Here
        </div>
    To clarify: I think Webkit was not collapsing the spacebar entry with the adjoining text node.


    But it also states that :


    If you want to keep your html readable with line breaks you can also float the image to kill the whitespace.
    Code HTML4Strict:
    <!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>

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thanx for the reply. Next time I post I'll be sure to use the code insertion feature. My mistake. Regards,
    Steven


    Quote Originally Posted by ralph.m View Post
    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.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 -
    Code HTML4Strict:
    <!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%;
        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>

  7. #7
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •