IE & Firefox differences with inline-block styled divs

[Vic]

I suspect that Firefox is doing it right (it usually is) but I worked
out a page thinking this *should* do what I want and lo and behold it
did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the
internal "imagediv" div from the "imagechunk " div it nearly works but
doesn't algin the "link text" like IE.

Again my question is... how can I achieve an effect like I've got in
IE6 in a cross browser manner?

[Spartanicus]

Re: IE & Firefox differences with inline-block styled divs

redvic0001@hotm ail.com (Vic) wrote:
[color=blue]
>I suspect that Firefox is doing it right (it usually is) but I worked
>out a page thinking this *should* do what I want and lo and behold it
>did work in IE6
>
>http://www.fogcat.co.uk/example/test002.html[/color]

inline-block is a CSS 2.1 value not supported by Firefox or IE. So it
doesn't "work" in IE, it get's it wrong, you just like what it's doing.
[color=blue]
>Again my question is... how can I achieve an effect like I've got in
>IE6 in a cross browser manner?[/color]

Again the question is "what are you actually trying to do?", supply
something using real content so that we can provide proper help.

--
Spartanicus

[Vic]

Re: IE & Firefox differences with inline-block styled divs

> Again the question is "what are you actually trying to do?", supply[color=blue]
> something using real content so that we can provide proper help.[/color]

What I am trying to do is not dissimilar from the IE result.

I want a set of divs down the page (the "imagedivs" )
Each div will contain:
* An image - but that image will be nested inside a div - it's
returned
that way from a php function. Images may be of varying height so
I can't
use pixel values at top margins or anything like that.
* A link to another page

- The link should be positioned to the right of the image and
aligned
vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

+--------------------------------------+
| +----------------+ |
| | .............. | | --- <div>
| | : : | | ... <img>
| | : : | Link here |
| | : : | |
| | .............. | |
| +----------------+ |
+--------------------------------------+

+--------------------------------------+
| +----------------+ |
| | .............. | |
| | : : | |
| | : : | Link here |
| | : : | |
| | .............. | |
| +----------------+ |
+--------------------------------------+

[Spartanicus]

Re: IE &amp; Firefox differences with inline-block styled divs

redvic0001@hotm ail.com (Vic) wrote:
[color=blue][color=green]
>> Again the question is "what are you actually trying to do?", supply
>> something using real content so that we can provide proper help.[/color]
>
>What I am trying to do is not dissimilar from the IE result.[/color]

Sigh, you are again referring to the layout you want without showing
actual content that would allow us to judge the fundamentals.
[color=blue]
> - The link should be positioned to the right of the image and
>aligned
> vertically with the centre of the image.[/color]

img{vertical-align:middle}

<img ...><a href="foobar">f oobar</a>

--
Spartanicus

[Vic]

Re: IE &amp; Firefox differences with inline-block styled divs

Spartanicus <me@privacy.net > wrote in message news:<nkc2i0lh6 ghce1bafk4nps4b l678gq593d@news .spartanicus.ut vinternet.ie>.. .
....[color=blue]
> Sigh, you are again referring to the layout you want without showing
> actual content that would allow us to judge the fundamentals.[/color]
....

<div class='sectionl ink'>
<div class='albumima ge'>
<div class='thumbnai lPicture'>
<a href='./display.php?alb um_id=411f94635 9cae'><img
src='./gallery/pictures/411f946359cae/thumbnails/nanci.jpg'
alt='Display the album' width="100" height="149" border='0'></a>
</div>
</div>
<div class='albumlin k'>
<a ' href='./display.php?alb um_id=411f94635 9cae'>First
Album</a><br />
</div>
</div>
<div class='sectionl ink'>
<div class='albumima ge'>
<div class='thumbnai lPicture'>
<a href='./display.php?alb um_id=411f93f1c 15f4'><img
src='./gallery/pictures/411f93f1c15f4/thumbnails/1s_20and_200s.j pg'
alt='Display the album' width="100" height="149" border='0'></a>
</div>
</div>
<div class='albumlin k'>
<a ' href='./display.php?alb um_id=411f93f1c 15f4'>Second
Album</a><br />
</div>
</div>

[Spartanicus]

Re: IE &amp; Firefox differences with inline-block styled divs

redvic0001@hotm ail.com (Vic) wrote:
[color=blue][color=green]
>> Sigh, you are again referring to the layout you want without showing
>> actual content that would allow us to judge the fundamentals.[/color][/color]

[Div soup snipped]

What we have here is a failure to communicate.

Before you can think about styling the proper structure has to be
applied, structure trumps presentation, content should make sense sans
css, and in the context of this thread: the choice of styling depends on
it.

Content should therefore be marked up according to what it *is*, not how
you want it to look or sound like (with or without css).

The code you posted still fails to show us what type of content it is,
this makes suggesting a styling method a stab in the dark.

<stab in low light conditions>
Linked non square image thumbs of "albums" with a text link next to it:
an index of photo albums perhaps?
</stab in low light conditions>

Div's and span's are a semantically neutral "last resort" type of
markup, they should only be used if there's nothing better available.

Imo there's no single markup element that suites this type of content,
but I wouldn't resort to div's. I'd mark them up as list items if it's
just a thumbnail and a short text link (not a paragraph), in which case
the img{vertical-align:middle} styling I suggested earlier would work to
create the visual appearance you want.

If the thumb images differ in width and the index listing is to be
displayed vertically then a table could be the right type of markup (it
allows the text links to be lined up logically). In the case of table
markup you should use the cell align and valign attributes to create the
visual appearance you want.

--
Spartanicus

[chiazma]

Re: IE &amp; Firefox differences with inline-block styled divs


Spartanicus wrote:[color=blue]
> *redvic0001@hot mail.com (Vic) wrote:
> [color=darkred]
>
>
>
> <stab in low light conditions>
> Linked non square image thumbs of "albums" with a text link next to
> it:
> an index of photo albums perhaps?
> </stab in low light conditions>
>
> *[/color]

[condescending]Pretending to help people[/condescending]



--
chiazma
------------------------------------------------------------------------
Posted via http://www.forum4designers.com
------------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message108445.html

[Neal]

Re: IE &amp; Firefox differences with inline-block styled divs

On Tue, 24 Aug 2004 13:27:25 -0500, chiazma
<chiazma.1blsun @mail.forum4des igners.com> wrote:
[color=blue]
> Spartanicus wrote:[color=green]
>> *redvic0001@hot mail.com (Vic) wrote:
>> [color=darkred]
>> <stab in low light conditions>
>> Linked non square image thumbs of "albums" with a text link next to
>> it:
>> an index of photo albums perhaps?
>> </stab in low light conditions>[/color]
>
> [condescending]Pretending to help people[/condescending][/color]

<serious>Wantin g to help those who offer enough info to let us</serious>
[color=blue]
> ------------------------------------------------------------------------
> Posted via http://www.forum4designers.com
> ------------------------------------------------------------------------
> View this thread: http://www.forum4designers.com/message108445.html[/color]

<condescending> Pretewnding to help people</condescending>