[WEB4LIB] Re: specifying the width, in pixels, of a line of text

Justin Rounds jrounds at uchicago.edu
Fri Jan 7 14:55:01 EST 2005


It depends on which version of IE you're referring to -- IE5's 
implementation of the box model was completely wrong, but IE6 seems to 
be ok (at least I haven't had any width-related problems yet).

The box model specifies width as the width of the _content_ inside the 
box, and does not refer to the box itself, e.g. a <div 
style="width:200px;margin:10px;padding:10px"> would take up a 220px-wide 
space on the page, *not* 200px. IE5 treats the width as being the width 
of the box itself, so in the previous example the div would take up a 
200px-wide space on the page, *not* 220px.

I know this is certainly the case with divs, but the rules may be 
different for other block-level elements.

There are hacks to workarounds this, however. Look here for more 
information:

http://www.info.com.ph/~etan/w3pantheon/style/abmh.html

You can read more about the box model here:

http://www.w3.org/TR/REC-CSS2/box.html
_
j


michaels at lrl.leg.mn wrote:
> Does anyone know of a good explanation of <width> in Firefox vs. IE, 
> the cause of the difference, and solutions?
> 
> Mike Schatz
> Minnesota Legislative Reference Library
> 
> 
> On 7 Jan 2005 at 9:51, Ross Singer wrote:
> 
> 
>>Thomas Dowling wrote:
>>
>>
>>>My first recommendation is to rethink the design so it isn't dependent 
>>>on pixel-perfect dimensions.
>>> 
>>>
>>
>>This is a good point.  While I'm not entirely sure the source of the 
>>problem, I've found differences in the way IE and Firefox handle 
>>widths.  This basically results in overlap of layers or wrapping in one 
>>browser or the other.
>>
>>Like I said, I'm not entirely sure of the cause or real culprit.
>>
>>-Ross.
>>
> 
> 
> 
> 
> 

-- 
-------------------------------------------
Justin Rounds
Graphic Design and Digital Media Specialist
Digital Library Development Center
University of Chicago
1100 East 57th Street
Chicago, Illinois 60637
(773)702-4391
-------------------------------------------



More information about the Web4lib mailing list