Prev: 370779 Information portals for computer and Web technology 65
Next: Overriding table {width:100%}
From: jeff on 28 Feb 2010 11:08
Neredbojias wrote:
> On 27 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>
>> Neredbojias wrote:
>>> On 27 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>>>
>>>> It appears that we not only have to support IE8 but all of it's
>>>> various modes. Is the default setting IE8 in standards mode and is
>>>> this likely where most people are?
>>>>
>>>> How does IE8 in IE7 mode respond to this:
>>>>
>>>> <!--[if lte IE 7]>
>>>>
>>>> I'm without IE8 at the moment.
>>>>
>>>> Recommendations for dealing with inline-block in this quirky
>>>> beast?
>>> Use floats. If centering is required, approximate it with ems.
>> Lets say you have a page of thumbnails with descriptions. Row
>> after
>> row. The problem with floats is that either all your thumbnail
>> containers have to be the same height, or you have to force clears
>> after every row which leaves you with fixed row counts. Otherwise any
>> box that extends lower than it's neighbors will be the starting point
>> for the next row. The fixes for that are more irksome than the fixes
>> for inline-block. Plus you you can align bottom (with inline-block),
>> if you wish.
>>
>> Now, I use floats in every template I write, but for flowing rows,
>> they suck!
>>
>> Just my 2 cents! YMMV.
>
> Different heights? Well yeah, I think you're right about the effect of
> that on floats, but assuming it "worked" as you indicate you desire,
> why would you want such a layout in the first place? Varying heights
> would make the "row" spacings asymmetrical; wouldn't it look like dodo
> doo doo as a "finished product"?

Quite the opposite as it is the spacing between rows that counts (not
the spacing from the top of one row to the next). With inline-block that
is explicitly set by the bottom margin (or top). With floats, you have
to allow extra height, usually unused, in the the thumb containers if
you don't set a row limit, and the row to row negative space varies (ugly).

There's lots of reasons why one row might be taller or shorter. It could
be that the aspect of a thumb image (portrait or landscape) varies or
it could be the amount of accompanying text. With inline-block, none of
that matters and the row to row spacing is always the same.

Now, if you are making pages by hand then you can control this by
arranging or only inserting fixed text amounts or arranging or cropping
images. But that takes the power of maintaining a site out of the site
owners hands and puts it solely in the web developers.

I used to float all my thumbs but I now inline-block them.

Latest policy is, such as BootNic suggested, to just add this to the
template:

<!--[if lt IE 8]>
<style type="text/css">
..inline-block {display: inline;}
zoom: 1;
</style>
<![endif]-->

Then just add an extra class of inline-block to anything that needs it

<div class="thumb inline-block"...

.thumb definition would have the standards compatible display:
inline-block. Toss in -moz if you wish older FF support.

YMMV

Jeff

>
From: Neredbojias on 1 Mar 2010 01:17
On 28 Feb 2010, jeff <jeff_thies(a)att.net> wrote:

> Neredbojias wrote:
>> On 27 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>>
>>> Neredbojias wrote:
>>>> On 27 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>>>>
>>>>> It appears that we not only have to support IE8 but all of it's
>>>>> various modes. Is the default setting IE8 in standards mode and
>>>>> is this likely where most people are?
>>>>>
>>>>> How does IE8 in IE7 mode respond to this:
>>>>>
>>>>> <!--[if lte IE 7]>
>>>>>
>>>>> I'm without IE8 at the moment.
>>>>>
>>>>> Recommendations for dealing with inline-block in this quirky
>>>>> beast?
>>>> Use floats. If centering is required, approximate it with ems.
>>> Lets say you have a page of thumbnails with descriptions. Row
>>> after
>>> row. The problem with floats is that either all your thumbnail
>>> containers have to be the same height, or you have to force clears
>>> after every row which leaves you with fixed row counts. Otherwise
>>> any box that extends lower than it's neighbors will be the starting
>>> point for the next row. The fixes for that are more irksome than
>>> the fixes for inline-block. Plus you you can align bottom (with
>>> inline-block), if you wish.
>>>
>>> Now, I use floats in every template I write, but for flowing
>>> rows,
>>> they suck!
>>>
>>> Just my 2 cents! YMMV.
>>
>> Different heights? Well yeah, I think you're right about the effect
>> of that on floats, but assuming it "worked" as you indicate you
>> desire, why would you want such a layout in the first place?
>> Varying heights would make the "row" spacings asymmetrical; wouldn't
>> it look like dodo doo doo as a "finished product"?
>
> Quite the opposite as it is the spacing between rows that counts
> (not
> the spacing from the top of one row to the next). With inline-block
> that is explicitly set by the bottom margin (or top). With floats,
> you have to allow extra height, usually unused, in the the thumb
> containers if you don't set a row limit, and the row to row negative
> space varies (ugly).

