Firefox Inline-Block Frustration
I’m making Tag Central prettier. I can do all the colors and styling I want just fine. I think it’ll look super when it’s done (but then again, I’m not an artist and that will probably be painfully apparent). Anyway, I want the Flickr pictures to line the right side of the page. Then I want all the other sections to be contained within their own boxes, two per row.
Old school webmonkeys would immediately think of using a table based layout. It seems natural and it would be very easy. The problem is, this is an abuse of HTML tables (and heresy when making an XHTML page). Only actual tabular data is supposed to go into tables. All presentation must be managed using CSS. There are many, many good reasons for this, not the least of which is that it makes the site more accessible. Besides, I’m new school.
I can almost hear Dana’s voice in my head. Then what’s the problem, Smartypants? The problem is that while CSS provides everything I need to achieve this layout, the CSS involved isn’t supported by Firefox. To be fair, it’s not supported by Internet Explorer, Camino (not surprising), Netscape, or iCab (which goes without saying). The real question is, what does support it? Opera and Safari both do. Unfortunately, much of my target audience isn’t using these browsers and when it’s not supported, the site looks like ass with a big white ass crack going down the middle.
The CSS I want to use is “display: inline-block;”. Basically, it forces all the sections of Tag Central to for a box like they would normally, with block elements that don’t break out. For those uninitiated, block elements are parts of the page that force a line break. Paragraphs and headers are good examples. Normally, the container I’m using for these various areas, DIV, is a block element. However, in this case, I want these elements to display in rows without forcing a line break unless they overstep the margin of the area that they are in. In this case, I make the width of each of these areas 49%. That means only two results areas per line. If there are any more, it’ll wrap onto the next line. This is exactly the behavior I want. It works perfectly in Safari and Opera. Firefox hasn’t implemented this even though it’s part of the CSS 2.1 spec. That makes me want to scream. What’s worse is that I read that earlier versions of Mozilla actually supported it. Bastards.
There isn’t much I can do about this other than hope that they get off their asses and correct this. I can live with incorrect display in Internet Explorer because I’m a snob like that. The other way that this whole issue could be avoided would be that I can find a way to integrate Smugmug content. In that case, I could go to a three column format (Flickr pictures on the left, Smugmug on the right, and everything else down the middle). At any rate, it sucks.
Update: For anyone interested, there is a Bugzilla bug registered for this. The bad news is that from the comments, it looks like this won’t be fixed for Firefox 1.1. The target milestone is 1.9b, but what version of Firefox that version of the core relates to is beyond me. It’s fairly disappointing to see so much work going into revamping how the preferences look when this is a bug that limits functionality at the browser’s very core.
You hear my voice in your head?? Damn I’m awesome… and I think you better get that checked.
Grrr…I just discovered this too. Though I did manage to get it to work pretty well in IE 6.something, which astonished me. I could probably get by since my site is for work where we all use IE (everyone but me, that is), but I just can’t bring myself to design a site that only works for IE….
I feel the same way. Just wrote a program on IE at work. I’m displaying a list of meds vertically (not an actual list). I used a table to display the list. Each item is in its own row/cell, with the css display tag set to inline (because block forced an extra space in between the meds). On IE, when the meds disappear and return (by using a search function), they simply reappear where they were before. On FireFox, when they reappear, they ignore the fact that they’re in a table and start putting the rows back in NEXT to each other (as if the rows were being treated like cells). Safari just crashes.
Ok, this program is only being used by my work so it doesn’t really matter, but I have noticed that IE allows me to do some crappy design. If I had designed this on FireFox at home and got it working, it would more than likely work on IE and Safari. IE sucks…
The beta of iCab version 3 wasn’t released when you wrote this, I think. But since then iCab has taxed in! iCab supports display:inline-block; nicely. And like others, I have no troubles with :inline-block in IE6. Otherwise thanks for noting this — it helped finding out where the bug sat …
I’ll have to check that with iCab. iCab 3 was a huge step forward after CSS was nearly ignored. Suddenly iCab had superb CSS support.
As for IE6 support, from what I had read, it was only supported for span elements (which doesn’t make too much sense).
[...] Ahh, the answer here is get a browser that doesn’t LIE about standards support. http://godlikenerd.com/weblog/2005/03/24/firefox-inline-block-frustration/ This is yet another reason I hate firefux. [...]
This is another way of doing it:
span { display: block; width: 10em; /* or whatever */ float:left; }now, this will break things in IE… so, if you have the span in a div, do like this:
/* for Firefox, i.e. doesn't recognise the div>span construction / div>span { display: block; width: 10em; / or whatever */ float:left; }/* for all those that recognise display:inline-block/ span { display: inline-block; width: 10em; / or whatever */ }
Another try, this is a way you can do it:
div>span { display: block; width: 10em; float:left; }span { display: inline-block; width: 10em; }
… I give up trying to format the text…
[...] Non Firefox a aussi certains bugs de rendus et certains disfonctionnements CSS (display: inline-block ??), Le seul navigateur a ne pas interpreter cette proprieté est IE Mac. Bien au contraire : http://godlikenerd.com/weblog/2005/03/24/firefox-inline-block-frustration/ et : [...]
[...] Estoy intentando que el nombre del autor de un gif quede debajo del mismo, pero que no por ello el resto de gifs se me desposicionen verticalmente. Ábrelo con IExplorer y Firefox (sección Gifs de Sonic) y sabrás a qué me refiero. Resulta que Firefox no coge bien el vertical-align:middle en tablas, no admite la propiedad inline-block (es más, la llama -moz-inline-box y no funciona correctamente), eso sin contar que no admite activex, que gestiona mal el darle a una tabla la propiedad display: inline, no admite los margin:auto para algunos objetos como las imágenes, y que ahora mismo pasa olímpicamente de la mayoría de instrucciones css que le mando, mientras en Iexplorer sigo pudiendo hacer lo que quiera O la solución más sencilla, que funciona en IExplorer pero no en Firefox: Puedes flotar una capa a izquierda o derecha y luego te limitas a centrarla, pero resulta que en Firefox no puedes centrar una imagen previamente flotada. Me he pasado 5 horas en esa sección por esa chorrada, 3 de las cuales han sido sólo por FireFox, y me he encontrado con cosas así: http://weblogs.mozillazine.org/roc/archives/2005/06/displayinlinea.html http://godlikenerd.com/weblog/2005/03/24/firefox-inline-block-frustration/ Y todos los problemas por una razón muy sencilla, y por la cual IExplorer es mucho mejor para mí que Firefox: En IExplorer haces algo mal o algo que no está soportado por el explorador y aún es capaz de mostrarlo y aún puedes trabajar con ello. En FireFox no. No sé cuando lo corregiré, pero hoy ya llevo casi desde que me he levantado con el tema y no pienso darle más vueltas ________________”La vida es una búsqueda constante hacia algo mejor” [...]
[...] [...]
Guy, try this: span {display:-moz-inline-block; display: inline-block; }
Same appearance in ie and firefox ie and firefox
Guy, try this:
span {display:-moz-inline-block; display: inline-block; }
Same appearance in ie and firefox ie and firefox
Guy, try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> span {display:-moz-inline-block; display: inline-block; } </style>
<span style="width:200px;border:red 1px solid;">Same appearance in ie and firefox</span><br> <span>ie and firefox</span>
and in FF10 it should be: span {display:-moz-inline-box; display: inline-block; }
cheerz, wurx a treet
i think what your looking for it display: -moz-inline-box;
There was a patch concerning inline-table lately (28.1.07) in Trunk Versions (Fx 3.0) that afaik also affects inline-block: https://bugzilla.mozilla.org/show_bug.cgi?id=18217 (NO unnecessary Bugspam please)
[...] So I did some searching, and all I could find on the topic were a few blog posts bemoaning the lack of support, or newsgroup posts asking for help on the subject. Then I came across a potential solution: the proprietary -moz-inline-block property, which was seen by Firefox and ignored by all other browsers. So I tried it, et voilà …it still didn’t work. Firefox seemed to be treating it as a block property; that is, it was forcing a line break afterward. Which didn’t solve my problem at all. After some more searching, I found that I wasn’t the only one having that problem. Back to square one. [...]
It seems that -moz-inline-block (or box) has to be used against inline elements such as spans. It doesn’t work on block elements (divs)…
FF2: display:-moz-inline-box;
Not: display:-moz-inline-block;
Yes, display:-moz-inline-block; will cause the span, ul element etc to wrap around underneath.
I’m mad as all with Mozilla for never providing an inline-block display.
Here Are 3 ways to create an inline-Block for ALL browsers:
OR ( clunky, but has some hidden advantages )
OR ( absolute best, and I use daily )
The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top
-Acker, see my name on something again soon.
Didn’t realize this blog let you use TAGS, here is my post again:
I’m mad as all with Mozilla for never providing an inline-block display.
Here Are 3 ways to create an inline-Block for ALL browsers:
>table style=”display:inline”<>tr<>td<>/td<>/tr<>/table<
OR ( clunky, but has some hidden advantages )
>fieldset style=”display:inline”<>/fieldset<
OR ( absolute best, and I use daily )
>span style=”display:inline-block”< >div style=”display:table-cell”<>/div< >/span<
The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top
-Acker, see my name on something again soon.
Lets try that again:
I’m mad as all with Mozilla for never providing an inline-block display.
Here Are 3 ways to create an inline-Block for ALL browsers:
<table style=”display:inline”><tr><td></td></tr></table>
OR ( clunky, but has some hidden advantages )
<fieldset style=”display:inline”></fieldset>
OR ( absolute best, and I use daily )
<span style=”display:inline-block”> <div style=”display:table-cell”></div> </span>
The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top
-Acker, see my name on something again soon.
Some very useful posts. I’m just astounded that this has been going on for years and Firefox is still not fixed. When a browser doesn’t even perform as well as IE6, it’s not worth bothering with.
I can’t believe people are flaming Firefox, IE has so many more CSS flaws than Firefox ever had, none of the display:table etc even work in IE.
inline-block works beautifully in Firefox 3.0
I’ve struggled with this for a while. -moz-inline-box works partially, but when you try to put block level elements inside you’ll want to kill yourself. float works well only if you have fixed width elements. While it’s great that it is fixed now, we’ll still have to deal with all the people who have Firefox 2.0 and earlier.
well here it is July, a year later and still no inline-block in Firefox … GRR! Why in #$% can’t these browser authors SUPPORT the stinking STANDARDS!? Drives me nuts and it’s it’s driving me away from the internet. I am so sick and tired spending a zillion hours changing this that or another CSS element to support this that or another browser that I’m about to go bald.
A solution that is working for me: Float all DIVs left, then follow each row with a DIV Clear:Both…
Works in IE7 and FF2
Dan’s comment was very useful and works! Thank you all.
[...] elementen af te ronden. Ondersteuning voor meer types elementen gepland voor v1.6 dus EDIT2 Op http://godlikenerd.com/weblog/2005/0…k-frustration/ heb ik gevonden dat inline-block nog niet voldoende ondersteuning heeft om te kunnen toepassen. Je [...]
I found something that works for me.
My inline divs contain exactly 1 picture. If the div was contained in a container the div’s height was determined by the text size of the container.
I solved this by setting the font-size of the div at 1 pixel more than the height of the picture.
I found something that works for me.
My inline divs contain exactly 1 picture. If the div was contained in a container the div’s height was determined by the text size of the container.
I solved this by setting the font-size of the div at 1 pixel more than the height of the picture.
The code is basically as follows:
[div style="display:inline; font-size:11px"][img src="pic.gif" width="10" height="10"][/div]
Thanks for such a nice discussion.
Works for me: span {display:-moz-inline-block; display: inline-block;}
It can then have widths applied to the spans and they work in IE 6,7 and FireWeSupportTheStandardsFox
[...] Geeking around town… Comment on Firefox Inline-Block Frustration by Bijan [...]
This is wonderful! I was unaware that inlin-block was broken in IE and FF until i noticed that my site looked like crap in them.
Working from Fergal Breen’s solution I found that i could float all of my div’s left and clear:both.
Works like a charm. No need for the empty div.
There were a few workarounds discussed in the bugzilla entry for this problem here:
https://bugzilla.mozilla.org/show_bug.cgi?id=9458
Some include using a BUTTON element in place of the element with an inline-block display property. Which probably works but just feels yuck.
There was also an XBL solution posted but it didn’t seem to work in the context I was using inline-block.
I’ve even seen some JavaScript workarounds floating around on the web (this may be the best solution for some but fortunately I didn’t need to resort to this).
The best suggestion I found in that bugzilla thread, was to use a -moz-inline-box with a nested block element. For example (forgive the inline CSS, for demo purposes only
...Becomes:
...Most likely you can simply replace with just a
This seems like a fairly solid hack that doesn’t just work for the most basic uses of inline-block; in my case I had inline-block elements being displayed horizontally and each containing multiple floating block elements inside. Hope it helps.
Sorry about that, let me try again. The example code for proposed solution:
<x style="display: inline-block"> ... </x>Becomes:
<x style="display: -moz-inline-box; display: inline-block"> <y style="display: block"> ... </y> </x>Sorry about that, let me try again. The example code for proposed solution:
<x style="display: inline-block"> ... </x>Becomes:
<x style="display: -moz-inline-box; display: inline-block"> <y style="display: block"> ... </y> </x>And, most likely you can simply replace <y style=”display: block”></y> with just a <div></div>
Here is what works for me in IE7 and FF 2.0.0.12
.myClass { display:table-cell; display:inline-block; }
…the following will NOT work .myClass { display:inline-block; display:table-cell; }
I forgot to mention that I have an image with a float:left class assigned to it, and a div with the .myClass class assigned to it.
The result is: text will not wrap under my image…which is what my intentions are.
[...] Your page is on StumbleUpon [...]
“-moz-inline-box with a nested block element” works OK but the inline block with position:relative; no longer creates a positioning context for nested position:absolute;s
@ LazyJim,
I had the same problem, but found that an additional nested within the -moz-inline-box element, will obey position:relative
[...] (comet ajax javascript ie) Bookmark [Discover] d00dism » Firefox Inline-Block Frustration http://godlikenerd.com/weblog/2005/03/24/firefox-inline-block-frustration/ (ie css opera firefox) [...]
[...] I did some searching, and all I could find on the topic were a few blog posts bemoaning the lack of support, or newsgroup posts asking for help on the subject. Then I came across a [...]
[...] d00dism » Firefox Inline-Block Frustration Thursday, June 28, 2007 [...]
[...] From: del.icio.us/tag/css Subscribe it 6/17/2008 Summary: display:table-cell… Original link Bookmark or Twitter: 0 sharing Bookmark twitter addthis_pub = [...]