Help needed with text wrapping

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Big Moxy - 27 Oct 2007 15:59 GMT

Please check this link - http://projects.zanalysts.com/hearing/work.htm.
The graphic is part of the page template. How can I get the text to
wrap around it? The style sheet is at http://projects.zanalysts.com/hearing/css/hearing.css.

Thank you,
- Tim

Reply to this Message

Jonathan N. Little - 27 Oct 2007 17:45 GMT

> Please check this link - http://projects.zanalysts.com/hearing/work.htm.
> The graphic is part of the page template. How can I get the text to
> wrap around it? The style sheet is at http://projects.zanalysts.com/hearing/css/hearing.css.

Your script throws up:

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>

at the top of the page...I guess you have a error in your ASP script

To you original question, use "float: right;" not "position: absolute;"

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Big Moxy - 27 Oct 2007 18:28 GMT

On Oct 27, 9:45 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

> > Please check this link -http://projects.zanalysts.com/hearing/work.htm.
> > The graphic is part of the page template. How can I get the text to
[quoted text clipped - 14 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

I'm sorry but that didn't work.

Reply to this Message

Ben C - 27 Oct 2007 18:44 GMT

> On Oct 27, 9:45 am, "Jonathan N. Little" <lws4...@centralva.net>
> wrote:
[quoted text clipped - 18 lines]
>
> I'm sorry but that didn't work.

You appear to have set both float: right and position: absolute. In that
case position: absolute "wins" and setting float: right does nothing.
You can't have both properties at once.

Jonathan is right: the box has to be a float if text is to flow around
it. That's the only way that's going to happen.

You will need to make a few other changes to get your layout back the
way you want it.

Reply to this Message

Big Moxy - 27 Oct 2007 22:46 GMT

> > On Oct 27, 9:45 am, "Jonathan N. Little" <lws4...@centralva.net>
> > wrote:
[quoted text clipped - 30 lines]
>
> - Show quoted text -

Please! I really need help with this. I replaced the table with CSS
and removed "position: absolute" so that "float: right" is the only
one. At this point it doesn't matter what I do, I get the same
results. I also checked Firefox and get really bizarre results.

New links - http://projects.zanalysts.com/hearing/work.aspx
CSS - http://projects.zanalysts.com/hearing/css/hearing2.css

Thank you!!
-tim

Reply to this Message

Ben C - 27 Oct 2007 23:20 GMT

[...]

> Please! I really need help with this. I replaced the table with CSS
> and removed "position: absolute" so that "float: right" is the only
[quoted text clipped - 3 lines]
> New links - http://projects.zanalysts.com/hearing/work.aspx
> CSS - http://projects.zanalysts.com/hearing/css/hearing2.css

OK, here are some suggestions which should get back the layout you had
originally (but with text wrapping around the float).

1. Move <div class="doctor"> and its contents right up in the document
so they're the first thing inside <body>
2. Lose the "align=right" attribute on that image.
3. In hearing2.css, replace:

.doctor {
top: 16px;
left: 0;
border: none;
margin: 0 0 0 0;
float: right;
}

with

.doctor {
margin: 0 0 0 575px;
width: 230px;
}
.doctor img { float: right; }

This keeps the doctor flush against the right hand edge of that blue
title bar thing, which I think is what you had.

Reply to this Message

Big Moxy - 27 Oct 2007 23:56 GMT

> [...]
> > Please! I really need help with this. I replaced the table with CSS
[quoted text clipped - 31 lines]
> This keeps the doctor flush against the right hand edge of that blue
> title bar thing, which I think is what you had.

Almost there! Actually I never had my objective layout. Rather I had
to replace a graphic that fit in the blue page header area with this
new one that spans into the content area.

The reason I said we're almost there is because the layout is perfect
on Firefox but on IE 7 the doctor's pic is in the upper right and the
page header is left justified below it.

Reply to this Message

Big Moxy - 28 Oct 2007 00:28 GMT

> > [...]
> > > Please! I really need help with this. I replaced the table with CSS
[quoted text clipped - 41 lines]
>
> - Show quoted text -

> Now I would also dump the XHTML and use HTML

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

> This doctype will be much easier to get IE on board.

> Dump all those and put your text in proper paragraphs ...

> The next time you get an urge to use a smack yourself, you are
> probably making an error.

Now that I was an eye opener! I made the doctype changes and saw the
font-size changes that had to be made. I guess I'll be a little
bruised for awhile. I always hated using ...

Can you help me why IE is giving me fits?

Reply to this Message

Jonathan N. Little - 28 Oct 2007 02:20 GMT

>>> [...]
>>>> Please! I really need help with this. I replaced the table with CSS
[quoted text clipped - 45 lines]
>> The next time you get an urge to use a smack yourself, you are
>> probably making an error.

Firstly, you've screwed up the quoting, your are replying to my
comments, not Ben's.

> Now that I was an eye opener! I made the doctype changes and saw the
> font-size changes that had to be made. I guess I'll be a little
> bruised for awhile. I always hated using ...

But they are paragraphs, right?

http://en.wikipedia.org/wiki/Paragraph
Paragraph - Wikipedia, the free encyclopedia

Then mark them up as such! If you want more space after a paragraph then
style it so!

p { margin-bottom: 3em; }

don't add s

> Can you help me why IE is giving me fits?

If you search this NG and just Google a bit you will learn then IE does
not really support XHTML. If you don't know why you are usinging it then
you do not *need* to use it. Do yourself a big favor, and use HTML. You
will find it much easier to get IE to render your page more like modern
web browsers.

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Big Moxy - 28 Oct 2007 02:59 GMT

On Oct 27, 6:20 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

> >>> [...]
> >>>> Please! I really need help with this. I replaced the table with CSS
[quoted text clipped - 81 lines]
>
> - Show quoted text -

Sorry for getting the replies out of order. My comments about vs.
 were meant to be rhetorical! I accept your point. The only thing
I don't like is the change to font size. I will have to experiment to
get the desired size. I use Dreamweaver for development and it sets
XHTML by default. I'll find out how to change that to HTML. The page
in question now validates using HTML 4.0.1 Strict.

I still have a problem however. The page displays correctly in Firefox
but not in IE 7. Do you have any suggestions?

Thank you,

Tim

Reply to this Message

Ben C - 28 Oct 2007 09:36 GMT

[...]

>> > New links -http://projects.zanalysts.com/hearing/work.aspx
>> > CSS -http://projects.zanalysts.com/hearing/css/hearing2.css

[...]

>> This keeps the doctor flush against the right hand edge of that blue
>> title bar thing, which I think is what you had.
[quoted text clipped - 6 lines]
> on Firefox but on IE 7 the doctor's pic is in the upper right and the
> page header is left justified below it.

I don't know what to suggest other than painstakingly trying alternative
correct solutions until you find one that IE happens to be able to
display acceptably.

Reply to this Message

Big Moxy - 28 Oct 2007 19:45 GMT

> [...]
>
[quoted text clipped - 16 lines]
> correct solutions until you find one that IE happens to be able to
> display acceptably.

Hi All,

I got a working solution from Experts Exchange. I had to make three
changes.
1) remove the doctor div from the image and simply add float: right to
the img tag
2) define a new class for the entire page with a width of 805px
3) remove the width definitions for all classes except the left menu

One anamoly remains but I don't know how much time I will spend on it.
There's whitespace between blue header divs and the graphic.

This has been a nightmare. Usually we spend our time troubleshooting
the exception cases but not this one. All of my time went to finding a
resolution to a MicroSuxBux problem that they created all because they
are too arrogant to create specification conforming software.

Reply to this Message

Jonathan N. Little - 27 Oct 2007 23:43 GMT

> Please! I really need help with this. I replaced the table with CSS
> and removed "position: absolute" so that "float: right" is the only
> one. At this point it doesn't matter what I do, I get the same
> results. I also checked Firefox and get really bizarre results.

Well you have so many errors and poor markup it is had to know where to
start.

<img src="work.aspx_files/doctor.jpg" align="right" height="344"
width="225"></div>

REMOVE the align="right" and your image will float.

Now I would also dump the XHTML and use HTML

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

This doctype will be much easier to get IE on board.

Dump all those and put your text in proper paragraphs ...

The next time you get an urge to use a smack yourself, you are
probably making an error.

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007

Help needed with text wrapping