Er, actually I was referring to the spacings between content rows.
Even with inline-block, the row *spacing* might technical be the same
throughout, but one extra-high item in a populated row would make that
"row-spacing" look much bigger.

> There's lots of reasons why one row might be taller or shorter. It
> could
> be that the aspect of a thumb image (portrait or landscape) varies
> or
> it could be the amount of accompanying text. With inline-block, none
> of that matters and the row to row spacing is always the same.
>
> Now, if you are making pages by hand then you can control this by
> arranging or only inserting fixed text amounts or arranging or
> cropping images. But that takes the power of maintaining a site out
> of the site owners hands and puts it solely in the web developers.
>
> I used to float all my thumbs but I now inline-block them.

I agree; inline-block is better (when it works.)

> Latest policy is, such as BootNic suggested, to just add this to
> the
> template:
>
> <!--[if lt IE 8]>
> <style type="text/css">
> .inline-block {display: inline;}
> zoom: 1;
> </style>
> <![endif]-->
>
> Then just add an extra class of inline-block to anything that needs
> it
>
> <div class="thumb inline-block"...
>
> .thumb definition would have the standards compatible display:
> inline-block. Toss in -moz if you wish older FF support.

Well, that might work for ie only, I guess, though I never had much
luck using "inline" that way in general. But Bootnic's pretty good so
it's worth a try.

--
Neredbojias

82nd Academy Award Predictions:

Best Picture: Avatar
Actor in a Leading Role: Jeff Bridges
Actress in a Leading Role: Meryl Streep or Sandra Bullock
Actor in a Supporting Role: Christopher Plummer
Actress in a Supporting Role: Vera Farmiga or Maggie Gyllenhaal
Director: James Cameron

From: jeff on 1 Mar 2010 07:27
Neredbojias wrote:
> On 28 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>
>> Neredbojias wrote:
>>> On 27 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>>>
>>>> Neredbojias wrote:
>>>>> On 27 Feb 2010, jeff <jeff_thies(a)att.net> wrote:
>>>>>
<snip>
>>
>> <!--[if lt IE 8]>
>> <style type="text/css">
>> .inline-block {display: inline;}
>> zoom: 1;
>> </style>
>> <![endif]-->
>>
>> Then just add an extra class of inline-block to anything that needs
>> it
>>
>> <div class="thumb inline-block"...
>>
>> .thumb definition would have the standards compatible display:
>> inline-block. Toss in -moz if you wish older FF support.
>
> Well, that might work for ie only, I guess, though I never had much
> luck using "inline" that way in general.

I've been using one of the two methods I listed for a year or so, in
one site or another, without any known trouble.

What issues have you had? Did you add the zoom: 1 to trigger has layout?

I suppose we should run up a test page, for all the various IE8 modes
and flavors. Didn't BootNic post a simple demo?

But Bootnic's pretty good so
> it's worth a try.

I agree :-)

Jeff
>
From: BootNic on 3 Mar 2010 00:43
On Sun, 28 Feb 2010 11:08:08 -0500
jeff <jeff_thies(a)att.net> wrote:

[snip]

> Latest policy is, such as BootNic suggested, to just add this to
> the template:
>
> <!--[if lt IE 8]>
> <style type="text/css">
> .inline-block {display: inline;}
> zoom: 1;
> </style>
> <![endif]-->

Copy/type error yes? zoom goes inside the rule.

[snip]



--
BootNic Wed Mar 3, 2010 12:43 am
Complaining is good for you as long as you're not complaining to the
person you're complaining about.
*Lynn Johnston*

⁕ 131 days remaining
From: BootNic on 3 Mar 2010 00:54
On Mon, 01 Mar 2010 07:27:16 -0500
jeff <jeff_thies(a)att.net> wrote:

[snip]

> I suppose we should run up a test page, for all the various IE8
> modes and flavors. Didn't BootNic post a simple demo?

No need, no worries. Simply set the mode you wish to use in the
document with the appropriate meta element. I suggest the default mode,
IE=EmulateIE8.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

Understand the rendering results of any mode that may be used.


--
BootNic Wed Mar 3, 2010 12:54 am
You can turn painful situations around through laughter. If you can
find humor in anything - even poverty - you can survive it.
*Bill Cosby*

⁕ 131 days remaining
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: 370779 Information portals for computer and Web technology 65
Next: Overriding table {width:100%}