Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Wrapping Text

Reply
Thread Tools

Wrapping Text

 
 
cyber0ne
Guest
Posts: n/a
 
      11-01-2005
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.velocityreviews.com/forums/(E-Mail Removed)
http://www.cyber0ne.com

 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      11-01-2005
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
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      11-01-2005
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)
 
Reply With Quote
 
cyber0ne
Guest
Posts: n/a
 
      11-01-2005
> 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
(E-Mail Removed)
http://www.cyber0ne.com

 
Reply With Quote
 
cyber0ne
Guest
Posts: n/a
 
      11-01-2005
> 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
(E-Mail Removed)
http://www.cyber0ne.com

 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      11-01-2005
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
 
Reply With Quote
 
cyber0ne
Guest
Posts: n/a
 
      11-01-2005
> 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.

 
Reply With Quote
 
cyber0ne
Guest
Posts: n/a
 
      11-01-2005
Interesting... I just noticed that IE is rendering them properly with
float: left. But Firefox, Opera, Mozilla, and Netscape all push them
down.

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      11-01-2005
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
 
Reply With Quote
 
cyber0ne
Guest
Posts: n/a
 
      11-01-2005
> 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
(E-Mail Removed)
http://www.cyber0ne.com

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
To stop text wrapping in an datagrid asp.net 2003 Dan ASP .Net 0 02-25-2005 06:34 AM
AdRotator and Text Wrapping PeteZ ASP .Net 0 12-30-2004 02:33 AM
Thunderbird plain text wrapping Chris Smith Firefox 3 07-02-2004 07:09 PM
Wrapping text Hans P S Alnes Firefox 2 02-23-2004 03:51 AM
ASP.NET label control not wrapping text in non-IE browsers Mike Casey ASP .Net 7 12-19-2003 04:56 PM



Advertisments