467,075 Members | 988 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,075 developers. It's quick & easy.

Text Blocked by DIV Instead of Flowing Around

I'm moderately experienced in CSS.

I am currently working on a new version of my site, built from the
ground up, but the dynamic portion, loaded with a PHP include into the
'chest' DIV is being visually blocked by the 'arm' DIV.

Arm is supposed to be the scalable side-justified navigation bar,
chest is supposed to be the main content. The idea was to create a
partially elastic site so that people could scale it to their liking
in any browser. Because I've tried many different ways to get around
this problem, the IE render is a complete mess, and I get that. The
IEfix css will eventually make the IE render look beautiful, but for
now, I want to get a web-standard one working.

Also, I intend to get the inventively named 'style.css' to style
Navigator 4, IE 4, all the really old browsers, so it's much emptier
than it will be.

I don't want to progress forward until I can get the text flowing
nicely around the the menu, and I've tried about 20 different ways to
do it. I am here to request help.

The problem is CSS. Not PHP. I'm offering up the PHP code that
generated the site as a curiosity, think of it as a fair trade.
Showing how I code so that I can get help in return. I invite others
to use it. I've also included the html output of the PHP code as run
on a PHP5-capable server, so that anyone can easily view the issue on
their computer.

The archive with all the files is at www.gt.horizonhouse.ca/help.tar

Thanks a bunch,
Green Tiger

Jul 12 '07 #1
  • viewed: 2106
Share:
14 Replies
gr*********@gmail.com wrote:
I'm moderately experienced in CSS.
As am I. I look forward to potentially being of help.
>
I am currently working on a new version of my site, built from the
ground up, but the dynamic portion, loaded with a PHP include into the
'chest' DIV is being visually blocked by the 'arm' DIV.
Dear Mr. Tiger, or is it Ms.? (Perhaps I may call you Green?): your
description is picturesque, but obscure. At least, it's a bit too
obscure for me. Do you mean you have a vertical nav bar on one side?
>
Arm is supposed to be the scalable side-justified navigation bar,
chest is supposed to be the main content. The idea was to create a
partially elastic site so that people could scale it to their liking
in any browser.
Excellent! Good plan!
Because I've tried many different ways to get around
this problem,
"problem?" It's not a problem, but an opportunity. A philosophy!
the IE render is a complete mess, and I get that.
Oops. Sounds like you've made a wrong turn somewhere. Or tried to get
too fancy (or specific).
The
IEfix css will eventually make the IE render look beautiful, but for
now, I want to get a web-standard one working.
Whoop! Whoop! Going from "a complete mess" to "beautiful" sounds like
*structural* work is needed, not pouring a whole new CSS file to patch
over it.
>
Also, I intend to get the inventively named 'style.css' to style
Navigator 4, IE 4, all the really old browsers, so it's much emptier
than it will be.
All two dozen users of these browsers will be grateful. Probably. :-P
>
The problem is CSS. Not PHP. I'm offering up the PHP code that
generated the site as a curiosity, think of it as a fair trade.
No deal, Green. ;-) What do I want with PHP code? It's probably specific
to your site anyway, and so of no value to me. If the problem's not in
the PHP, why should we see it?
Showing how I code so that I can get help in return. I invite others
to use it. I've also included the html output of the PHP code as run
on a PHP5-capable server, so that anyone can easily view the issue on
their computer.
I'd more easily view it with a URL. I could then see your (real) output
HTML in all my browsers, deploy my developer tools, check your HTTP
headers, etc.
>
The archive with all the files is at www.gt.horizonhouse.ca/help.tar
I don't have a convenient way to deal with a .tar file (I'd rather be
thrown in the briar patch), so I can't help you any further than I have,
which I don't expect to be too far. :-(

So sorry.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
Jul 12 '07 #2
gr*********@gmail.com wrote:
>
I don't want to progress forward until I can get the text flowing
nicely around the the menu

The archive with all the files
Sorry, nobody wants to download your php code or set up a test server to
run your stuff.

Load the web page from your server into your browser, then Save the page
as HTML, complete with CSS and graphics. Upload that to a publicly
accessible server and post the URL. Do not post code.

