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?

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

> 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       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+

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

Spartanicus <me@privacy.net> wrote in message news:<nkc2i0lh6ghce1bafk4nps4b
l678gq593d@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>

redvic0001@hotmail.com (Vic) wrote:
 

[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 t
o
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

> 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       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+

quote:
Originally posted by Spartanicus 
redvic0001@hotmail.com (Vic) wrote:
 



<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>

 

[condescending]Pretending to help people[/condescending]

OK, I am a new user and don't want to get entangled with the "help about hel
p" dispute in this thread- but I am trying to get my page to work.

My hopeful result is 
http://wbtproductions.com/photos/hopeful.jpg(the first in the attached seque
nce), with the arrows on either side of the image.  I'd also like to eventua
lly make them equal to the height of the image but I can work on that later.
  

http://wbtproductions.com/photos/actual.jpg (the second in the attached sequ
ence)

The only difference is that the "actual" is wrapped in a div with display: i
nline.  The image is also set to inline display, in both cases.

As you may guess from the image, this is not "The Old Man of the Mountain's 
grandfather" but instead a sample image that I'm playing around with.  The r
eason that I need to wrap it in a div is because the actual image is matted 
and framed with some semi-elaborate CSS div work, with the end result visibl
e at 
http://wbtproductions.com/photos/matted.jpg.  (the third in the attached seq
uence)

The application is an online photo gallery that will eventually allow people
 to get matted prints of photos.  

So one key question is how do divs and images differ, when both are set to d
isplay: inline?  The same thing happens (between 'hopeful" and "actual") if 
I use a word of text instead of the test image.  

I will try to go for a table for now, but I'd love a CSS solution!  
Any help would be appreciated.  Thanks!