Re: [css-d] IE8, :hover, underline, and generated content
On Wed, May 30, 2012 at 3:27 AM, Philippe Wittenbergh wrote:
>
> On May 30, 2012, at 2:51 AM, Paceaux wrote:
>
>> Did anyone have any thoughts on removing underline from generated content in
>> the hover state for IE?
>>
>> I did some checking and it appears that the behavior occurs in all versions
>> of IE? I'm guessing that this is default behavior for IE, then, to allow
>> generated content to always inherit the hover state.
>
> It is not a hover problem; in IE, the underline is always propagated to the
> generated content - even when the generated element is set to e.g.
> display:inline-block. Older Gecko (at least Firefox 3.6) also did that.
>
> That is contrary to what the spec says:
> http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
>
> Unfortunately, I didn't find a workaround for IE (for older Gecko, you
> specify a background-color on the generated content and it would cover the
> underline, but that doesn't work in IE.
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
Painting the underline with a background does not work in IE8, but
what about a white outline that covers the underline?
a{
text-decoration:none;
}
a:hover, a:focus, a:active{
text-decoration:underline;
}
a[href*="pdf"]:after{
display: inline-block;
margin-left: 1ex;
color: #333;
content: " (PDF) ";
text-decoration: none;
outline: 2px solid white; /* paint it white, I'd hide that from
none-IE-browsers */
line-height:0.9; /* to be adjusted */
}
a[href*="pdf"]:hover:after{
text-decoration:none;
}
__
css-discuss [css-d@lists.css-discuss.org]
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] -webkit-tap-highlight-color
Am 30.05.2012 01:19 schrieb Christian Ziebarth: I recently worked on a project where for the iPad I altered the -webkit-tap-highlight-color value to a value that would match the color scheme of the site (http://www.brianleatart.com). I then told the project manager what I did thinking she would think it was neat and leave it at that but she followed up with, "That's great! Now can you also change the font color when the link is tapped?" After extensive searching I have been unable to find out how to do so. Any ideas? Without knowing about -webkit-tap-* properties or even having an iPad - would specifying a font color for a:focus and a:active do the trick? __ css-discuss [css-d@lists.css-discuss.org] 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] -webkit-tap-highlight-color
For iOS, use -webkit-text-fill-color to control link color in normal state, and -webkit-text-fill-color in :active mode to control the on-tap color. :visited is not supported. -webkit-tap-highlight-color controls the on-tap overlay color -- On 5/29/12 at 4:19 PM -0700, Christian Ziebarth wrote in a message entitled "[css-d] -webkit-tap-highlight-color": >I recently worked on a project where for the iPad I altered the >-webkit-tap-highlight-color value to a value that would match the color scheme >of the site (http://www.brianleatart.com). I then told the project manager >what I did thinking she would think it was neat and leave it at that but she >followed up with, "That's great! Now can you also change the font color when >the link is tapped?" After extensive searching I have been unable to find out >how to do so. Any ideas? -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [css-d@lists.css-discuss.org] 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] -webkit-tap-highlight-color
On May 30, 2012, at 5:06 PM, Rick Gordon wrote:
> For iOS, use -webkit-text-fill-color to control link color in normal state,
> and -webkit-text-fill-color in :active mode to control the on-tap color.
Hmm. a[href] { -webkit-text-fill-color: blue; } works, but a[href]:active {
-webkit-text-fill-color: orange; } doesn't do anything (the link stays blue).
Setting a[href]:hover { color: white; -webkit-text-fill-color: red; } does
make the clicked link red.
tested on iPodTouch with iOS 5.1.1 and the iPad in the simulator (iOS 5.1)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
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] IE8, :hover, underline, and generated content
Thanks so much, Philippe. I checked in IE10 all the way back and all of them
did the same. Glad to know that my favorite browsers did get it right.
For the client, I ended up writing some jQuery to imitate generated content,
just for IE.
However, Ingo, I didn't think to try outline. I'll look into that and see if
the client approves (I hate writing JS for presentational stuff). Thanks for
the suggestion.
On May 30, 2012, at 1:17 AM, Ingo Chao wrote:
> On Wed, May 30, 2012 at 3:27 AM, Philippe Wittenbergh wrote:
>>
>> On May 30, 2012, at 2:51 AM, Paceaux wrote:
>>
>>> Did anyone have any thoughts on removing underline from generated content
>>> in the hover state for IE?
>>>
>>> I did some checking and it appears that the behavior occurs in all versions
>>> of IE? I'm guessing that this is default behavior for IE, then, to allow
>>> generated content to always inherit the hover state.
>>
>> It is not a hover problem; in IE, the underline is always propagated to the
>> generated content - even when the generated element is set to e.g.
>> display:inline-block. Older Gecko (at least Firefox 3.6) also did that.
>>
>> That is contrary to what the spec says:
>> http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
>>
>> Unfortunately, I didn't find a workaround for IE (for older Gecko, you
>> specify a background-color on the generated content and it would cover the
>> underline, but that doesn't work in IE.
>>
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>
> Painting the underline with a background does not work in IE8, but
> what about a white outline that covers the underline?
>
>
> a{
> text-decoration:none;
> }
> a:hover, a:focus, a:active{
> text-decoration:underline;
> }
>
> a[href*="pdf"]:after{
>display: inline-block;
>margin-left: 1ex;
>color: #333;
>content: " (PDF) ";
>text-decoration: none;
>
>outline: 2px solid white; /* paint it white, I'd hide that from
> none-IE-browsers */
>line-height:0.9; /* to be adjusted */
>
> }
> a[href*="pdf"]:hover:after{
> text-decoration:none;
> }
> __
> css-discuss [css-d@lists.css-discuss.org]
> 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-discuss [css-d@lists.css-discuss.org]
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] How to stretch linear gradient all over the background
Hi Pls can someone tell me how to get a linear gradient or radial for the backdround with a working example. Is it possible with only css Thanks in advance Meera __ css-discuss [css-d@lists.css-discuss.org] 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] How to stretch linear gradient all over the background
On Wed, May 30, 2012 at 12:51 PM, meera kibe wrote: > Hi > Pls can someone tell me how to get a linear gradient or radial for the > backdround with a working example. > Is it possible with only css > Thanks in advance > > Meera http://tomliv.com/gradient/test.html Tested Mac FF 12, Mac Chrome 21 HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] 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] How to stretch linear gradient all over the background
What browser? Sent from iOS 5 On May 30, 2012, at 7:11 PM, "Gail Issen" wrote: > I'm very confused ... When I look at your page, the gradient displays > beautifully. Then, I did a View Source and copied your code into a new file > and the gradient does not display. Can anyone shed some light on this? > > Gail > Gail W. Issen > http://www.xpertwebs.com > http://www.xpertmarks.com > Tel: 713-721-6868 > Cell: 713-501-2302 > Fax : 713-721-0145 > > > -Original Message- > From: css-d-boun...@lists.css-discuss.org > [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston > Sent: Wednesday, May 30, 2012 1:50 PM > To: meera kibe > Cc: css-d@lists.css-discuss.org > Subject: Re: [css-d] How to stretch linear gradient all over the background > > On Wed, May 30, 2012 at 12:51 PM, meera kibe wrote: >> Hi >> Pls can someone tell me how to get a linear gradient or radial for the > backdround with a working example. >> Is it possible with only css >> Thanks in advance >> >> Meera > > http://tomliv.com/gradient/test.html > > Tested Mac FF 12, Mac Chrome 21 > > HTH > > -- > > Tom Livingston | Senior Interactive Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > __ > css-discuss [css-d@lists.css-discuss.org] > 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-discuss [css-d@lists.css-discuss.org] 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] How to stretch linear gradient all over the background
I'm very confused ... When I look at your page, the gradient displays beautifully. Then, I did a View Source and copied your code into a new file and the gradient does not display. Can anyone shed some light on this? Gail W. Issen http://www.xpertwebs.com Gail, Umm, dunno-- other than Tom's markup is not valid and the page fails this end in IE/9 in a Windows 7 notebook... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] 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] How to stretch linear gradient all over the background
On Wed, May 30, 2012 at 8:23 PM, David Laakso wrote: > I'm very confused ... When I look at your page, the gradient displays > beautifully. Then, I did a View Source and copied your code into a new file > and the gradient does not display. Can anyone shed some light on this? > > > Gail W. Issen > http://www.xpertwebs.com > > > Gail, > > Umm, dunno-- other than Tom's markup is not valid and the page fails > this end in IE/9 in a Windows 7 notebook... > > Best, > David Laakso > > > -- > Chelsea Creek Studio Apologies. Like the page says, I need coffee. That's what I get for rushing. The page validates now using http://validator.nu/ HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] 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] How to stretch linear gradient all over the background
Might be a link to the image problem. The background image needs to be hosted on your machine and properly linked to the html, or the css style sheet. If not, and it's hosted on a server, you will need the full url, such as: http://www.server.com/image.jpg. To put the image on your machine, right click on the background gradient and do a SAVE AS to your machine. Put the saved image into the same file where you have the test.html file. That should do it. On 5/30/12, Tom Livingston wrote: > What browser? > > Sent from iOS 5 > > On May 30, 2012, at 7:11 PM, "Gail Issen" wrote: > >> I'm very confused ... When I look at your page, the gradient displays >> beautifully. Then, I did a View Source and copied your code into a new >> file >> and the gradient does not display. Can anyone shed some light on this? >> >> Gail >> Gail W. Issen >> http://www.xpertwebs.com >> http://www.xpertmarks.com >> Tel: 713-721-6868 >> Cell: 713-501-2302 >> Fax : 713-721-0145 >> >> >> -Original Message- >> From: css-d-boun...@lists.css-discuss.org >> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston >> Sent: Wednesday, May 30, 2012 1:50 PM >> To: meera kibe >> Cc: css-d@lists.css-discuss.org >> Subject: Re: [css-d] How to stretch linear gradient all over the >> background >> >> On Wed, May 30, 2012 at 12:51 PM, meera kibe >> wrote: >>> Hi >>> Pls can someone tell me how to get a linear gradient or radial for the >> backdround with a working example. >>> Is it possible with only css >>> Thanks in advance >>> >>> Meera >> >> http://tomliv.com/gradient/test.html >> >> Tested Mac FF 12, Mac Chrome 21 >> >> HTH >> >> -- >> >> Tom Livingston | Senior Interactive Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com >> __ >> css-discuss [css-d@lists.css-discuss.org] >> 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-discuss [css-d@lists.css-discuss.org] > 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-discuss [css-d@lists.css-discuss.org] 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] vertical menu question
On a CSS vertical menu, is there a way to have its submenus open in an upward direction if the submenu doesn't have enough space to open in a downward direction? Thanks. Bruce __ css-discuss [css-d@lists.css-discuss.org] 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/
