"display: inline-block;" question

[Axel Dahmen]

Hi,

current browsers don't support "display: inline-block;" and "display:
inline-table;", resp. Thus I'm using "float: left;" to achieve a similar
effect.

Problem is that if a row of elements uses this kind of block floating, they
don't wrap to build a whole new line but instead get "hooked" at the
left-most element being larger than the element right beside this
"overflowing" element.

On my website I'm making heavy use of this property. To see the effect, see

http://www.sportbootcharter.com/Spor...?cont=Search.a
spx%3Fps%3d1

and resize page. (Works only for IE at the moment as ASP.NET renders pages
differently for IE, I'll fix this later...)

It looks quite jagged this way. Can someone please enlighten on how to force
kind of a line-feed?

Also, will "display: inline-block;" and "display: inline-table;" enforce
this kind of a thorough line-feed? (I think so, just want to reinsure...)
Sketch of the current situation (all elements style="float: left;"):

|---| |---| |---|
| | | 2 | | 3 |
| 1 | |---| |---|
| |
|---| |---| |---|
| 4 | | 5 |
|---| |---|
Sketch of the desired situation(all elements style="display:
inline-table;"):

|---| |---| |---|
| | | 2 | | 3 |
| 1 | |---| |---|
| |
|---|

|---| |---|
| 4 | | 5 |
|---| |---|
TIA,
Axel Dahmen

[Spartanicus]

"Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote:

current browsers don't support "display: inline-block;" and "display:
inline-table;", resp.
Some do, some don't:

IE: supports inline-block, but only on elements that default to inline,
it doesn't support inline-table.
Gecko based browsers: they support neither.
Opera 4+ support inline-table, Opera 7+ supports inline-block.
Safari: supports inline-table, I don't know if it supports inline-block.
Thus I'm using "float: left;" to achieve a similar effect.
Floating is something else entirely.
Problem is that if a row of elements uses this kind of block floating, they
don't wrap to build a whole new line but instead get "hooked" at the
left-most element being larger than the element right beside this
"overflowing" element.

Also, will "display: inline-block;" and "display: inline-table;" enforce
this kind of a thorough line-feed? (I think so, just want to reinsure...)

It should, see
http://www.spartanicus.utvinternet.i..._captions2.htm

--
Spartanicus

[Axel Dahmen]

Thanks for helping me on this, Spartanicus.

Your sample looks really good!! I didn't know that IE partially supports
this new property.
I've tried it locally and it yields great results. Well, however, Gecko
browsers don't support it so I still can't make use of it.. *sigh*

Floating is something else entirely.
Of course, I am aware of that, but AFAIK it's currently the only available
option to achieve something similar to the desired effect; I have to stick
with the most popular browsers and even be backward compatible a bit. Still
a hack, though...
Do you perhaps see another option, supported both by Gecko/IE6?

Regards,
Axel
------------
"Spartanicus" <[e-mail]> schrieb im Newsbeitrag
news:9n********************************@news.spart anicus.utvinternet.ie... "Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote:

current browsers don't support "display: inline-block;" and "display:
inline-table;", resp.
Some do, some don't:

IE: supports inline-block, but only on elements that default to inline,
it doesn't support inline-table.
Gecko based browsers: they support neither.
Opera 4+ support inline-table, Opera 7+ supports inline-block.
Safari: supports inline-table, I don't know if it supports inline-block.

Thus I'm using "float: left;" to achieve a similar effect.

Floating is something else entirely.

Problem is that if a row of elements uses this kind of block floating, theydon't wrap to build a whole new line but instead get "hooked" at the
left-most element being larger than the element right beside this
"overflowing" element.

Also, will "display: inline-block;" and "display: inline-table;" enforce
this kind of a thorough line-feed? (I think so, just want to reinsure...)

It should, see

http://www.spartanicus.utvinternet.i...with_captions2.
htm
--
Spartanicus

[Spartanicus]

"Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote:

Do you perhaps see another option, supported both by Gecko/IE6?

Adding top and/or bottom margin so that the row of floated elements are
all the same "size" will prevent the "jagged" rendering. Lot's of manual
work though if the natural element sizes are unpredictable.

--
Spartanicus

[Sander Tekelenburg]

In article
<9n********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <[e-mail]> wrote:

"Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote:

current browsers don't support "display: inline-block;" and "display:
inline-table;", resp.

Some do, some don't:

IE: supports inline-block, but only on elements that default to inline,
it doesn't support inline-table.
Gecko based browsers: they support neither.
Opera 4+ support inline-table, Opera 7+ supports inline-block.
Safari: supports inline-table, I don't know if it supports inline-block.

Both Safari and iCab 3.0 suport display:inline-block.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>