Wrapping Text

Discussion in 'HTML' started by cyber0ne, Nov 1, 2005.

  1. cyber0ne

    cyber0ne Guest

    I've been putting together a test page for a re-design of my website,
    focusing as much as I can on standards and portability of code, and I'm
    running into a problem with some text wrapping.

    For reference, the page is at http://www.cyber0ne.com/test/css

    Note the whitespace after each small image in each article.
    Previously, all of the boxes on the right-hand side of the page were
    contained in a single box. Since this box started above the images in
    the articles on the page, setting the images to float: left worked like
    a charm and text wrapped around them just fine.

    However, in the effort to get the right-column objects out of a group
    and on their own, I have removed them from that main box. (That way,
    should I make other designs, I can more easily freely move them about
    the page independantly of one another). But that caused the floated
    images in question to be pushed downward to after the last right-hand
    box.

    Removing the float: left tag put them back where they needed to be, but
    now the text starts on the following line, leaving all this whitespace.

    Any ideas on how I should fix this, while still keeping the overall
    layout? I would really prefer to avoid using tables at all. You can
    pretty much see in my HTML code how I want to organize the document
    structure. Of course, given that I am by no means a graphic designer,
    I'm very much open to suggestion on layout improvements and anything
    else that will make the site more visually appealing, while still
    keeping it as small and simple as possible.

    Any help with the text wrapping around these images would be much
    appreciated, thank you.


    Regards,
    David P. Donahue

    http://www.cyber0ne.com
     
    cyber0ne, Nov 1, 2005
    #1
    1. Advertising

  2. cyber0ne wrote:

    > I've been putting together a test page for a re-design of my website,
    > focusing as much as I can on standards and portability of code, and I'm
    > running into a problem with some text wrapping.
    >
    > For reference, the page is at http://www.cyber0ne.com/test/css


    Please start by fixing the errors in the CSS, after which we may be able
    to determine what the problem really is. Note all the warnings as well.
    <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.cyber0ne.com/test/css/>

    Fixing the HTML errors will also help.
    <http://validator.w3.org/check?verbose=1&uri=http%3A//www.cyber0ne.com/test/css/>

    A CSS comment is: /* margin: -1.6em 0em 0em 2em; */
    and not just: *margin: -1.6em 0em 0em 2em;
    which means the browser is free to ignore your CSS.

    That said, you should use a complete doctype, and probably use Strict
    for all new pages. This will also make a difference in the display of
    the page.
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

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

    Oh, and change the default font size to .. 100% .. instead of just 80%
    of my preferred size. Use percent instead of em, due to bug in IE that
    improperly resizes when em is used.

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Nov 1, 2005
    #2
    1. Advertising

  3. cyber0ne

    Els Guest

    cyber0ne wrote:

    > I've been putting together a test page for a re-design of my website,
    > focusing as much as I can on standards and portability of code, and I'm
    > running into a problem with some text wrapping.
    >
    > For reference, the page is at http://www.cyber0ne.com/test/css
    >
    > Note the whitespace after each small image in each article.
    > Previously, all of the boxes on the right-hand side of the page were
    > contained in a single box. Since this box started above the images in
    > the articles on the page, setting the images to float: left worked like
    > a charm and text wrapped around them just fine.
    >
    > However, in the effort to get the right-column objects out of a group
    > and on their own, I have removed them from that main box. (That way,
    > should I make other designs, I can more easily freely move them about
    > the page independantly of one another). But that caused the floated
    > images in question to be pushed downward to after the last right-hand
    > box.
    >
    > Removing the float: left tag put them back where they needed to be, but
    > now the text starts on the following line, leaving all this whitespace.


    Yup, you need to put the float:left back in the styles for .BlogImage.
    But don't add clear:left to it.

    > Any ideas on how I should fix this, while still keeping the overall
    > layout?


    If you add the float:left without the clear:left, and the problem
    persists, take away any other clear properties that you don't really
    need. Looking at your stylesheet, it seems you put clear properties on
    every single float. Clearing a float though, means no other floats
    will be tolerated next to it.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: 2 Unlimited - Nothing Like The Rain (Spanish Version)
     
    Els, Nov 1, 2005
    #3
  4. cyber0ne

    cyber0ne Guest

    > A CSS comment is: /* margin: -1.6em 0em 0em 2em; */
    > and not just: *margin: -1.6em 0em 0em 2em;
    > which means the browser is free to ignore your CSS.


    Ya, those aren't supposed to be comments, that's just a "trick" I'm
    using for the time being to support IE's broken CSS interpretation.
    After I'm done I'll be moving those ones to a different sheet entirely
    for IE users.

    I just took out the cursor: hand tags on my local copy, though. I
    guess those were left there from something I was trying to implement
    some time ago. So, between those and the need for broken IE CSS, that
    takes care of the errors. As for the warnings, the reason I don't
    specify so many colors is that there's no need. The colors of parent
    elements "cascade" to their children.

    I'd love to use Strict, except that I need to do something about my
    iframe(s) first. That's really the only thing standing in the way. As
    for the errors in my Transitional validation, those don't make sense to
    me. It says I'm closing a head tag that isn't open, but it is open.
    And it doesn't allow a body tag?

    I'll change the font size to 1em, sure. It just seems kind of big to
    me, anyone else? It seems like so many other sites I see use slightly
    smaller fonts like mine and it just makes them more readable. At 1em I
    couldn't imagine reading that thing on an 800x600 display.


    Regards,
    David P. Donahue

    http://www.cyber0ne.com
     
    cyber0ne, Nov 1, 2005
    #4
  5. cyber0ne

    cyber0ne Guest

    > If you add the float:left without the clear:left, and the problem
    > persists, take away any other clear properties that you don't really
    > need. Looking at your stylesheet, it seems you put clear properties on
    > every single float. Clearing a float though, means no other floats
    > will be tolerated next to it.


    Using all those clears was the only way I could come up with to get all
    those boxes to be in a column on the right side of the page. I'm open
    to other suggestions on how to do that, though. I had thought,
    however, that clear: right would only ensure that there was nothing on
    the _right_ side of those boxes, allowing them to float to the right of
    the page beneath each other while still allowing stuff to float to the
    left of them. I guess this is incorrect?

    I may just end up having to put them all back into a single container,
    but I was really hoping to keep them individual so they could be moved
    around in other designs.


    Regards,
    David P. Donahue

    http://www.cyber0ne.com
     
    cyber0ne, Nov 1, 2005
    #5
  6. cyber0ne

    Els Guest

    cyber0ne wrote:

    >> If you add the float:left without the clear:left, and the problem
    >> persists, take away any other clear properties that you don't really
    >> need. Looking at your stylesheet, it seems you put clear properties on
    >> every single float. Clearing a float though, means no other floats
    >> will be tolerated next to it.

    >
    > Using all those clears was the only way I could come up with to get all
    > those boxes to be in a column on the right side of the page. I'm open
    > to other suggestions on how to do that, though. I had thought,
    > however, that clear: right would only ensure that there was nothing on
    > the _right_ side of those boxes, allowing them to float to the right of
    > the page beneath each other while still allowing stuff to float to the
    > left of them. I guess this is incorrect?


    No, it isn't. I didn't dive into your stylesheet enough to notice
    which boxes had clear:right, and which were cleared left. If they all
    have clear:right, it's not the cause for the dropping down of the
    images.

    Could I see a page where you give the blogimages float:left so I can
    see the problem happen?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: 4 Non Blondes - What's Up
     
    Els, Nov 1, 2005
    #6
  7. cyber0ne

    cyber0ne Guest

    > Could I see a page where you give the blogimages float:left so I can
    > see the problem happen?


    Done. I just replaced the same CSS file so just reload the page.
     
    cyber0ne, Nov 1, 2005
    #7
  8. cyber0ne

    cyber0ne Guest

    Interesting... I just noticed that IE is rendering them properly with
    float: left. But Firefox, Opera, Mozilla, and Netscape all push them
    down.
     
    cyber0ne, Nov 1, 2005
    #8
  9. cyber0ne wrote:

    >> A CSS comment is: /* margin: -1.6em 0em 0em 2em; */
    >> and not just: *margin: -1.6em 0em 0em 2em;
    >> which means the browser is free to ignore your CSS.

    >
    > Ya, those aren't supposed to be comments, that's just a "trick" I'm
    > using for the time being to support IE's broken CSS interpretation.
    > After I'm done I'll be moving those ones to a different sheet entirely
    > for IE users.


    I've never seen an IE trick written quite like that.

    How will you determine who of your visitors are IE users? Browser
    sniffing is notoriously faulty.

    > I just took out the cursor: hand tags on my local copy, though. I
    > guess those were left there from something I was trying to implement
    > some time ago. So, between those and the need for broken IE CSS, that
    > takes care of the errors. As for the warnings, the reason I don't
    > specify so many colors is that there's no need. The colors of parent
    > elements "cascade" to their children.


    They do cascade, but wouldn't you agree it is best to fix them?

    I still don't see why you need special code for IE. Never did that for
    any of my sites.

    > I'd love to use Strict, except that I need to do something about my
    > iframe(s) first. That's really the only thing standing in the way. As
    > for the errors in my Transitional validation, those don't make sense to
    > me. It says I'm closing a head tag that isn't open, but it is open.
    > And it doesn't allow a body tag?
    >
    > I'll change the font size to 1em, sure. It just seems kind of big to
    > me, anyone else?


    How about resetting your own default size?

    > It seems like so many other sites I see use slightly
    > smaller fonts like mine and it just makes them more readable. At 1em I
    > couldn't imagine reading that thing on an 800x600 display.


    Well, I had to increase it about 15% to read it. Perhaps my old eyes
    aren't as good as yours.

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Nov 1, 2005
    #9
  10. cyber0ne

    cyber0ne Guest

    > I've never seen an IE trick written quite like that.
    > How will you determine who of your visitors are IE users? Browser
    > sniffing is notoriously faulty.


    I admit, it's terribly ugly. My hope would be to just supply an
    alternate stylesheet for IE, but the vast majority of users will never
    know or care about switching to it. I'll likely read the user-agent on
    the server side and dynamically input the link tag for the stylesheet
    there. Yes, I shudder at the thought.

    > They do cascade, but wouldn't you agree it is best to fix them?
    > I still don't see why you need special code for IE. Never did that for
    > any of my sites.


    Perhaps, but that may add some complication that I don't need. For
    example, suppose I have a number of links which are all the same class,
    but placed in different divs with different backgrounds. I want the
    color of the links to change on hover, but if I specify a background
    change then it won't look right. I'd have to make more and more
    classes, which ultimately clutters things up.

    I don't really see a "need" for special IE code either, except that
    it's been necessary up to this point. For example, if I took the
    IE-specific margin declaration out of the logincontainer class, then IE
    renders it beyond the top of the screen. All other browsers render it
    where it should be.

    > How about resetting your own default size?
    > Well, I had to increase it about 15% to read it. Perhaps my old eyes
    > aren't as good as yours.


    I'll admit, getting the font to look right for the vast majority of
    visitors is important to me. Currently my testing group is myself,
    sometimes my wife, and a couple friends... so I value your input on the
    matter. Currently, however, it's a cosmetic change that can wait.
    Getting the layout done properly is more important.


    Regards,
    David P. Donahue

    http://www.cyber0ne.com
     
    cyber0ne, Nov 1, 2005
    #10
  11. cyber0ne

    cyber0ne Guest

    > That said, you should use a complete doctype, and probably use Strict
    > for all new pages.


    This one I definitely took to heart, thanks. I was just having trouble
    with some of the new implementations of things (that iframe,
    specifically). You'll be happy to know that the page now validates as
    XHTML Strict :)
     
    cyber0ne, Nov 1, 2005
    #11
  12. cyber0ne wrote:
    <snippage>
    > Perhaps, but that may add some complication that I don't need. For
    > example, suppose I have a number of links which are all the same class,
    > but placed in different divs with different backgrounds.


    background-color: transparent;

    > I want the color of the links to change on hover, but if I specify a
    > background change then it won't look right. I'd have to make more
    > and more classes, which ultimately clutters things up.


    In your main css file:
    img{
    border-style: none;
    }

    and later, in banner.css:
    img {
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    }

    Could that float have anything to do with your problems?

    <snip>

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Nov 1, 2005
    #12
  13. cyber0ne

    cyber0ne Guest

    > background-color: transparent;

    w3.org's validator still gives me a warning when I use that. I just
    put up a new one with specified colors for the rest of the warnings.
    All that's left is that warning for the transparent ones and the errors
    for the IE-hacked elements.

    > ...
    > Could that float have anything to do with your problems?


    I just removed the reference to that stylesheet and there's no change.
    That's just part of the radio thing in the iframe, and I don't think it
    was even being used.
     
    cyber0ne, Nov 1, 2005
    #13
  14. cyber0ne

    Els Guest

    cyber0ne wrote:

    > Interesting... I just noticed that IE is rendering them properly with
    > float: left. But Firefox, Opera, Mozilla, and Netscape all push them
    > down.


    It's weird indeed.
    So far it seems to me as if it's the cumulative clear:right that's
    causing it, although I don't see why.
    The images will always remain at the same level as the top of the
    bottom right-hand div. Regardless of how many divs there are.

    Unless there's only one, then there is no problem.
    Content of the divs doesn't seem to matter.

    As it happens in all browsers but IE, I would think this behaviour can
    be predicted when reading the specs properly, but I fail to see which
    part.

    Here's my simplified test version:
    http://here.locusmeus.com/temp/cyberOne.html

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Electric Boys - Cheek to cheek
     
    Els, Nov 1, 2005
    #14
  15. cyber0ne

    cyber0ne Guest

    Very strange. I can't find any spec details that would account for it
    either. And there's no way I'm going to have an IE6-only website :)

    I grabbed your simplified version to use as an example for some other
    forums (w3schools, for example). Hopefully someone will be able to
    suggest something if there's nobody else here with any ideas.

    But, ya, it's just weird.
     
    cyber0ne, Nov 1, 2005
    #15
  16. cyber0ne wrote:

    >> background-color: transparent;

    >
    > w3.org's validator still gives me a warning when I use that. I just
    > put up a new one with specified colors for the rest of the warnings.
    > All that's left is that warning for the transparent ones and the
    > errors for the IE-hacked elements.


    This is still for: http://www.cyber0ne.com/test/css/ ?

    I just now re-ran the CSS validator and see no warnings for transparent.
    However, those other errors are still present (the * lines) and others
    saying Parse error - Unrecognized : }

    Warnings
    URI : http://www.cyber0ne.com/test/css/screen.css

    * Line : 11 (Level : 1) You have no background-color with your color
    : a:active
    * Line : 11 (Level : 1) You have no background-color with your color
    : a:active
    * Line : 11 (Level : 1) You have no background-color with your color
    : a:active
    * Line : 11 (Level : 1) You have no background-color with your color
    : a:active
    * Line : 17 (Level : 1) You have no background-color with your color
    : a:hover
    * Line : 23 (Level : 1) This property applies to block-level
    elements. : p
    * Line : 187 (Level : 1) This property applies to block-level
    elements. : #randomimage
    * Line : 211 (Level : 1) This property applies to block-level
    elements. : #radio
    * Line : 281 (Level : 1) This property applies to block-level
    elements. : #google
    * Line : 344 (Level : 1) This property applies to block-level
    elements. : .BoxText


    "All bets are off!" <g>

    >> ... Could that float have anything to do with your problems?

    >
    > I just removed the reference to that stylesheet and there's no
    > change. That's just part of the radio thing in the iframe, and I
    > don't think it was even being used.


    Well, since it was being called, and after the main css, it would
    supercede and add that float, so I thought it best to rule it out.

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Nov 1, 2005
    #16
  17. cyber0ne

    cyber0ne Guest

    Not sure where those block-level warnings came from. I just
    re-uploaded the same css file and it's not giving me that anymore on
    the validation.

    Those warnings about the background color are on the elements where I'm
    using background: transparent. The validator doesn't seem to be
    recognizing that as a valid background color.

    The errors for the unrecognized } characters are part of the errors for
    the * lines. Those will go away when I put the IE-specific lines into
    another stylesheet.
     
    cyber0ne, Nov 1, 2005
    #17
    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. Mike Casey
    Replies:
    7
    Views:
    3,966
    Scott M.
    Dec 19, 2003
  2. PeteZ

    AdRotator and Text Wrapping

    PeteZ, Dec 30, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    410
    PeteZ
    Dec 30, 2004
  3. Dan
    Replies:
    0
    Views:
    471
  4. TB
    Replies:
    2
    Views:
    3,773
  5. Igor Vukomanovic
    Replies:
    0
    Views:
    579
    Igor Vukomanovic
    Apr 18, 2006
Loading...

Share This Page