|
Posted by axlq on April 2, 2006, 6:26 pm
Please log in for more thread options
I created an experimental page at:
http://sunbeam.rahul.net/~unicorn/csstest.html
...which is a standard header + nav bar + 2-column content + footer
CSS layout.
The left column is 10em wide and contains two block elements:
1. The first block element contains a small table wider than 10em.
Yes, I know this particular example doesn't truly need a table.
Let's assume it does, that I actually have tabular data to display
there.
2. The second block element contains a list of links.
This layout gives me inconsistent behavior in various browsers:
IE:
Box 1 automatically adjusts its width to contain the table, but
the other elements contained inside that box don't get wider, they
inherit 10em and don't change. Box 2 remains at 10em. The text in
the right column wraps around the wider part of the left column.
Opera, Firefox:
These browsers keep the left column at 10em. However, the block
elements DON'T contain the table properly; instead, the table pokes
out the right side. The text in the right column is not wrapped
around the table intruding into it.
How would I get such a layout to display consistently across browser
platforms, without using fixed-pixel sizes everywhere?
(Before anyone asks why it's HTML 4.01 Transitional instead of
strict, it's because this is part of re-doing a table-heavy site
that uses numerous table attributes [such as nowrap] that are legal
in Transitional but not strict. Even the layout is table-based,
which I'm trying to change. In any case, I don't think it would
matter for the posted problem.)
-A
|
|
Posted by Jim Moe on April 3, 2006, 4:42 pm
Please log in for more thread options
axlq wrote:
> I created an experimental page at:
> http://sunbeam.rahul.net/~unicorn/csstest.html
> ...which is a standard header + nav bar + 2-column content + footer
> CSS layout.
>
> The left column is 10em wide and contains two block elements:
> [...]
> This layout gives me inconsistent behavior in various browsers:
>
IE incorrectly expands a div with a fixed width to fit its content.
To get what you want:
1. Remove #leftpanel { width:10em }
2. Remove <table width="100%">
3. Remove <hr width="80%">. Use a border property to put a line there,
say, for the <p> element that should contain "Admin Login."
Other notes:
- "<div class="invert"><b>Member Login</b></div>" is a heading. So use a
heading element (probably <h2>). Same for "Tour our website," "Resources,"
"Search Content," "View Content," etc.
- Body text is set to 83.33%, 16.66% smaller than I prefer.
- You use <br> where <p> is more semantically correct.
- Use ems to set the width of the <input> element. The width is much more
consistent across browsers that way. A gotcha is that the rule should be
applied as specifically as possible otherwise it applies to radio buttons,
check boxes, etc., as well.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
|
|
Posted by Jim Moe on April 3, 2006, 8:58 pm
Please log in for more thread options
Jim Moe wrote:
> 1. Remove #leftpanel { width:10em }
> 2. Remove <table width="100%">
> 3. Remove <hr width="80%">.
>
Crud. I was not clear.
1. remove the rule "width:10em"
2. remove the property width="100%"
3. remove the element <hr> completely.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
|
|
Posted by axlq on April 3, 2006, 11:22 pm
Please log in for more thread options
>Jim Moe wrote:
>> 1. Remove #leftpanel { width:10em }
>> 2. Remove <table width="100%">
>> 3. Remove <hr width="80%">.
That resulted in very odd behavior in IE, but normal behavior in Firefox
and Opera. The <hr width="80%"> expanded to 80% of the viewport in IE.
In the other browsers it expanded to 80% of whatever size the div block
needed to be to fit the text.
> Crud. I was not clear.
>1. remove the rule "width:10em"
>2. remove the property width="100%"
>3. remove the element <hr> completely.
THAT worked quite well! Thanks.
-A
|
| Similar Threads | Posted | | [newbie] client side jscript for a table inside a table | March 24, 2005, 8:01 am |
| table inside form? | March 31, 2006, 10:50 pm |
| DIVs inside table cells? | April 13, 2008, 9:46 am |
| CSS property float: left inside table? | July 19, 2007, 5:24 am |
| Image Positioning Inside Table Problem (IE only) | January 2, 2008, 8:09 am |
| Text and Image inside table | Alight Text Left and Image right in same cell ?? | October 24, 2006, 12:55 am |
| What's causing the gap between the logo and the next block? | November 9, 2008, 8:56 am |
| How to make block elements flow? | May 15, 2005, 6:50 pm |
| DTD? Is address element block or inline? | December 15, 2005, 10:16 pm |
| IE7 Display:BLock and line breaks | March 27, 2008, 2:41 pm |
|
XML Sitemap