By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,949 Members | 1,077 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,949 IT Pros & Developers. It's quick & easy.

Firefox browser problem: width:30ex does not respect font

P: n/a
Look at this page
http://xahlee.org/emacs/wrap-url.html
Look at it in Firebox, look at it in Safari, in Opera, and look at it
in Microsoft Internet Explorer.

The only fucked up case, is Firefox.
Namely, that it does not respect the font used when dealing with
«width:80ex».
The way to test this visually, is by this code:
<pre style="border:thin black solid;
width:30ex">iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</pre>

See also:
http://xahlee.org/UnixResource_dir/w...e_license.html
http://xahlee.org/UnixResource_dir/w..._attitude.html

Xah
xa*@xahlee.org
http://xahlee.org/

Oct 11 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
On 2006-10-11, Xah Lee <xa*@xahlee.orgwrote:
Look at this page
http://xahlee.org/emacs/wrap-url.html
Look at it in Firebox, look at it in Safari, in Opera, and look at it
in Microsoft Internet Explorer.

The only fucked up case, is Firefox.
Namely, that it does not respect the font used when dealing with
width:80ex.
The way to test this visually, is by this code:
<pre style="border:thin black solid;
width:30ex">iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</pre>
It does respect the font. Try it with a few fonts-- the width of the box
varies.

"ex" is a measurement of font _height_. The font used for <preis often
something like Courier, in which the x is short and fat. So 30 x-heights
is not wide enough for 30 'x's.

Note also that if the user isn't using a monospaced font for <pre(they
usually do, but don't have to) this wouldn't work even if 1ex were the
width of an ex.

You can fix your problem instead by using a shrink-to-fit box by making
it absolutely positioned, floated, or using a table. Obviously the
content may need other changes if these have other unwanted sideeffects.
Oct 11 '06 #2

P: n/a
Ben C wrote:
« It does respect the font. Try it with a few fonts-- the width of the
box varies.»

Thanks. I just created a page here and tested it:
http://xahlee.org/js/width-ex.html

You are right that Firefox respect font when considering ex.
However, it turns out, FireFox is still incorrect. While, Safari and
Opera are correct. (the iCab browser does the worst here. It doesn't
respect font at all)

«You can fix your problem instead by using a shrink-to-fit box by
making it absolutely positioned, floated, or using a table. Obviously
the content may need other changes if these have other unwanted
sideeffects.»

