SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to structure an image to the left and just below text?

    Im trying to structure a cellblock but having trouble, i've attached an image with what Im talking about.

    My key question has to do with the text in blue relative to the image. Is there anyway to get an image to be float'd to the left of text but have it just below the first line of text (regardless of the length of the text)?

    Thanks!

    howto.jpg

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It can't really be done (yes it can see posts below) because the heading text can't change its behaviour half way through the line. You'd have to split the heading into two lines and insert the float between them.

    You could do it in reverse if the image was floated right because you could add a spacer at the end of the text and then drag the image up into the gap.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .outer {
        width:350px;
        padding:10px;
        border-top:1px solid #ccc;
        border-bottom:1px solid #ccc;
        overflow:hidden;
        line-height:1.4em;
    }
    h2 {
        margin:0;
    }
    .img {
        width:100px;
        height:100px;
        background:red;
        float:right;
        margin:-1.2em 0 5px 5px;
        display:inline;
    }
    h2 b {
        display:inline-block;
        width:120px
    }
    </style>
    </head>
    <body>
    <div class="outer">
        <h2>This is the header that may wrap to the next line <b></b></h2>
        <p class="img">Image</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis,</p>
    </div>
    <div class="outer">
        <h2>This is the header <b></b></h2>
        <p class="img">Image</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis,</p>
    </div>
    <div class="outer">
        <h2>This is the header that may wrap to the next line or maybe three lines<b></b></h2>
        <p class="img">Image</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis,</p>
    </div>
    <div class="outer">
        <h2>This is the header that may wrap <b></b></h2>
        <p class="img">Image</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis,</p>
    </div>
    
    </body>
    </html>
    That's about as close as you can get I think

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought of the sandbag trick to push the image down one line-height:
    Code:
    <!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>Untitled</title>
    <style type="text/css">
    .content div{
    	margin:10px auto;
    	border:solid;
    	width:60%;
    	overflow:hidden;
    }
    .content h2{
    	margin:5px;
    	font-size:110%;
    }
    .content div .sandbag{
    	float:left;
    	width:1px;
    	height:2em; /* cleared space above the floated image */
    }
    .content div img{
    	clear:left;
    	float:left;
    	margin-right:5px;
    	background:#fc0;
    }
    </style>
    </head><body>
    
    <div class="content">
    	<div><span class="sandbag"></span><img src=" " alt="" width="240" height="160"><h2>Header Header Header Header Header Header Header </h2> Content Content Content Content Content Content Content Content Content </div>
    	<div><span class="sandbag"></span><img src=" " alt="" width="240" height="160"><h2>Header Header Header Header </h2> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    	<div><span class="sandbag"></span><img src=" " alt="" width="240" height="160"><h2>Header Header Header Header Header Header Header Header Header Header </h2> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    </div>
    
    </body></html>
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the headline text static or dynamic? I.e is it coming from the database?

    Edit: I was just playing a little bit with it and just drobt the image in the middle of the headline, like this:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
     
    <style type="text/css">
    body {
    	margin-top: 50px;
    }
     
    #wrapper {
    	width: 500px;
    	float: left;
    	position: relative;	
    }
     
    #wrapper .headiine{
    	font-size: 160%;
    	color: #0000FF;
    	padding: 0;
    	display: block;
    }
    .lefty {
    	float: left;
    	margin: 5px 10px 0 0;
    }
    </style>
    </head>
     
    <body>
    <div id="wrapper">
    <span class="headiine">Long title goes here! <img src="Chrysanthemum.jpg" alt="" class="lefty" />notice how the second line wraps arround the photo.
    </span>
    </div>
    </body>
    </html>

    It looks good to me or is this absolutely not done?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys, thaks for the effort so far. Unfortunatly, I cant split the title (by placing an image between the words), the title in fact comes from my database (as part of wordpress).

    I tried the "sandbag" trick posted up by Erik, but it doesnt seem to be working?

    This is turning out to be alot harder then I thought

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's why my first question, but I thought I give it a try
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I take it back! With a few modifications to the pixel height it now works using Erics sandbag method! Thanks eric, much appreciated and thanks to everyone who chipped in with their efforts. I still dont understand this sandbag method, but I sure do love it, and going to start learning it now to understand what its doing

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is always alternative ways to solve a problem by CSS and this time I happen to pick one you liked.

    Usually Paul finds the best method on top of his mind.

    For more understanding how the text wraps floats, here are two old SitePoint threads about using the Sandbag technique: Same line-height may wrap differently crossbrowser and then also read at bottom why a self-cleared box can overflow the pushed down float.
    Happy ADD/ADHD with Asperger's

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Erik J View Post
    There is always alternative ways to solve a problem by CSS and this time I happen to pick one you liked.
    Good thinking Erik. I should have thought of that as it was the reverse of what I was trying

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at Erik's test case I see that webkit (at least chrome/win) does not treat anonymous boxes as other browsers do. These show across the floats - interesting behavior...

    I think there is a way to do it without the "shim" though. Via negative text-indent and margin.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Float showing in between lines</title>
    <style>
    div {
    	border:solid;
    	margin:20px auto;
    	width:50%;
    	overflow:hidden;
    	padding:20px;
    }
    h2{
    	margin-top:-.6em;
    	font-size:1.1em;
    	text-indent:-130px;
    	margin-left:130px;
    	line-height:1.5;	
    }
    img{
    	float:left;
    	margin:1.2em 10px 0 0;
    	background:teal;
    	width:120px;
    	height:120px;
    }
    </style>
    </head>
    <body>
    	<div>
    	<img alt="float">
    	<h2>Header Header Header Header Header Header Header </h2> 
    	<p>Content Content Content Content Content Content Content Content Content </p>
    	</div>
    	<div>
    	<img alt="float">
    	<h2>Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header </h2>
    	<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    	</div>
    </body>
    </html>
    This is a live example
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thierry koblentz View Post
    Looking at Erik's test case I see that webkit (at least chrome/win) does not treat anonymous boxes as other browsers do. These show across the floats - interesting behavior...

    I think there is a way to do it without the "shim" though. Via negative text-indent and margin.
    Ha ha - Beautiful Don't you just love CSS.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Ha ha - Beautiful
    Thanks!

    Don't you just love CSS.
    There is nothing like it when it comes to pleasure and pain
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  13. #13
    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)
    Quote Originally Posted by thierry koblentz View Post
    Looking at Erik's test case I see that webkit (at least chrome/win) does not treat anonymous boxes as other browsers do. These show across the floats - interesting behavior...

    I think there is a way to do it without the "shim" though. Via negative text-indent and margin.
    Hi thierry,

    Nice solution
    I don't think we can beat it for simplicity and cross browser rendering.

    Yes I see what you are talking about with webkit, that is strange. Looks like some more buggy behavior.

    Following your lead with the text-indent here is one that uses :first-letter. It works as I expected it too in FF,IE, and Opera but Webkit lets the inline boxes slide past the float's top margin before anything begins.

    Using display:table for test float containment so content does not get clipped in Webkit.

    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>Testing with :first-letter</title>
     
    <style type="text/css">
    div {
        width:50%;
        margin:10px auto;
        display:table;
        border:2px solid #000;
    }
    div h2 {
        margin:-.075em 0 0;
        font:bold 1.25em/1.2 arial;
    }
    div h2:first-letter {
        margin-left:-150px;
    }
    div img {
        float:left;
        width:150px;
        height:150px;
        margin:1.5em 10px 0 0;
        background:#0f0;
    }
    </style>
    </head>
    <body>
     
    <div>
        <img src="#" alt="Image">
        <h2>Header Header Header</h2>
        <p>Content Content Content Content Content Content Content Content Content</p>
    </div>
    <div>
        <img src="#" alt="Image">
        <h2>Header Header Header Header Header Header Header Header Header</h2>
        <p>Content Content Content Content Content Content Content Content Content</p>
    </div>
     
    </body>
    </html>

    Here is another one that uses a pseudo :before float instead of a span for the sandbag. As long as I set the font-sizes the same on the :before and h2 while using percentages webkit complies. I am using a "." to generate the line height and hiding it with text-indent. Webkit seems to be okay with it now.

    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>Testing with :before sandbag</title>
     
    <style type="text/css">
    div {
        width:50%;
        margin:10px auto;
        overflow:hidden;
        border:2px solid #000;
    }
    div h2 {
        margin:0;
        padding:0 10px 0 9px;
        font:bold 120%/1.2 arial;
    }
    div:before {
        float:left;
        width:1px;
        content:".";
        font:120%/1.2 arial;
        text-indent:-2em;
        background:red;
    }
    div img {
        float:left;
        clear:left;
        width:150px;
        height:150px;
        margin:0 10px 0 0;
        background:#0f0;
    }
    </style>
    </head>
    <body>
     
    <div>
        <img src="#" alt="Image">
        <h2>Header Header Header</h2>
        <p>Content Content Content Content Content Content Content Content Content</p>
    </div>
    <div>
        <img src="#" alt="Image">
        <h2>Header Header Header Header Header Header Header Header Header</h2>
        <p>Content Content Content Content Content Content Content Content Content</p>
    </div>
     
    </body>
    </html>

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur,

    Nice solution
    Thanks!

    I think if you give your H2 a left margin, your first solution would work in webkit as well (I'm not sure webkit is wrong on that one though).

    I prefer the pseudo-element approach rather than the shim in the markup, but as we know IE 6 and 7 won't play ball with that one :-(
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  15. #15
    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)
    Quote Originally Posted by thierry koblentz View Post
    I think if you give your H2 a left margin, your first solution would work in webkit as well (I'm not sure webkit is wrong on that one though).
    I would think that webkit should honor that top margin on the floated image though.

    I prefer the pseudo-element approach rather than the shim in the markup, but as we know IE 6 and 7 won't play ball with that one :-(
    Yes, for IE6/7 we would need another element such as the span Erik was using. I was just trying to get the line-heights correct without any actual content in the html.

    It seems that Opera is having trouble with that one too for some reason. Not sure what that's all about but I will look at it closer.

    Like I had said, I think you have found the cleanest way to go.

  16. #16
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I would think that webkit should honor that top margin on the floated image though.
    Actually, there is a similar behavior between the two different methods (negative text-indent and pseudo element) and browsers.

    It is the fact that the offset is not applied the same depending on the length of the text.

    My guess is that this is due to the algorithm related to wrapping text around floats. If there is wrapping, the point of reference for the offset seems to be the right edge of the float. If there is no wrapping, it appears to be the left edge of the content box.

    You're right though. I'd expect the pseudo-element to come to the right edge of the float and then move to the left due to the negative margin (rather than left in relation to the content box).

    As Paul has said in this thread, do we love CSS...
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  17. #17
    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)
    As Paul has said in this thread, do we love CSS...
    Yes, WE DO!

    Quote Originally Posted by thierry koblentz View Post
    Looking at Erik's test case I see that webkit (at least chrome/win) does not treat anonymous boxes as other browsers do.
    Quote Originally Posted by Rayzur View Post
    Yes, for IE6/7 we would need another element such as the span Erik was using. I was just trying to get the line-heights correct without any actual content in the html.

    It seems that Opera is having trouble with that one (pseudo sandbag with line-height) too for some reason. Not sure what that's all about but I will look at it closer.
    I just wanted to follow up on what I discovered about Opera and Webkit when using the sandbags. I do agree that thierry has found the best solution but I wanted to investigate what was discovered in this thread.

    In Erik's example he is using a defined height on the sandbag (2em). That is what Webkit was having trouble with by allowing the h2's inline boxes to slide on top of the image. It left extra space below the h2's line-height which is enough to allow another line of text to pass through. That was discussed in the threads that Erik linked to. Reading through that first thread again I see that it was mentioned that Opera needed +1px additional height on the sandbag for text to pass through.

    That extra 1px gets Opera working but breaks Webkit, I see this as a flaw in Opera. There is no reason another line box with identical height should not be able to pass through.

    Here are my adjustments to the code Erik was using, I'm even using pixel font sizes to steer off any rounding errors.

    Code:
    <!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>Untitled</title>
    <style type="text/css">
    .content div{
        margin:10px auto;
        border:solid;
        width:60%;
        overflow:hidden;
    }
    .content h2{
        margin:0;
        font:25px/30px arial;
    }
    .content div span{
        float:left;
        /*width:1px;*/
        /*height:2em;*/
        font:25px/30px arial;
        /*padding-top:1px; Gets Opera working but breaks Webkit*/
        background:red;
    }
    .content div img{
        clear:left;
        float:left;
        margin-right:5px;
        background:#fc0;
    }
    </style>
    </head><body>
    
    <div class="content">
        <div><span>H</span><img src="#" alt="" width="240" height="160"><h2>Header Header Header Header Header Header Header </h2> Content Content Content Content Content Content Content Content Content </div>
        <div><span>H</span><img src="#" alt="" width="240" height="160"><h2>Header Header Header Header </h2> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
        <div><span>H</span><img src="#" alt="" width="240" height="160"><h2>Header Header Header Header Header Header Header Header Header Header </h2> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    </div>
    
    </body></html>

  18. #18
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Thierry, wonderfully simple!

    Ray, maybe you could use an escaped hard space as content in your pseudo element version:
    Code:
    div:before {
        float:left;
        width:1px;
        content:"\A0";
        font:120%/1.2 arial;
        background:red;
    }
    Happy ADD/ADHD with Asperger's

  19. #19
    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)
    Ray, maybe you could use an escaped hard space as content in your pseudo element version:
    Hi Erik, I never could get it to work in Opera due to that 1px glitch in the h2 line box.

    The strange thing about is if you close your viewport enough to force the h2 to wrap down to the width of one word on the right of the image it finally pops the first line up beside the sandbag.

    I did some searching for Opera line box bugs but never found anything that explained it, I tried everything I could think of but never found a solution.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Some interesting stuff there guys Isn't is strange that opera always seem to be the most awkward to fix in all these types of scenarios. Unlike IE which you can hack into submission you often just hit a brick wall with Opera. It's a great browser but just a little buggy in places.

  21. #21
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ray, I can't test in Opera ftm, but I think you've found an Opera bug again.

    I had the problem when I was testing for the "float center" quiz. Now I can't remember if I ever compared how a self cleared box behaved in Opera vs other browsers. If in this case an e.g. overflow:hidden paragraph could overlap the float if the upper edge should pass over and touch the floatpusher. (I think Opera does not.)

    Possibly this odd float wrap is not reported as a bug yet?
    Happy ADD/ADHD with Asperger's

  22. #22
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't agree more. I ran into that wall a couple of times :-(
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  23. #23
    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)
    Quote Originally Posted by Paul O'B View Post
    Some interesting stuff there guys Isn't is strange that opera always seem to be the most awkward to fix in all these types of scenarios.
    Yes, Opera bugs are vicious like an IE7 bug

    Quote Originally Posted by Erik J View Post
    Hi Ray, I can't test in Opera ftm, but I think you've found an Opera bug again.

    Possibly this odd float wrap is not reported as a bug yet?
    I've learned not to jump the gun and start calling them bugs to soon but I think your right. It looks like the bug is introduced by the identical line-height of the sandbag. What stumps me though is why it finally decides to wrap when width is reduced.

    Here is the latest code I was testing with.

    Here are some screenshots of the wrapping text at narrowed widths and lack of wrapping when space is available on the right of the cleared float.

    No Text Wrap Above: http://www.css-lab.com/bug-test/nowrap-opera.jpg

    Wrapping Text:
    http://www.css-lab.com/bug-test/wrap-opera.jpg

    Strange behavior indeed


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
  •