PDA

View Full Version : Based on what parameters does browser decide what the `width` of an element should be



asponmynet
Mar 7th, 2010, 10:17 PM
1) If textbox element (<input type=”text” /> ) has its width property set to inherit, then textbox doesn’t overflow. But if textbox has width set to auto, then it overflows due to browser calculating the width.

a) Why doesn’t browser take into the account that textbox is inside another element and thus adjusts the width of a textbox accordingly?

b) Based on what parameters does it decide what the width of a textbox should be?


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
p
{
width:60px;
}
</style>
</head>
<body>
<p>
<input type=”text” />
</p>
</body>
</html>

2) Do all Html elements by default have their width value set to auto?

thanx

SSCR9
Mar 13th, 2010, 05:11 PM
The width of an HTML entity set to #css { width:auto; } is determined mostly by the objects surrounding it. When you set it to auto and the entity happens to be next to/near an object set to #css { position:absolute; } or { position:relative; }, (or any other strange floating setting or whatever) then the object will tend to stray its width underneath the other objects. You can fix this by adding the same tag to the textbox (i.e: #css { position:relative/absolute/fixed; }) or by setting its z-index values above your other objects. For example:
#annoying_div { z-index:1; }
#textbox { z-index:2; }
By doing that, you will layer one object over the other, but the browser will not adjust either of their sizes. The way that most browsers decide on the width kinda goes like this:

if you have an object set to "inherit", the browser will automatically take its size in pixels, and subtract the width of the divs and display the text area as the remainder.
In an "auto" textbox, the width is calculated by taking the divs that the textbox is within, and matching it, minus any other divs that may be in its way. As I said before, if one of those objects is set as "absolute," the width will run right underneath it, unless the textbox is also set to absolute.

Also, most browsers that I know of (except safari on iphone) will accept a width of a percentage, and this becomes relative to the size of the browser. This could take a bit of math, but if you want your textbox to take up 200px on a screen with 1000px, you can just set the width to #css {width:20%;}

Hope this helped, although I went a little overboard there at the beginning..

Arbitrator
Mar 14th, 2010, 12:22 PM
a) Why doesn’t browser take into the account that textbox is inside another element and thus adjusts the width of a textbox accordingly?Per CSS2.1, inline, replaced elements like input take on their "intrinsic" width when width: auto. Intrinsic widths are defined by the element itself which, in this case, would be whatever the HTML specs that define it say or the whatever the browser vendor has chosen to implement if there isn't a fixed default width specified in those specs. The size attribute of this element would be one way of changing the intrinsic width.

width: inherit causes the element to borrow the width from its parent. In this case, you specified 60px on the parent element, so that width is borrowed.


b) Based on what parameters does it decide what the width of a textbox should be?See the answer to (a).


2) Do all Html elements by default have their width value set to auto?As far as I'm aware, the HTML specs don't define a default CSS width, but auto is the default value of this property as defined by the CSS2.1 spec. UA (User Agent; e.g., browser) vendor are, of course, free to assign some default width in their default style sheets just like they do for other elements.

For example, tables have a silver border by default in IE, unordered lists have left-hand padding in Firefox, older versions of Opera used to use padding around the page, and Safari has a white background). This is even though the default border color is the text color (generally black), the default padding is zero, and the default background color is transparent; browser vendors have applied their own default styles.