Using percentage widths

[K A Nuttall]

IE problem is a round off error. Pisser,but you can compromise by
tweaking the LI to:

.hzmenu li {
width: 19.95%;
}

It is a PITA though, take it up with MS, they don't seem compelled
to really support CSS spec even for version 7. Maybe they need to
leave somethings to sell us on upgrading version 8 (Only available
with the Windows after Vista!)

Thanks. I used something very similar on the real site. It's not
condusive to designing fluid layouts, when you can't even get the most
popular browsers on the planet to add up to 100.

As an aside, something I've always wondered is: how do agents actually
handle these 'mad' percentages? I'm sure I read somewhere that setting
font-size in percentages was hit and miss, unless working in 5%
graduations. Do browsers really take notice of 0.05% widths?

What would be nice is if there's some way of introducing a small margin
on either side of the page, which 'absorbs' any excess width without
the wrapping.

 

[dorayme]

Well, it does, but there is a simple and widely known fix for it that
won't even upset the validator.

When I have had to provide for this, I do one of a number of
things. Either a css instruction for IE eyes only (with different
dims) or else make for looser design where it does not much
matter. When right text is likely to drop below a left float, I
tend to do the first because of the jog, otherwise the second.

Now, Ed, your turn to spill your beans.

 

[dorayme]

Which code? The example HTML, or what you reconstruct from my
abbreviated description of the alternative using floats?


Not necessarily, in many circumstances where leave the width as auto you
get the "shrink-to-fit" width (which you also get for floats with auto
width). Sometimes this is just what you want.

In any case, as demonstrated, you can set left and right but not width.

You may be right that some or all of this doesn't works in IE6, I don't
know, I haven't tried it.

I tried Ben C's suggestions and played about with it (I adapted
it to the OP's page) and it worked fine as intended by Ben. There
was a restrictive height in it (to fit in with the OP desires).
Remove this restriction and complications come in re the look of
column lengths, borders. Which will be fun when I adapt it to
suit me (I am wanting to have at least one site that uses
absolute for the operation of the three cols but no fixed height
- just to add variety to my stable).

Ben, you owe it to the group to get an old PC and Windows to see
what is going on. You have been so helpful to so many people that
it is unfair to leave them dangling when it comes to the IE
browsers that almost seem to be the overwhelming choice of all
not on alt.html. Please go to eBay today and pick one up for a
song, turn it on just occasionally. Like me - feelings of guilt
that I have not for a while...<g>

 

[-Lost]

Which code? The example HTML, or what you reconstruct from my
abbreviated description of the alternative using floats?

I did not reconstruct anything. I used *your* markup and CSS and applied it to a page.
You said they still span from left to right evenly across the page. I merely pointed out
that they do not spread evenly across the page and of course do not fill the width of the
browser.

What other word do you use to describe elements floating in the page other than "float"?
I never said I used float, I said they floated.

Not necessarily, in many circumstances where leave the width as auto you
get the "shrink-to-fit" width (which you also get for floats with auto
width). Sometimes this is just what you want.

The standards state that a floated box *must have* an explicit width assigned via the
"width" property.

Your "shrink-to-fit" theory may work in the quirkiest of situations, but it is not
standard.

Anyway, after that small pissing match I just want it stated I was attempting to learn
from all given examples, I just did not understand yours is all. No offenses intended.

Be well.

-Lost

 

[Ben C]

I did not reconstruct anything. I used *your* markup and CSS and applied it to a page.
You said they still span from left to right evenly across the page. I merely pointed out
that they do not spread evenly across the page and of course do not fill the width of the
browser.

They did in all the browsers I tried, and that is the specified
behaviour.

What other word do you use to describe elements floating in the page other than "float"?
I never said I used float, I said they floated.

Disambiguation accepted.

[snip]

The standards state that a floated box *must have* an explicit width assigned via the
"width" property.

Which standards and where does it say that?

Your "shrink-to-fit" theory may work in the quirkiest of situations, but it is not
standard.

