473,326 Members | 2,125 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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
14 2464
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Eric Osman | last post by:
This text starts +---------------+ on the left but | | then when the box | some boxed | ends we see that | text | the text on the | | left is...
1
by: Aaron | last post by:
I'm using relative positioning to move a right-floated image 10px upwards.. Text wrapping around the image should go underneath it once it reaches the bottom of the image, yet it acts as if the...
11
by: Robert Bowen | last post by:
Hello all. I have been given mock-ups (in static HTML) of some pages for a site I am working on. The client would like these pages to look exactly as they do now. The problem is that the content is...
3
by: gallery | last post by:
This has stumped me. The text is not flowing properly to the left of an image I have floated to the right in IE. Seems fine in Firefox. I'm on a WinXP ... ...
5
by: Steel | last post by:
Hi at all, how is it possible to insert (Fuyll immersion) an image into a text so that the text is all around the image using CSS2+? Thank in advance Steel
14
by: Eric Lindsay | last post by:
I've seen a page using display, and especially display table that did some neat things with boxes, but basically it only worked with Mozilla browsers. Fell over fairly badly with Opera and Safari...
1
by: Paolo Pignatelli | last post by:
I would like to have images, that are generated from a SQL Server (an address to the images) flow around text that a label gets dynamically from a SQL Server. Any recommendations, please? TIA,...
14
by: Zhang Weiwu | last post by:
Hello. I have been using word processor like OOO for nearly 10 years and such layout is very usual to me: gopher://sdf.lonestar.org/I/users/weiwu/ooo_wrap_correctly.png but I found it's very...
8
by: Jonathan Sachs | last post by:
I'm trying to compose a list of items, each of which consists of text that wraps around a picture at the left margin. The examples I have seen tell me to do it like this: <p><img src="xxxx.jpg"...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.