Just don't use IE to save the page because it will horribly mangle both
HTML and CSS code. Firefox or Opera should do minimal damage.

--
Berg
Jul 12 '07 #3
On Jul 12, 11:46 am, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
greentig...@gmail.com wrote:
I'm moderately experienced in CSS.

As am I. I look forward to potentially being of help.
An undertone of sarcasm in the reply. I happen to find that very
promising, reminds of Joss Whedon's writing, especially on Firefly.
Allows me to smile as I read the replies.

As for putting the files online at url
http://www.gt.horizonhouse.ca/helpme...youbeinground/

Kidding. They're at www.gt.horizonhouse.ca/help/output.html

Thanks Everyone!

Jul 12 '07 #4
gr*********@gmail.com wrote:
I'm moderately experienced in CSS.

I am currently working on a new version of my site, built from the
ground up, but the dynamic portion, loaded with a PHP include into the
'chest' DIV is being visually blocked by the 'arm' DIV.

<www.gt.horizonhouse.ca/help/output.html>
Fix the HTML and CSS validation errors first. Your code is a mess.
<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gt.horizonhouse.ca%2Fhe lp%2Foutput.html&charset=iso-8859-1&doctype=Inline&verbose=1>
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2F www.gt.horizonhouse.ca%2Fhelp%2Foutput.html>

For starters:
- <linkand <metatags outside of the <headsection.
- No character set given.
- Mixing HTML and XHTML syntax.
- Putting a <ulin a header element, <h5>. It's hard to imagine a
justification for this.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 12 '07 #5
On 2007-07-12, gr*********@gmail.com <gr*********@gmail.comwrote:
[...]
Kidding. They're at www.gt.horizonhouse.ca/help/output.html
You say "Re: Text Blocked by DIV Instead of Flowing Around"-- presumably
you mean that menu system on the left? It's absolutely positioned, which
means text isn't supposed flow around it. It's supposed just to get sat
on as if it wasn't there, which is what you're seeing.

If you want text flowing around things, you need to use floats.
Jul 12 '07 #6
On Jul 12, 4:41 pm, Jim Moe <jmm-list.AXSPA...@sohnen-moe.comwrote:
Fix the HTML and CSS validation errors first. Your code is a mess.
<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gt.horizonhouse.ca...>
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&u...>

For starters:
- <linkand <metatags outside of the <headsection.
- No character set given.
- Mixing HTML and XHTML syntax.
- Putting a <ulin a header element, <h5>. It's hard to imagine a
justification for this.
BWARKK? I'm not the chickenman!

Wow, didn't realize it validated that badly. I was going to worry
about validation last.......
What really annoys me is that a fair chunk, 1/5 of the errors, come
from the FLASH code, which was COPY-PASTED, and not even
MINE....ARGGGHHH.

Apart from that, yes, most of it is my fault for writing too quickly
for too long with a tool too primitive. First three weeks of the
project was all done in Notepad...working with PSPad now. So I'll
work on getting it validated and so forth, but is it really validation
that's causing my floating div blocking issue?

Don't get me wrong, I want to make a really good, accessable,
validated webpage, and I'm already working on the parts that I
should've worked on earlier. I am NOT taking your advice and throwing
it in your face, either. I'm just wondering if HTML validation issues
are really what's causing my CSS to act strange. I do know that most
of my CSS validates okay, except for the occasional hack or two which
I'm slowly moving to iefix.css ...

In any case, thank you all so far and I hope I get this worked out
soon.
Jul 12 '07 #7
On Jul 12, 5:16 pm, Ben C <spams...@spam.eggswrote:
On 2007-07-12, greentig...@gmail.com <greentig...@gmail.comwrote:
[...]
Kidding. They're atwww.gt.horizonhouse.ca/help/output.html

You say "Re: Text Blocked by DIV Instead of Flowing Around"-- presumably
you mean that menu system on the left? It's absolutely positioned, which
means text isn't supposed flow around it. It's supposed just to get sat
on as if it wasn't there, which is what you're seeing.

If you want text flowing around things, you need to use floats.
Ah, I wasn't aware that abs positioning had this effect. Thank you
very much for the prompt reply!

Thank you, all, for your advice.

