> 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:
<!-- START: sidebar navigation -->
<div id="sidebar-nav">
<ul id="navlist">
<li><a href="page1.html">Page 1</a></li>
<li class="selected"><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li class="exit"><a href="Page 4">Page 4</a></li>
</ul>
</div>
<!-- END: sidebar navigation -->
/* -- 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/
