Re: [css-d] link image background problem w/IE 6 (natch)

2007-11-16 Thread Tim Ware 

On Nov 16, 2007, at 8:17 AM, DAVOUD TOHIDY wrote:


 on Date: Fri, 16 Nov 2007 08:11:00 -0800 Tim wrote:
  I created a link class to have a background image on linked text

 have a look at design consideration section of my
 portfolio located http://cssfreelancer.awardspace.com .

 hope that helps


I'm not sure what you want me to look at. I looked at this page on  
your site:

http://www.svendtofte.com/code/max_width_in_ie/

in IE 6, and I see the same issue of disappearing link background  
image, under The Useability Studies, the linked text: The Effect  
of Line Lengths in Children and Adults' Online Reading Performance   
allocates the space for your background arrow, but doesn't display it.

so if you have something you want to communicate, so far I'm missing it.

Thanks, and sorry if I'm being dense!

Tim


 best
 davoud

 Have fun while connecting on Messenger! Click here to learn more.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] link image background problem w/IE 6 (natch)

2007-11-16 Thread Alex Robinson 
Please note that display:inline-block in invalid CSS2.1 but is valid CSS3.


Actually it's valid CSS2.1 but not valid CSS2.

Compare

http://www.w3.org/TR/CSS2/visuren.html#display-prop

http://www.w3.org/TR/CSS21/visuren.html#display-prop
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] link image background problem w/IE 6 (natch)

2007-11-16 Thread Tim Ware 
I created a link class to have a background image on linked text  
where needed:

a.checkbox {
background:url(/healthcare/_img/Pencil.gif) no-repeat 100% 50%;
padding-right:20px;
}

The above adds a checkbox to the right of the linked text, and it  
works fine everywhere but IE 6 and 7 where, if there are two links in  
a paragraph with that class assigned -- and the two blocks of linked  
text wrap to separate lines -- the first link displays the image and  
the second link allocates the space/padding, but doesn't display the  
image.

This can be seen here:  http://www.opa.ca.gov/healthcare/use-plan/ 
disability-assistance.aspx

Here's the full HTML including the the floated div  (with the image  
and paragraph underneath) that forces the text to wrap, and the text  
that is to the left of the floated div:

div class=callout2img src=/healthcare/_img/photo-disability- 
assistance.jpg alt=White female doctor, 40, and middle-aged Asian  
woman in a wheelchair looking at an exam table /pThis exam table  
can be raised and lowered, so it is easier to get on and off.  
Accessible tables such as this one are becoming more common. /p/div

  pIf you have a disability, your health plan must remove most  
physical or communication barriers that make it hard for you to get  
the care you need. Call your health plan and be firm about what you  
need./p

pUse the worksheets on a href=/healthcare/_downloads/physical- 
access.pdf class=checkboxphysical access/a and a href=/ 
healthcare/_downloads/communication-asst.pdf  
class=checkboxcommunication assistance/a to list the access or  
services you need./p

If the two links are in separate paragraphs, then no problem. If the  
two links are on one line, no problem. But if they break to separate  
lines, no second image.

Any help greatly appreciated.

Thanks.

Tim




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] link image background problem w/IE 6 (natch)

2007-11-16 Thread Ingo Chao 
Tim Ware wrote:
 I created a link class to have a background image on linked text  
 where needed:
 
 a.checkbox {
   background:url(/healthcare/_img/Pencil.gif) no-repeat 100% 50%;
   padding-right:20px;
   }
 
 The above adds a checkbox to the right of the linked text, and it  
 works fine everywhere but IE 6 and 7 where, if there are two links in  
 a paragraph with that class assigned -- and the two blocks of linked  
 text wrap to separate lines -- the first link displays the image and  
 the second link allocates the space/padding, but doesn't display the  
 image.
 
 This can be seen here:  http://www.opa.ca.gov/healthcare/use-plan/ 
 disability-assistance.aspx

I believe IE follows a sort of bounding box background position model 
for inline elements, where a background image can become lost.

http://www.satzansatz.de/cssd/wrappinglinkbg.html

There may be clever solutions out there, but I don't think CSS can solve 
this for IE6 and IE7 without some sort of degradation. I'd search for a 
scripting solution.

Regards,

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] link image background problem w/IE 6 (natch)

2007-11-16 Thread Alan Gresley 
Tim Ware wrote:

 I created a link class to have a background image on linked text  
 where needed:
 
 a.checkbox {
   background:url(/healthcare/_img/Pencil.gif) no-repeat 100% 50%;
   padding-right:20px;
   }
 
 The above adds a checkbox to the right of the linked text, and it  
 works fine everywhere but IE 6 and 7 where, if there are two links in  
 a paragraph with that class assigned -- and the two blocks of linked  
 text wrap to separate lines -- the first link displays the image and  
 the second link allocates the space/padding, but doesn't display the  
 image.
 
 This can be seen here:  http://www.opa.ca.gov/healthcare/use-plan/ 
 disability-assistance.aspx
 
 
 Any help greatly appreciated.
 
 Thanks.
 
 Tim

Hi Tim

I has a similar problem on my site with images of pointing fingers marking 
external links. My solution though not perfect keeps the images from 
disappearing, but when the text does wrap instead of each inline box wrapping 
to a new line, the whole link block drops instead. Also if a very long link 
wraps to a new line (as on the links page of my site) the image sits between 
each line instead of on the lower line of text. If you can tolerate both these 
situations than this is the fix.

*:first-child+html a.checkbox {display:inline-block}/* For IE7 */

* html a.exlink {height:1%}/* For IE6 */

Please note that display:inline-block in invalid CSS2.1 but is valid CSS3. None 
of the other hasLayout triggers that could be used as (min-/max-)height or 
(min-/max-)width worked. Zoom does work but since that is invalid CSS period, I 
choose not to used it.

Kind Regards, Alan
http://css-class.com/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/