Help with column layout exploding out of container, text-imagealignment, column height...

I'm having trouble getting my <a href="http://www.freewebtown.com/
emailceloftis/Dashboard.html" target="_blank">layout</a> to work
across all browsers. The layout was originally published on an
internal network targeting IE only - now management wants to make it
publicly available & renderable cross-browser. So, currently, the page
only renders the way I want it to look in IE, but not in other
browsers.

Here's what I am shooting for - the page has its main content area
floating over a header image (so that the content overlaps the image).
The width of the main content area is some fraction of the document's
width so that the content area has a fluid width. The main content
area is divided into two rows. The top row is for an image, some text
and an absolutely positioned link (Logoff). The bottom row is divided
into three columns that are intended to run the height content area's
second row. The left and right columns are fixed width and the center
column should be fluid.

In browsers other than IE I notice several problems:
1. The right column in the second row explodes out of the bottom of
its container. I am not sure if there is a clean way to fix this. Can
someone explain why this happens and make suggestion(s) on how to
correct this?
2. The Label for Row#1 is not vertically aligned on the image. How can
I change this so that the text is vertically aligned?
3. On Row#2, the left column is shifted to the right by the width of
the image in the Row#1. Can someone explain why this happens and how I
can correct this?
4. On Row#2, the middle column content flows around the left column -
how can I correct this?

The problems are prioritized with 1 being the one I am most interested
in learning how to solve. If you see other rendering problems feel
free to make suggestions.

Note: the <a href="http://validator.w3.org/check?uri=http%3A%2F
%2Fwww.freewebtown.com%2Femailceloftis%2FDashboard .html">page</a> is
valid XHTML 1.0 Transitional. Also, the <a href="http://jigsaw.w3.org/
css-validator/validator?uri=http%3A%2F%2Fwww.freewebtown.com
%2Femailceloftis
%2FDashboard.html&profile=css21&usermedium=all&war ning=1">page</a> is
valid CSS level 2.1

In article
<19eefbf5-2630-4e2d-85d7-c78884f11027 (AT) a12g2000yqm (DOT) googlegroups.com>,
"celoftos (AT) gmail (DOT) com" <celoftis (AT) gmail (DOT) com> wrote:

I'm having trouble getting my <a href="http://www.freewebtown.com/
emailceloftis/Dashboard.html" target="_blank">layout</a> to work
across all browsers. ...
....

I am looking at your:

<http://www.freewebtown.com/emailceloftis/Dashboard_DTD_HTML_4_srict.html

In browsers other than IE I notice several problems:
1. The right column in the second row explodes out of the bottom of
its container. I am not sure if there is a clean way to fix this. Can
someone explain why this happens and make suggestion(s) on how to
correct this?

You might look over

<http://netweaver.com.au/floatHouse/>

where some of these things are explained and some differences noted
between IE and other modern browsers. And some ways to deal with it.