Jul 12 '07 #8
In article
<11**********************@o61g2000hsh.googlegroups .com>,
gr*********@gmail.com wrote:
On Jul 12, 5:16 pm, Ben C <spams...@spam.eggswrote:
On 2007-07-12, greentig...@gmail.com <greentig...@gmail.comwrote:
[...]
Kidding. They're atwww.gt.horizonhouse.ca/help/output.html
You say "Re: Text Blocked by DIV Instead of Flowing Around"-- presumably
you mean that menu system on the left? It's absolutely positioned, which
means text isn't supposed flow around it. It's supposed just to get sat
on as if it wasn't there, which is what you're seeing.

If you want text flowing around things, you need to use floats.

Ah, I wasn't aware that abs positioning had this effect. Thank you
very much for the prompt reply!

Thank you, all, for your advice.
Forget about absolute positioning. This _sort_ of thing is
simpler and might do you to start with:

<body>
<div id="nav">...</div>
<div id="content">...</div>

in the html with

#nav {
float: left;
width: 9em;
}

#content {margin-left: 10em;}

--
dorayme
Jul 12 '07 #9
gr*********@gmail.com wrote:
On Jul 12, 11:46 am, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
>greentig...@gmail.com wrote:
>>I'm moderately experienced in CSS.
As am I. I look forward to potentially being of help.

An undertone of sarcasm in the reply.
Sheesh! If folks see sarcasm when I write straight, it's no wonder they
get all upset whan I actually apply a little sarcastic humor (not to
mention full sarcasm). Guess I need to watch myself.[1]
>
Kidding. They're at www.gt.horizonhouse.ca/help/output.html
I was out for a while and it seems that other folks have fixed you up.
I'm glad you're (back) on the path to success.
[1] I sincerely mean this.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
Jul 13 '07 #10
gr*********@gmail.com wrote:
>
Wow, didn't realize it validated that badly. I was going to worry
about validation last.......
It should be done ongoing.
Having validations errors forces browsers to recover by guessing your
intent. They do an amazing job of that, overall. Still you never know what
can happen.
I looked only briefly at your CSS. For instance, for some margins there
were units missing (should 10 be px, em, %, what?). Errors like that
produce unpredictable actions.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 13 '07 #11
On Jul 12, 5:18 pm, greentig...@gmail.com wrote:
Wow, didn't realize it validated that badly. I was going to worry
about validation last.......
What really annoys me is that a fair chunk, 1/5 of the errors, come
from the FLASH code, which was COPY-PASTED, and not even
MINE....ARGGGHHH.
Personally, I never trust generated markup. By doing your validation
early and often, it your hopefully reduces your problem to mistakes
you made in other areas.

Jul 13 '07 #12
On Jul 12, 10:53 pm, Jim Moe <jmm-list.AXSPA...@sohnen-moe.comwrote:
I looked only briefly at your CSS. For instance, for some margins there
were units missing (should 10 be px, em, %, what?). Errors like that
produce unpredictable actions.
I was always under the impression that the units defaulted to px when
the units were not supplied.

The HTML is now completely valid, I've changed around some CSS stuff,
but still no dice so far.

Does look a little prettier on the code side, of course.

http://www.gt.horizonhouse.ca/help/output.htm

Jul 13 '07 #13
Wait! I got it, now! Now that my code is alot cleaner, it was a
breeze. Thanks everyone!

Jul 13 '07 #14
On 2007-07-13, gr*********@gmail.com wrote:
Wait! I got it, now! Now that my code is alot cleaner, it was a
breeze.
There are problems: <http://cfaj.freeshell.org/testing/gt.jpg>,
<http://cfaj.freeshell.org/testing/gt2.jpg>.

You are making assumptions about the size of the type that will
appear on a user's browser. You cannot do that. And if you could
specify the exact size of type without allowing the reader to
change it, it would be illegible and therefore useless.

You also need to specify colours for the links. They are
illegible.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Jul 13 '07 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Eric Osman | last post: by
1 post views Thread by Aaron | last post: by
11 posts views Thread by Robert Bowen | last post: by
3 posts views Thread by gallery | last post: by
5 posts views Thread by Steel | last post: by
14 posts views Thread by Eric Lindsay | last post: by
1 post views Thread by Paolo Pignatelli | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.