MozillaZine

firefox ignores width settings on css inline elements

User Help for Mozilla Firefox
Tony G
Guest
 

Post Posted March 30th, 2006, 12:54 pm

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
 

Post Posted March 30th, 2006, 12:58 pm

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 Posted March 30th, 2006, 1:16 pm

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 Posted March 30th, 2006, 2:03 pm

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 Posted July 16th, 2006, 6:56 pm

<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 Posted July 16th, 2006, 6:57 pm

&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 Posted July 16th, 2006, 7:04 pm

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.

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 10 guests