(btw, before I forget, your arrows look bad (squashed, blurry,
stretched), presumably because you have not properly specified their
natural width and height or at least their natural proportions.

2. The Label for Row#1 is not vertically aligned on the image. How can

<div id="rowTop">
<div id="rowTop_image">
<img src="images/arrow.jpg" title="" alt="image">
</div>
<table><tbody><tr><td>
<span>Label for Row#1</span>
</td></tr></tbody></table>
</div>

seems rather a complicated way to do things?

Sure you can't save yourself a headache with:

<table><tr><td>
<img src="images/arrow.jpg" title="" alt="..."></td>
<td>Label for Row#1</td>
</tr></tbody></table>

which does the exact line up you seem to want?

But let us suppose that the exercise is to align a bit of text inside
the first cell of a table that has an image *outside* the table as in
your case. Well now... shall I attempt this magic trick before my
breakfast? Why not?

Remove all else to see:


<div>
<img style="float:left;"src="images/arrow.jpg" title="" alt="image" >
<table><tbody><tr><td style="height: 85px;">Label for Row#1
</td></tr></table>
</div>

Have to have breakfast now! More later maybe.

--
dorayme

In article
<doraymeRidThis-97DF68.10251114022009 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Remove all else to see:


div
img style="float:left;"src="images/arrow.jpg" title="" alt="image"
table><tbody><tr><td style="height: 85px;">Label for Row#1
/td></tr></table
/div

Your image was naturally 85 or 86px high (I forget), I did not cut out
all your code or add width and height to the image element (as should be
done). I mention in case this puzzles...

--
dorayme

On Feb 13, 6:25*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
19eefbf5-2630-4e2d-85d7-c78884f11... (AT) a12g2000yqm (DOT) googlegroups.com>,

*"celof... (AT) gmail (DOT) com" <celof... (AT) gmail (DOT) com> wrote:
I'm having trouble getting my <a href="http://www.freewebtown.com/
emailceloftis/Dashboard.html" target="_blank">layout</a> to work
across all browsers. ...

...

I am looking at your:

http://www.freewebtown.com/emailceloftis/Dashboard_DTD_HTML_4_srict.html



In browsers other than IE I notice several problems:
1. The right column in the second row explodes out of the bottom of
its container. I am not sure if there is a clean way to fix this. Can
someone explain why this happens and make suggestion(s) on how to
correct this?

You might look over

http://netweaver.com.au/floatHouse/

where some of these things are explained and some differences noted
between IE and other modern browsers. And some ways to deal with it.

(btw, before I forget, your arrows look bad (squashed, blurry,
stretched), presumably because you have not properly specified their
natural width and height or at least their natural proportions.

2. The Label for Row#1 is not vertically aligned on the image. How can

div id="rowTop"
div id="rowTop_image"
img src="images/arrow.jpg" title="" alt="image"
/div
table><tbody><tr><td
span>Label for Row#1</span
/td></tr></tbody></table
*</div

seems rather a complicated way to do things?

Sure you can't save yourself a headache with:

table><tr><td
img src="images/arrow.jpg" title="" alt="..."></td
td>Label for Row#1</td
/tr></tbody></table

which does the exact line up you seem to want?

But let us suppose that the exercise is to align a bit of text inside
the first cell of a table that has an image *outside* the table as in
your case. Well now... shall I attempt this magic trick before my
breakfast? Why not?

Remove all else to see:

div
img style="float:left;"src="images/arrow.jpg" title="" alt="image"
table><tbody><tr><td style="height: 85px;">Label for Row#1
/td></tr></table
/div

Have to have breakfast now! More later maybe.

--
dorayme

Nice - I'll take a read on your containers primer.
RE: Image in RowTop was to be outside the table with the text centered
vertically by the table. I follow your magic - thanks.

On Feb 13, 8:04*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
doraymeRidThis-97DF68.10251114022... (AT) news-vip (DOT) optusnet.com.au>,

*dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
Remove all else to see:

div
img style="float:left;"src="images/arrow.jpg" title="" alt="image"
table><tbody><tr><td style="height: 85px;">Label for Row#1
/td></tr></table
/div

Your image was naturally 85 or 86px high (I forget), I did not cut out
all your code or add width and height to the image element (as should be
done). I mention in case this puzzles...

--
dorayme

No problem I was following... thanks.

On 02/13/09 01:51 pm, celoftos (AT) gmail (DOT) com wrote:

I converted the DTD to HTML 4 strict, corrected the validation errors,
removed the javascripting & moved the inline styles to an external
file.

The modified page page can be found here:
http://www.freewebtown.com/emailceloftis/Dashboard_DTD_HTML_4_srict.html.

Quite an improvement!

You've made a common mistake when transitioning to Strict and CSS:
You've replaced common HTML markup elements with equivalent DIV styles,
mostly by replacing <hx> and <p>. For example, class "Course_GrpTitle"
should be an <h2> or <h3>.

In addition to the 4 issues I listed in the original thread, you
mentioned previously that the layout degrades poorly as the font size
increases - any suggestions on how to deal with that?

Your test case does not demonstrate the described behavior.

Set the widths using %, not px or pt. The widths then adapt to the
visitor's viewport. An alternate method uses ems to specify the width to
adapt to text size changes by the user's browser.
All text sizing are specified in ems (or %).

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

On Feb 13, 6:25*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
19eefbf5-2630-4e2d-85d7-c78884f11... (AT) a12g2000yqm (DOT) googlegroups.com>,

*"celof... (AT) gmail (DOT) com" <celof... (AT) gmail (DOT) com> wrote:
I'm having trouble getting my <a href="http://www.freewebtown.com/
emailceloftis/Dashboard.html" target="_blank">layout</a> to work
across all browsers. ...

...

I am looking at your:

http://www.freewebtown.com/emailceloftis/Dashboard_DTD_HTML_4_srict.html



In browsers other than IE I notice several problems:
1. The right column in the second row explodes out of the bottom of
its container. I am not sure if there is a clean way to fix this. Can
someone explain why this happens and make suggestion(s) on how to
correct this?

You might look over

http://netweaver.com.au/floatHouse/

where some of these things are explained and some differences noted
between IE and other modern browsers. And some ways to deal with it.

(btw, before I forget, your arrows look bad (squashed, blurry,
stretched), presumably because you have not properly specified their
natural width and height or at least their natural proportions.

2. The Label for Row#1 is not vertically aligned on the image. How can

div id="rowTop"
div id="rowTop_image"
img src="images/arrow.jpg" title="" alt="image"
/div
table><tbody><tr><td
span>Label for Row#1</span
/td></tr></tbody></table
*</div

seems rather a complicated way to do things?

Sure you can't save yourself a headache with:

table><tr><td
img src="images/arrow.jpg" title="" alt="..."></td
td>Label for Row#1</td
/tr></tbody></table

which does the exact line up you seem to want?

But let us suppose that the exercise is to align a bit of text inside
the first cell of a table that has an image *outside* the table as in
your case. Well now... shall I attempt this magic trick before my
breakfast? Why not?

Remove all else to see:

div
img style="float:left;"src="images/arrow.jpg" title="" alt="image"
table><tbody><tr><td style="height: 85px;">Label for Row#1
/td></tr></table
/div

Have to have breakfast now! More later maybe.

--
dorayme

I was able to address the 4 issues that I noted to start this thread.
See the result here: http://www.freewebtown.com/emailceloftis/Dashboard_DTD_HTML_4_strict_mod.html.

Next I'll try to address the degradation when the text size is
increased. Joe, I'm not sure exactly what you are referring to with
this statement - can you elaborate?

Your test case does not demonstrate the described behavior.

Hopefully post final page soon & thanks for the help.

On 02/14/09 10:02 pm, celoftos (AT) gmail (DOT) com wrote:

[...] Joe, I'm not sure exactly what you are referring to with
this statement - can you elaborate?
Your test case does not demonstrate the described behavior.

Your original post was asking about the right column that was much wider

than you expected. The new page does not show that.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)