Wrapping Text

C

cyber0ne

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
(e-mail address removed)
http://www.cyber0ne.com
 
B

Beauregard T. Shagnasty

cyber0ne said:
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
Click to expand...

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/...rning=2&uri=http://www.cyber0ne.com/test/css/>

Fixing the HTML errors will also help.
<http://validator.w3.org/check?verbose=1&uri=http://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.
 
E

Els

cyber0ne said:
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.
Click to expand...

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?
Click to expand...

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.
 
C

cyber0ne

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.
Click to expand...

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
(e-mail address removed)
http://www.cyber0ne.com
 
C

cyber0ne

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.
Click to expand...

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
(e-mail address removed)
http://www.cyber0ne.com
 
E

Els

cyber0ne said:
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?
Click to expand...

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?
 
C

cyber0ne

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

Done. I just replaced the same CSS file so just reload the page.
 
C

cyber0ne

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

Beauregard T. Shagnasty

cyber0ne said:
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.
Click to expand...

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.
Click to expand...

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?
Click to expand...

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.
Click to expand...

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

cyber0ne

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.
Click to expand...

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.
Click to expand...

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.
Click to expand...

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
(e-mail address removed)
http://www.cyber0ne.com
 
C

cyber0ne

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

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 :)
 
B

Beauregard T. Shagnasty

cyber0ne wrote:
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.
Click to expand...

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.
Click to expand...

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>
 
C

cyber0ne

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?
Click to expand...

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.
 
E

Els

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

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
 
C

cyber0ne

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.
 
B

Beauregard T. Shagnasty

cyber0ne said:
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.
Click to expand...

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!" said:
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.
Click to expand...

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.
 
C

cyber0ne

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Batch modifying text - content and context based 5
Align img inside nav tabs section 5
Wrapping a box around its content 16
Wrapping text around a table 2
I need help fixing my website 2
Help with my responsive home page 2
Iframe link overlapping text 4
Wrapping around a list 8

Members online

Total: 30 (members: 1, guests: 29)
Robots: 434

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,054
Latest member
LucyCarper

Latest Threads

Top