Why do browsers replace the width value assigned via css?

Question

When I assign a basic style to all selects eg.

width: 300px;
padding: 0;
margin: 0;
border-width: 1px;

I get unexpected results when retrieving the width via javascript under different circumstances.

When the select is visible the with is 298px.
When the select is display:none, the width is also 298px (ff, jquery)
When the select is in a div with display:none, the width is correct 300px.

(The result is also the same assigning: box-sizing: border-box)

Well, the retrieved width sometimes differs from the used browser and javascript framework, but all in all I just want to be able to retrieve the assigned width (300px). (I guess it has to something to do with the "formal weirdness" stated here: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/, but why won't the browsers use the width assigned by the user??)

How can I retrieve the assigned width? Is there actually way to do it?

Examples:

http://jsfiddle.net/ETCcH/5/ (for using jquery, or replace the 5 with a 4 for an example using mootools)

(view and try it with different browsers)

acme · Accepted Answer · 2012-05-25 09:40:02Z

2

You will never get the value written down in the css file. With JavaScript you will only get the css properties currently applied to that element by the web browser.

In you case if the width is really fixed, you can "force" it with max-width set to 300px or adding an overflow: hidden - if that's an option.

answered May 25, 2012 at 9:40

acme

14.9k8 gold badges77 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mmg666 · Accepted Answer · 2012-05-25 10:01:51Z

2

Actually it is the borders that is causing you the trouble. Set the border-width to 0 and you will be able to see 300px for everybody. Actually the browsers are setting the element's width to 300px as you are expecting it to be, and adding the borders around. For visible elements you can get the entire width of the element by using offsetWidth (which will be set to 0 if you set the display to none.)

answered May 25, 2012 at 10:01

mmg666

3531 silver badge12 bronze badges

Comments

Ernoriel · Accepted Answer · 2012-05-25 09:45:43Z

0

it seems your browser box-sizing is border-box by default for select elements. try putting box-sizing: content-box; on select and jquery give you the right result.

Jquery get you the content width with the 'width' method so it take out margin, padding and border. With box-sizing: border-box, the width given take padding and border into account.

Ernoriel

answered May 25, 2012 at 9:45

Ernoriel

891 silver badge9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:45:33Z

There is no simple way to access the specified value in CSS.

When you use .css() in jQuery, you're getting the computed value. What you are after is called the specified value.

When a specified value is computed, it will adjust according to the situation (in your fiddle, borders). This is why the width differs. I don't know why the select hidden within a parent div doesn't adjust to borders, though.

Solution 1: Perhaps a better way than do get the specified value of the element is to look for the width of its parent? Seeing how it's a good practice never to set widths on specific elements anyway (but rather on their parents, such as when using a grid system or similar), this may be your approach. Using widths on parents effectively restrict the max width of its children.

Solution 2: Now, if you really do want the specified value, I suppose you could go through document.styleSheets and for every stylesheet, access the cssRules property and work your way down until you've found the value you're looking for. When I tried this in Chrome, cssRules appears to be empty, but Firefox populates it and obediently lists all styles in every stylesheet attached to the page.

I don't recommend it, but if you decide to go down that hole, you may be interested in either of these SO questions:

I don't recommend changing the box-sizing either since this will give you the value you are looking for, but the actual width of the element will be wider (base width 300px + borders = 302px wide).

If none of these floats your boat, perhaps its time to sit back and think about (and explain!) what you want to do and why. Whenever I find myself wanting to do non-standard stuff for simple tasks, it's not seldom because my solution is perhaps not optimal and I need to zoom out a bit before proceeding.

Collectives™ on Stack Overflow

Why do browsers replace the width value assigned via css?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related