firefox ignores width settings on css inline elements

User Help for Mozilla Firefox
Post Reply
Tony G
Guest

firefox ignores width settings on css inline elements

Post by Tony G »

Hello

Just installed firefox after avoiding it for ages.

Read up on how great it was versus IE. But first thing I get going with CSS and . . .

WTF!!???!

A simple width assignment doesn't work! And this after I just read how IE is all wrong in assigning widths to boxes and firefox is "so superior"!

For example - the following works as advertised in IE . . .

<span style='width: 100px; border: solid 1px yellow;'> hey </span>

. . . but the width parameter is TOTALLY IGNORED in firefox.

I'm sure this has been discussed to death somewhere but can someone please point out why and how to fix it?

agalligani@yahoo.com
Guest
Guest

Re: firefox ignores width settings on css inline elements

Post by Guest »

Tony G wrote:For example - the following works as advertised in IE . . .


Inline-content has no width, according to the CSS-specification. Of course, IE is right in ignoring the crappy spec, but Firefox anally sticks to it, no matter how retarded it is. Try using "position: relative;".
Guest
Guest

Post by Guest »

How about using double quotes instead of single quotes.

<span style="width: 100px; border; sold 1 px yellow;">hey</span>

As far as the troll is concerned, there are specs for a reason. So everyone knows what the rules are. If you can blindly use whatever you want you'd have nothing but a bloated, broken, pile of spaghetti code.

Oh wait, that's IE! Never mind.
texmex
Posts: 403
Joined: March 26th, 2006, 8:58 am
Location: NE Lincs

Post by texmex »

Alternatively you can change the default "display:Inline" setting to match that of IE. So you can use either

Code: Select all

<span style='display:block;width: 100px; border: solid 1px yellow;'> hey </span> 

or

Code: Select all

<span style='display:inline-block;width: 100px; border: solid 1px yellow;'> hey </span> 


Either way. By specifying it, rather than let the browsers use their individual (and different) default settings, you will get consistant results.

Note the subtle difference. first example doesn't tolerate stuff beside it, whereas, the second example does. I'm not sure off hand what IE does by default. But if you're writing the page, it's entirely up to you.

When you are writing HTML or CSS it pays to be pedantic. Specify everything. What's default on one browser is diferent to another. (As it happens, in this example IEs default setting is wrong).
Guest
Guest

Post by Guest »

<span> hey </span>

Will not display correctly in FireFox.

"An element of this value is treated as an inline element seen from the outside, but the content inside the box is formatted as a block-level element."

Firefox ignores the width instruction, when in fact it should draw a block size of 100px.
Guest
Guest

Post by Guest »

&lt;span style='display: inline-block; width:100px; border: solid 1px yellow;'&gt; hey &lgt;/span&gt;

Will not display correctly in FireFox.

"An element of this value is treated as an inline element seen from the outside, but the content inside the box is formatted as a block-level element."

Firefox ignores the width instruction, when in fact it should draw a block size of 100px
Unarmed
Posts: 4941
Joined: July 31st, 2003, 1:26 pm

Post by Unarmed »

Yes, this is <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=9458" title="Bug 9458 - Implement inline-block in layout">bug 9458</a>. <code>inline-block</code> will be easier to implement with the reflow branch, so there probably won’t be any activity until ~3.0.
Post Reply