W3C home > Mailing lists > Public > www-style@w3.org > September 2011

Re: Proposing content-hidden for background-image and img content

From: Alan Gresley <alan@css-class.com>
Date: Fri, 09 Sep 2011 16:28:35 +1000
Message-ID: <4E69B213.9040605@css-class.com>
To: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>
CC: www-style list <www-style@w3.org>
On 9/09/2011 12:21 PM, Philippe Wittenbergh wrote:

> Implementations vary (wildly) and vary depending on the size being
> specified (in HTML or CSS) or not Opera - when size is specified -
> treats as overflow hidden WebKit: no alt text visible Gecko -
> overflow: visible, but this only affects layout when the image is
> inline (default). Size is not respected in that case.
>
> Didn't test with IE.
>
> Here is a quick test case:
> http://dev.l-c-n.com/CSS2/alt-text-missing-image.html
>
>
>
> Philippe -- Philippe Wittenbergh http://l-c-n.com/


IE9 seems to treat the alt text as an inline replaced element.

http://css-class.com/test/temp/ie9-alt-text.png


Something like the below would cause worst overlap.


<!DOCTYPE html>

<div style="width: 100px; height: 100px;">

   <img src="image-x100px-y50px" alt="this is some alt text that is 
rather quite long">

   <span style="display: inline-block; width: 100px; height: 50px; 
background: lime">some text</span>

</div>

<div style="background: salmon">other content</div>


If the alt text was overflowing the box generated by the intrinsic 
dimension of the image, then this would push the inline-block over other 
content.

Currently, Opera, WebKit and IE9 expands the alt text to overflow the 
box of the parent div. Gecko though shortens the alt text to fit within 
the box of the parent div and this pushes the inline-block down to where 
the sibling div is overlapping (inline on top and background underneath).




-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Friday, 9 September 2011 06:28:32 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:44 GMT