Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups

web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

IE & Firefox differences with inline-block styled divs
 

Vic




quote this post edit post

IP Loged report this post

Old Post  08-23-04 - 12:17 AM  
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?


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Spartanicus




quote this post edit post

IP Loged report this post

Old Post  08-23-04 - 12:17 AM  
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


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Vic




quote this post edit post

IP Loged report this post

Old Post  08-23-04 - 12:17 AM  
> 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       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Spartanicus




quote this post edit post

IP Loged report this post

Old Post  08-23-04 - 12:17 AM  
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


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Vic




quote this post edit post

IP Loged report this post

Old Post  08-23-04 - 09:15 AM  
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>


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Spartanicus




quote this post edit post

IP Loged report this post

Old Post  08-26-04 - 05:27 PM  
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


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Neal




quote this post edit post

IP Loged report this post

Old Post  08-27-04 - 12:17 AM  
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>


Post Follow-Up to this message ]
Re: IE & Firefox differences with inline-block styled divs
 

Neal




quote this post edit post

IP Loged report this post

Old Post  09-01-04 - 04:16 AM  
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>


Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 03:32 PM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top