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
firefox ignores width settings on css inline elements
-
- Guest
Re: firefox ignores width settings on css inline elements
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
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.
<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.
-
- Posts: 403
- Joined: March 26th, 2006, 8:58 am
- Location: NE Lincs
Alternatively you can change the default "display:Inline" setting to match that of IE. So you can use either
or
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).
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
<span style='display: inline-block; width:100px; border: solid 1px yellow;'> hey &lgt;/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
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
-
- Posts: 4941
- Joined: July 31st, 2003, 1:26 pm