Re: [css-d] Can I style generated content?
On 9/23/05, [EMAIL PROTECTED]
> I also encountered a problem with the generated content on hover. I tried
> to remove the "< " on hover, but I am seeing all of the other links flash
> when I hovered over the link with the generarted content.
> html>body #sidebar-nav li.selected a:before {
> content: "< ";
> }
> html>body #sidebar-nav li.selected a:hover:before {
> content: ""; /*gets rid of < */
> }
> Why would hovering over a link with generated content cause a flash?
I'm not certain, but you may be asking the browser to do a lot in a
:hover rule. When you change content, you are asking the browser to
recalculate the size of the contents, which impacts all elements
around it. You might want to try other ways to reduce the impact of
your change. I tried a couple of different ways to deal with this, and
found that changing the font size to 0 for the generated content seems
to have the same effect, but not impact the surrounding elements as
much:
html>body #sidebar-nav li.selected a:hover:before {
font-size: 0;
}
Since you only provided a portion of the code, I'm not sure if it will
be as effective when there is an entire page to generate, but perhaps
it is close enough.
The least impactful way only works if you have the generated content
after the contents instead of before. If you do that, you can simply
change the generated content's color to match the background color,
giving an illusion of removing the content even though it's still
there.
> Is this a known firefox bug?
Although I didn't see any specific bugs for this in Mozilla's bug
database (http://bugzilla.mozilla.org), there are several bugs having
to do with the performance and stability of :hover styles. For now, I
would try playing with other ways to reduce the flickering -- bug
fixes move at their own pace, not necessarily ours. :)
HTH,
Michael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I style generated content?
> On 23/09/05, [EMAIL PROTECTED] wrote:
>> Is it possible to style generated text?
>
>> a.left-arrow:before {
>>content: "< ";
> color: blue;
>>}
OK, I must have missed a typo earlier, I couldn't get that working, but it
is indeed making the generate "< " the color I want.
I also encountered a problem with the generated content on hover. I tried
to remove the "< " on hover, but I am seeing all of the other links flash
when I hovered over the link with the generarted content.
I cannot seem to figure out how to remove the "< " on hover without making
the rest of the links in my nav flash in Firefox? Here's what I am using:
html>body #sidebar-nav li.selected a:before {
content: "< ";
}
html>body #sidebar-nav li.selected a:hover:before {
content: ""; /*gets rid of < */
}
The above works - the "< " goes away on hover - but at the same time all
of the other links in the navigation now flash when I hover over the link
with the generated content? It appears that the other link's background
images and text color are switching to white for a split second?
Why would hovering over a link with generated content cause a flash?
Below is my HTML and CSS; I cannot currently post a link:
Page 1
Page 2
Page 3
Page 4
/* -- sidebar navigation CSS -- */
#sidebar-nav {
padding: 0;
margin: 0 0 1em 1px;
background-color: #e0efff;
color: #035ca0;
font-weight: bold;
}
#sidebar-nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#sidebar-nav li {
margin: 0;
display: inline;
}
#sidebar-nav li a {
display: block;
padding: 5px;
background: #d9e9fa url(nav_bg.gif) repeat-x bottom left;
color: #035ca0;
text-decoration: none;
border-bottom: 1px solid #90bade;
}
#sidebar-nav li.selected a {
background-color: #035ca0;
background-image: none;
color: #fff;
}
* html #sidebar-nav li a,
* html #sidebar-nav li.selected a {
height: 0.1em;
}
#sidebar-nav li a:hover,
#sidebar-nav li.selected a:hover {
background: #9ec6ef url(nav_bg_hover.gif) repeat-x bottom left;
color: #fff;
}
#sidebar-nav li.selected a:before {
content: "< ";
}
#sidebar-nav li.selected a:hover:before {
content: ""; /* removing this stosp the flashing? */
}
#sidebar-nav li.exit a:hover {
background: #9ec6ef url(nav_bgexit.gif) no-repeat bottom right;
color: #02954f;
}
Is this a known firefox bug?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I style generated content?
On 9/23/05, [EMAIL PROTECTED]
<[EMAIL PROTECTED]> wrote:
> Is it possible to style generated text?
>
> /* Example: CSS */
> a {
>font-family: arial;
>color: red;
>text-decoration: none;
>}
>
> a.left-arrow:before {
>content: "< ";
>}
You can style generated content in standards-compliant browsers to a
large extent. Firefox does not support positioning generated content,
but otherwise you can change its display style, its floating/clearing,
fonts, colors, backgrounds, box model elements, and so on.
One thing to keep in mind is that :before and :after generate their
content within the main element, so if you have a border around the
tag, the generated content appears within that border.
Have fun!
Michael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I style generated content?
On 23/09/05, [EMAIL PROTECTED]
<[EMAIL PROTECTED]> wrote:
> Is it possible to style generated text?
> a.left-arrow:before {
>content: "< ";
color: blue;
>}
--
David Dorward
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Can I style generated content?
Is it possible to style generated text?
/* Example: CSS */
a {
font-family: arial;
color: red;
text-decoration: none;
}
a.left-arrow:before {
content: "< ";
}
Go to this page
The link will appear in all red arial, like this:
< Go to this page
Is it possible to make the "< " appear in a different font or color? If
so, how would I make the "< " appear different on :hover?
I have never used generated content b/c IE doesn't support it, but I am
trying something new, so I though I'd ask.
Thanks,
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
