473,232 Members | 1,400 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,232 software developers and data experts.

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

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
7 4602
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

21
by: Arthur Connor | last post by:
I want to embed some source code lines in an article on a web page. As usual I want to use a fixed sized font for this souce code lines (read: the letters should have all the same width). The...
8
by: McKirahan | last post by:
Firefox does not reflect selected option via innerHTML How do I get Firefox to reflect selected option values? <html> <head> <title>FFinner.htm</title> <script type="text/javascript">...
2
by: dlgproc | last post by:
I wanted to display text in a label on a Windows form in a fixed-width font. In C++ Windows API programming I’ve always used: GetStockObject(SYSTEM_FIXED_FONT). Using the following C# code...
3
by: Urs Eichmann | last post by:
Hello I have an ASP.NET web site where you can page through lists by using INPUT TYPE=image buttons. I noticed that, in IE6, the whole page gets cleared and built again from the ground up, whereas...
3
by: Noozer | last post by:
I need a fast "console" type control. Basically a textbox that uses a fixed width font and can be configured for a specific width and height. I may need to apply colour and double width & height...
7
by: sonnystarks | last post by:
Page construction in progress: http://www.sdisplay.info/test/ Firefox does not recognize background image referred to on styles.css IE sees it with no problem. What is the problem? Thanx,
8
by: hyejin | last post by:
I have a problem with dynamic iframe and document.close() on Firefox. Below two files create a dynamic iframe by JavaScript. These two samples do not have any problems on IE. But, on Firefox, the...
10
by: Xah Lee | last post by:
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...
17
by: ur.solame | last post by:
I have an image being generated by a PHP script-- I didn't write the code-- and the image itself is in a database. I've discovered that there is a big discrepancy between how the images appear...
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...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
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...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll 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...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.