Re: Text alignment with floating text
by "Eric A. Meyer" <eam3(at)po.cwru.edu>
|
| Date: |
Tue, 13 Jun 2000 16:39:30 -0400 (EDT) |
| To: |
hwg-style(at)hwg.org |
| In-Reply-To: |
ms |
| |
todo: View
Thread,
Original
|
|
On Tue, 13 Jun 2000 allred(at)its.state.ms.us wrote:
> I've been trying to change some old documents that relied heavily on tables
> for layout to a cleaner CSS version. However, I'm having difficulty getting
> my text to line up. Below is my HTML and corresponding CSS. I've tried a
> number of variations using different properties (which, I'm the first to
> admit, I don't thoroughly understand), but I can't make the baselines of
> the two pieces of text align. For the code given below, in Netscape 4.72,
> the baseline of the "item-cost" class is slightly above that of
> "item-desc." In IE 4.0, each item is on its own line, as if I had put
> "clear" on the item-desc.
I'm willing to bet (although not much) that this is due to IE4 assuming
that any element's width automatically tends to 100%. While this is true of
block-level elements, it's exactly wrong for floated elements, where the
width is supposed to tend toward zero, or some user agent-defined minimum
width. The usual way to get IE4 to float text elements is to specify a width
for those elements. Try adding something like 'width: 5em;', just to see
what IE4 does with it.
> CSS:
> .item-desc {
> float: left;
> margin-left: 20px;
> text-align : left;
> line-height : 0%;
> }
>
> .item-cost {
> margin-right: 50px;
> text-align: right;
> }
The 'line-height' rule could be what's confusing Navigator, although it's
far more likely that the problem there is simply poor float code. Pretty
much every browser I've seen, with the exceptions of Opera 3.6 and IE5/Mac,
has medicore to awful float behavior. While I applaud what you're trying to
do, I think it's probably beyond the browsers you're using to test it.
--
Eric A. Meyer - eric(at)meyerweb.com - http://www.meyerweb.com/eric/
Author, "CSS: The Definitive Guide" http://www.oreilly.com/catalog/css/
Editor, Style Sheets Reference Guide http://style.webreview.com/
Coordinator, CSS1 Test Suite http://www.w3.org/Style/CSS/Test/
HWG hwg-style mailing list archives,
maintained by Webmasters @ IWA
This page is part of a preserved archive of archives.hwg.org. The site is no longer active and its content is not maintained. For enquiries about this archive, write to archive(at)iwanet.org.