473,233 Members | 1,579 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,233 software developers and data experts.

width: auto seems to be ignoring me in Mozilla

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

p.actionLinkBlock {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

Jul 20 '05 #1
5 6040
Robert Downes <no**********@see.my.signature.com> wrote:
I'm using the following in a page that I'm testing in Mozilla:

p.actionLinkBlock {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/>
Jul 20 '05 #2
Steve Pugh wrote:
Robert Downes <no**********@see.my.signature.com> wrote:

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

p.actionLinkBlock {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.actionLinkBlock {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.

Jul 20 '05 #3
Robert Downes <no**********@see.my.signature.com> wrote:
Steve Pugh wrote:
Robert Downes <no**********@see.my.signature.com> wrote:
p.actionLinkBlock {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
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).


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.actionLinkBlock {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/>
Jul 20 '05 #4
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 fefsensmrrjyaheeoceoq\! | tr "jefroq\!" "@obe.uk"
Jul 20 '05 #5
Robert Downes <no**********@see.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/>
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Chris Stromberger | last post by:
I have a div with a width of 40em (is em cool to use for width?). The situation below applies even if width is auto or 80% or something. Inside the div I am displaying some code with <pre> tags. ...
1
by: Glabbeek | last post by:
I'm changing the layout of my site. Instead of using tables, I will use DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not the correct width. Mozilla and Opera are showing the...
2
by: Randall Sell | last post by:
Hmmm, have now spent a day reading the entire web with no answer yet! so now resorting again to the experts... I'm trying to create a horizontal list. This is easy enough doing: <html> <head>...
4
by: Philipp Lenssen | last post by:
I have a site that runs in strict mode in IE6, and IE is making <td>s for simple two-digit numbers really wide. So I want to restrict it (and right-align it) by using <td class="number"> and...
5
by: Josh Renaud | last post by:
I'm still trying to solve a problem I have experienced in Safari. This is my third post on the subject. I'm hoping someone can shed some light. The problem is that, in Safari, a table with no...
3
by: phil_gg04 | last post by:
Dear CSS Experts, I want to make a textarea fill all the available width. This is something I've done before but mostly by trial and error; now I want to understand what is going on. So I try:...
1
by: Simon Dean | last post by:
Hi, Im trying to learn CSS and putting a website in effect. Just getting used to DIV's and SPAN's and using the proper formatting of H1 H2 H3 etc to format HTML documents and using different...
2
by: Jukka K. Korpela | last post by:
Sub titulo "Re: DIV borders different in IE7 when in td" scripsit Ben C: This seems to be the heart of the matter, and I'm trying to get a real discussion started, by moving the discussion to...
2
by: Jim Carlock | last post by:
I ran into a problem a think. Either that or I overlooked something. I seem to run into this problem quite often. I fail to pinpoint the problem and it appears as a bug with mozilla browsers....
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.