mm... interesting suggestions. Thanks. One thing that won't work with
FireFox is display:table. When using display:table, FireFox will omit
spaces between adjacent <span>, and it will also render line breaks
inside <preincorrectly.
(see here for the former:
http://xahlee.org/js/linebreak_after_tag.html)

(IE doesn't shrink wrap the border for display:table at all)

Perhaps i'll try floated or absolutely positioned...

Xah
xa*@xahlee.org
http://xahlee.org/
Ben C wrote:
On 2006-10-11, Xah Lee <xa*@xahlee.orgwrote:
Look at this page
http://xahlee.org/emacs/wrap-url.html
Look at it in Firebox, look at it in Safari, in Opera, and look at it
in Microsoft Internet Explorer.

The only fucked up case, is Firefox.
Namely, that it does not respect the font used when dealing with
«width:80ex».
The way to test this visually, is by this code:
<pre style="border:thin black solid;
width:30ex">iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</pre>

It does respect the font. Try it with a few fonts-- the width of the box
varies.

"ex" is a measurement of font _height_. The font used for <preis often
something like Courier, in which the x is short and fat. So 30 x-heights
is not wide enough for 30 'x's.

Note also that if the user isn't using a monospaced font for <pre(they
usually do, but don't have to) this wouldn't work even if 1ex were the
width of an ex.

You can fix your problem instead by using a shrink-to-fit box by making
it absolutely positioned, floated, or using a table. Obviously the
content may need other changes if these have other unwanted sideeffects.
Oct 13 '06 #3

P: n/a
On 2006-10-13, Xah Lee <xa*@xahlee.orgwrote:
Ben C wrote:
It does respect the font. Try it with a few fonts-- the width of the
box varies.

Thanks. I just created a page here and tested it:
http://xahlee.org/js/width-ex.html

You are right that Firefox respect font when considering ex.
However, it turns out, FireFox is still incorrect. While, Safari and
Opera are correct. (the iCab browser does the worst here. It doesn't
respect font at all)
I looked at the example on your page in Firefox 1.0.7. Where it says
"Firefox Bug", I measured the 70ex box (with the KDE screen ruler) and
made it 490px wide. I then measured the height of one of the x glyphs
and made it 7px. 7x70 = 490, so that looks right.

But it depends on the font. If you're using Firefox on a different OS,
or even on a different Linux distribution, you may not have exactly the
same font. Safari and Opera may not be using the same fonts as
Firefox on your system.

Some fonts may report the height of an 'x' incorrectly. Some fonts don't
even have an 'x' (most languages after all don't have an 'x') but you
can still size things in ex units.
You can fix your problem instead by using a shrink-to-fit box by
making it absolutely positioned, floated, or using a table. Obviously
the content may need other changes if these have other unwanted
sideeffects.

mm... interesting suggestions. Thanks. One thing that won't work with
FireFox is display:table. When using display:table, FireFox will omit
spaces between adjacent <span>, and it will also render line breaks
inside <preincorrectly.
(see here for the former:
http://xahlee.org/js/linebreak_after_tag.html)
That does look like it might be a bug.

Easily worked around though by putting the newline instead before you
open the <span(or after you close it).
(IE doesn't shrink wrap the border for display:table at all)
You could also try display: table-cell.
Perhaps i'll try floated or absolutely positioned...
Float is probably the easiest.

The main drawback in this case with position: absolute is that it takes
the positioned box "out of the flow", so the next block box goes
behind it instead of below it.

If you give the float its own block box, and make sure it's cleared at
the bottom, it should behave identically to a normal block box but with
shrink-to-fit width.

Something like this:

<div>
Here is the code:
</div>
<div>
<pre style="float: left; background-color: seashell;">
blah blah
blah
</pre>
<span style="clear: left"></span>
</div>
<div>
Next bit of text
</div>
Oct 13 '06 #4

P: n/a
Ben C wrote:
>
Some fonts may report the height of an 'x' incorrectly.
And several browsers just use the value of .5em instead of the actual
x-height. Firefox is one of the few that actually get this right.

--
Berg
Oct 13 '06 #5

P: n/a
is there a way to make the various tool bars in FireFox vertical or
pull off?
e.g. on the side like in IE or Opera?

I have tabs, web dev tool bar, bookmark bar, nav bar, stumbleupon bar,
and they take too much space on top.

Xah
xa*@xahlee.org
http://xahlee.org/

Nov 1 '06 #6

P: n/a
There are extensions for this...

pxclassic.net/misc/tbx.xpi

To use this, create a new toolbar (View>Toolbars>Customize...>Add New
Toolbar), then drag and drop your navbar buttons etc to the new
toolbar(s). Then right-click the new bar and choose the location.
Uncheck Navigation Toolbar under View>Toolbars and your done.

For tabs, TMP gives you an option to display tabs on the side or
bottom...

http://tmp.garyr.net/forum/viewtopic.php?t=2582

Hope that helps.

~hhh
Xah Lee wrote:
is there a way to make the various tool bars in FireFox vertical or
pull off?
e.g. on the side like in IE or Opera?

I have tabs, web dev tool bar, bookmark bar, nav bar, stumbleupon bar,
and they take too much space on top.

Xah
xa*@xahlee.org
http://xahlee.org/
Nov 1 '06 #7

P: n/a
There is a more modern extension for doing this:

Toolbar Control

http://webdesigns.ms11.net/chromeditp.html#toolbarc
Hass wrote:
There are extensions for this...

pxclassic.net/misc/tbx.xpi

To use this, create a new toolbar (View>Toolbars>Customize...>Add New
Toolbar), then drag and drop your navbar buttons etc to the new
toolbar(s). Then right-click the new bar and choose the location.
Uncheck Navigation Toolbar under View>Toolbars and your done.

For tabs, TMP gives you an option to display tabs on the side or
bottom...

http://tmp.garyr.net/forum/viewtopic.php?t=2582

Hope that helps.

~hhh
Xah Lee wrote:
is there a way to make the various tool bars in FireFox vertical or
pull off?
e.g. on the side like in IE or Opera?

I have tabs, web dev tool bar, bookmark bar, nav bar, stumbleupon bar,
and they take too much space on top.

Xah
xa*@xahlee.org
http://xahlee.org/
Nov 2 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.