It's not my theory, it's all in CSS 2.1 (which is a "draft
recommendation"). Which standard are you referring to?

Anyway, after that small pissing match I just want it stated I was attempting to learn
from all given examples, I just did not understand yours is all. No offenses intended.

None taken. Happy holidays.

 

[-Lost]

Thanks. I used something very similar on the real site. It's not
condusive to designing fluid layouts, when you can't even get the most
popular browsers on the planet to add up to 100.

As an aside, something I've always wondered is: how do agents actually
handle these 'mad' percentages? I'm sure I read somewhere that setting
font-size in percentages was hit and miss, unless working in 5%
graduations. Do browsers really take notice of 0.05% widths?

What would be nice is if there's some way of introducing a small margin
on either side of the page, which 'absorbs' any excess width without
the wrapping.

I know this is not exactly what you intended by a margin absorbing the excess, but you
could always wrap the content (your horizontal menu for instance) in a wrapper and center
it. Thereby the few pixels left on either side will at least be even.

Another (horrid) way is to use a table as most do to get absolute widths and heights.

-Lost

 

[Ben C]

Ben, you owe it to the group to get an old PC and Windows to see
what is going on.

Sure, as soon as they release Windows and IE under the GPL I'll install
it on an old PC.

 

[-Lost]

Which standards and where does it say that?


It's not my theory, it's all in CSS 2.1 (which is a "draft
recommendation"). Which standard are you referring to?

Oh boy, I hate this part. I hope I have not misunderstood, but:

http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Second paragraph.

None taken. Happy holidays.

Thank you. Happy Holidays to you and yours as well.

-Lost

 

[dorayme]

Oh boy, I hate this part. I hope I have not misunderstood, but:

http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Second paragraph.

Fair enough... this section might be better written. If you look
closely, there is mention of intrinsic width. Pictures (for which
floating was primarily introduced) have a natural (intrinsic
width). It may be a good idea to give a width to other non
picture/movie/... floated blocks but if you do not, there is a
default natural size, something that can be thought to be
"intrinsic" delivered by whatever content thre happens to be: the
amount of text, the size of the fonts, whether or not any <br>s
are used. Even in text there is official intrinsic width in that
words and phrases (think email and web addresses) dictate a
certain width to the floated box. So they will have, in any given
situation, an intrinsic width. So you don't absolutely have to
give an explicit one.

 

[Ed Seedhouse]

When I have had to provide for this, I do one of a number of
things. Either a css instruction for IE eyes only (with different
dims) or else make for looser design where it does not much
matter. When right text is likely to drop below a left float, I
tend to do the first because of the jog, otherwise the second.

Now, Ed, your turn to spill your beans.

As I recall, you apply the rule "display: block;" to the floated
elements. This is redundant and pointless in a good browser, but not
invalid, and it fixes the IE margin bugs on floats. Or at least the
sources I read tell me so, I haven't actually tested it.

 

[dorayme]

As I recall, you apply the rule "display: block;" to the floated
elements. This is redundant and pointless in a good browser, but not
invalid, and it fixes the IE margin bugs on floats. Or at least the
sources I read tell me so, I haven't actually tested it.

Not quite as simple as this for the various situations. In
addition to references I gave earlier, perhaps see also

<http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0>

Anyway...

 

[Ben C]

Oh boy, I hate this part. I hope I have not misunderstood, but:

http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Second paragraph.

You're absolutely right; it turns out this is a difference between CSS
2 and CSS 2.1.

If you look at section 9.5 in CSS 2.1, they cut the bit about explicit
width, and if you compare sections 10.3.5 in both documents, they say:

in CSS 2:

If 'left', 'right', 'width', 'margin-left', or 'margin-right' are
specified as 'auto', their computed value is '0'.

in CSS 2.1:

If ’margin-left’, or ’margin-right’ are computed as ’auto’,
their used value is ’0’.

If ’width’ is computed as ’auto’, the used value is the
"shrink-to-fit" width.

 

[K A Nuttall]

You mentioned setting margin/padding in ems. To further reduce
the
wrapping problem, set the horizontal margin/padding with
percentages as well. For an 800px wide viewport and 16px text, 2%
corresponds to 1em. Then your only problem will be borders.

Yes, I'm not too happy with the results of using side margins/padding
in ems, so far. It means that I have to nest DIVs to get a consistent
width, as using ems for typefaces of various sizes creates various
widths!

So, all in all, a fairly unpleasant foray into fluid layouts, so far. I
think it's coming back to me now: one of the reasons why I adopted
fixed-width layouts in the first place.

However, I'll stick with it a bit longer. I'm not keen on specifying
widths like 24.99%, and worrying about ragged right-edges, nor going
back to absolutely positioned divs. I like to keep things simple.

Season's Greetings to all.