width: auto seems to be ignoring me in Mozilla

[Robert Downes]

I'm using the following in a page that I'm testing in Mozilla:

p.actionLinkBlo ck {border: 1px #000000 dashed; padding: 0.2cm; width: auto}

But the dashed border is extending to the right-edge of the screen. I
want it to only extend as far as it needs to to nicely contain the
content within (a couple of links).

Is width: auto the wrong property to do this? Is Mozilla rendering the
style wrong?
--
Bob

[Steve Pugh]

Robert Downes <no**********@s ee.my.signature .com> wrote:

I'm using the following in a page that I'm testing in Mozilla:

p.actionLinkBlo ck {border: 1px #000000 dashed; padding: 0.2cm; width: auto}
Presumably this is for a print style sheet.
But the dashed border is extending to the right-edge of the screen.
Oh. What do you expect cm to mean on screen? If I hold a ruler up to
my screen will your padding really be 0.2cm? Perhaps it's a typo and
you meant 0.2em?
I want it to only extend as far as it needs to to nicely contain the
content within (a couple of links).

Is width: auto the wrong property to do this? Is Mozilla rendering the
style wrong?

You need to read http://www.w3.org/TR/CSS2/visudet.html#q6

As you can see, your formulation means that width: auto; assigns the
full width of the parent minus border and padding.

You need to set an explicit width, setting it in ems will allow you to
set it so that it adjusts to the size of the contained text.
Alternatively set explicit values for the margins and keep width:
auto;

Or you may be able to float it and omit the width. This is forbidden
in CSS2 but allowed in the proposed CSS2.1 and catered for by browser
bugs/features.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Robert Downes]

Steve Pugh wrote:

Robert Downes <no**********@s ee.my.signature .com> wrote:

I'm using the following in a page that I'm testing in Mozilla:

p.actionLinkBlo ck {border: 1px #000000 dashed; padding: 0.2cm; width: auto}

Presumably this is for a print style sheet.

No, it is one of several optional stylesheets for display on screen.

But the dashed border is extending to the right-edge of the screen.

Oh. What do you expect cm to mean on screen? If I hold a ruler up to
my screen will your padding really be 0.2cm? Perhaps it's a typo and
you meant 0.2em?

I'm using XFree86. The monitor display area is specified in the
configuration, so DPI values can be calculated. More importantly,
Mozilla offers a DPI calibrator, (although it does require getting out a
tape-measure and measuring a rather-too-short line on the screen).

There will be non-fixed style sheets available as default.

I want it to only extend as far as it needs to to nicely contain the
content within (a couple of links).

Is width: auto the wrong property to do this? Is Mozilla rendering the
style wrong?

You need to read http://www.w3.org/TR/CSS2/visudet.html#q6

As you can see, your formulation means that width: auto; assigns the
full width of the parent minus border and padding.

Read the section you pointed to. Even using the following:

p.actionLinkBlo ck {background: #ffffff; width: auto; margin-right: auto;
border-width: 0}

I still get a box that extends to the right-edge of the screen. The
browser must be seeing that both width and margin-right are auto, and
giving width precedence, rather than making the margin as big as possible.
You need to set an explicit width, setting it in ems will allow you to
set it so that it adjusts to the size of the contained text.
Alternatively set explicit values for the margins and keep width:
auto;
Explicit width is no good. I just want an automatically-determined
minimum-width-necessary dashed border around the list of links. I find
it hard to believe something as big as CSS 2 does not offer such a setting.
Or you may be able to float it and omit the width. This is forbidden
in CSS2 but allowed in the proposed CSS2.1 and catered for by browser
bugs/features.

CSS 2.1 is not in CR yet (still haven't worked out what that means), so
Mozilla is pretty patchy on that front.

[Steve Pugh]

Robert Downes <no**********@s ee.my.signature .com> wrote:

Steve Pugh wrote:

Robert Downes <no**********@s ee.my.signature .com> wrote:

p.actionLinkBlo ck {border: 1px #000000 dashed; padding: 0.2cm; width: auto}

Oh. What do you expect cm to mean on screen? If I hold a ruler up to
my screen will your padding really be 0.2cm? Perhaps it's a typo and
you meant 0.2em?

I'm using XFree86. The monitor display area is specified in the
configuratio n, so DPI values can be calculated. More importantly,
Mozilla offers a DPI calibrator, (although it does require getting out a
tape-measure and measuring a rather-too-short line on the screen).

The DPI setting in Mozilla only worked on the *nix versions last I
checked, certainly changing it has never made any difference to the
display on my Windows.

You need to read http://www.w3.org/TR/CSS2/visudet.html#q6

As you can see, your formulation means that width: auto; assigns the
full width of the parent minus border and padding.

Read the section you pointed to. Even using the following:

p.actionLinkBl ock {background: #ffffff; width: auto; margin-right: auto;
border-width: 0}

I still get a box that extends to the right-edge of the screen. The
browser must be seeing that both width and margin-right are auto, and
giving width precedence, rather than making the margin as big as possible.

Yes, as that page says
"If 'width' is set to 'auto', any other 'auto' values become '0'"
and the initial value for width is always 'auto'.

You need to set an explicit width, setting it in ems will allow you to
set it so that it adjusts to the size of the contained text.
Alternatively set explicit values for the margins and keep width:
auto;

Explicit width is no good. I just want an automatically-determined
minimum-width-necessary dashed border around the list of links. I find
it hard to believe something as big as CSS 2 does not offer such a setting.

You can always use an inline element like <span> instead. If your link
text all fits on one line then everything will be fine, if not then
the padding will be a bit odd (but hey, if the text doesn't all fit on
one line then the width issue is moot).

display: table-cell; would also do what you want but isn't supported
by IE.

Or you may be able to float it and omit the width. This is forbidden
in CSS2 but allowed in the proposed CSS2.1 and catered for by browser
bugs/features.

CSS 2.1 is not in CR yet (still haven't worked out what that means), so
Mozilla is pretty patchy on that front.

Most browsers have been 'shrink wrapping' floated elements with no
width for some time. All CSS 2.1 is going to do is standardise the
already widespread behaviour.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Robert Downes]

Steve Pugh wrote:

You can always use an inline element like <span> instead. If your link
text all fits on one line then everything will be fine, if not then
the padding will be a bit odd (but hey, if the text doesn't all fit on
one line then the width issue is moot).

I already tried the 'display: inline' setting, but the dashed border
overlapped with the content in the block beneath.

CSS 2.1 is not in CR yet (still haven't worked out what that means), so
Mozilla is pretty patchy on that front.

Most browsers have been 'shrink wrapping' floated elements with no
width for some time. All CSS 2.1 is going to do is standardise the
already widespread behaviour.

I'm just surprised there isn't a 'margin-right: maximum' setting that
would do the job. I'm glad Mozilla does its best to stick to standards,
though. It's a nightmare trying to work without knowing what is actually
supposed to appear (e.g. the awful JavaScript which was torn in two
directions and made useless IMHO).
--
Bob
London, UK
echo Mail fefsensmrrjyahe eoceoq\! | tr "jefroq\!" "@obe.uk"

[Steve Pugh]

Robert Downes <no**********@s ee.my.signature .con> wrote:

Steve Pugh wrote:

You can always use an inline element like <span> instead. If your link
text all fits on one line then everything will be fine, if not then
the padding will be a bit odd (but hey, if the text doesn't all fit on
one line then the width issue is moot).

I already tried the 'display: inline' setting, but the dashed border
overlapped with the content in the block beneath.

Adjust margin-top on the block below.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>