Stylesheets - IE & Firefox differences with inline-block styled divs

Author

IE & Firefox differences with inline-block styled divs

Vic

2004-08-22, 7:17 pm

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

2004-08-22, 7:17 pm

redvic0001@hotmail.com (Vic) wrote:

>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

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.

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

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

2004-08-22, 7:17 pm

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

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

2004-08-22, 7:17 pm

redvic0001@hotmail.com (Vic) wrote:

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

Sigh, you are again referring to the layout you want without showing
actual content that would allow us to judge the fundamentals.

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

img{vertical-align:middle}

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

--
Spartanicus

Vic

2004-08-23, 4:15 am

Spartanicus <me@privacy.net> wrote in message news:<nkc2i0lh6ghce1bafk4nps4bl678gq593d@news.spartanicus.utvinternet.ie>...
....
> Sigh, you are again referring to the layout you want without showing
> actual content that would allow us to judge the fundamentals.
....

<div class='sectionlink'>
<div class='albumimage'>
<div class='thumbnailPicture'>
<a href='./display.php?album_id=411f946359cae'><img
src='./gallery/pictures/411f946359cae/thumbnails/nanci.jpg'
alt='Display the album' width="100" height="149" border='0'></a>
</div>
</div>
<div class='albumlink'>
<a ' href='./display.php?album_id=411f946359cae'>First
Album</a><br />
</div>
</div>
<div class='sectionlink'>
<div class='albumimage'>
<div class='thumbnailPicture'>
<a href='./display.php?album_id=411f93f1c15f4'><img
src='./gallery/pictures/411f93f1c15f4/thumbnails/1s_20and_200s.jpg'
alt='Display the album' width="100" height="149" border='0'></a>
</div>
</div>
<div class='albumlink'>
<a ' href='./display.php?album_id=411f93f1c15f4'>Second
Album</a><br />
</div>
</div>

Spartanicus

2004-08-26, 12:27 pm

redvic0001@hotmail.com (Vic) wrote:
[color=darkred]

[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

Neal

2004-08-26, 7:17 pm

On Tue, 24 Aug 2004 13:27:25 -0500, chiazma
<chiazma.1blsun@mail.forum4designers.com> wrote:

> Spartanicus wrote:
>
> [condescending]Pretending to help people[/condescending]

<serious>Wanting to help those who offer enough info to let us</serious>

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

<condescending>Pretewnding to help people</condescending>

Neal

2004-08-31, 11:16 pm