Habari Xenu CSS "chrome" - element problem

[zara]

(See http://habarixenu.mozdev.org for info on HX. It's an RSS reader.)

I've customized this addon to look exactly the way I'd like, but can't
seem to get the "content:after" pseudo-element to work for visited
links. Aware of CSS "heritability" (elements must be presented in a
certain logical order, or else the whole thing falls apart like a
house of cards), I'll post the entire file (~150 lines, including
comments) if requested. Until then, here's a relevant chunk:

******* CODE FOLLOWS *******

..hx-headline {

border-bottom: 1px solid #ddd !important;
color: #000 !important;
display: block !important;
font-family: Trebuchet MS, arial, verdana, sans-serif !important;
font-size: 20px !important;
font-weight: normal !important;
min-height: 1.3em !important;
padding: 14px 0 0 0 !important;
}

..hx-headline a {

color: #000;
text-decoration: none;
}

..hx-headline a:visited:after { content: " (finished)"; }

******* END CODE *******

For what it's worth, even the ".hx-headline a" doesn't have any effect
either (tried changing the color to red -- #f00 -- but that didn't
work. I adapted this code from "Mozilla" at sage.mozdev.org.
Everything works perfectly, exactly the look I want, except for this
one thing.

By the way, I use (Mozilla) Seamonkey, not Firefox, so Sage won't work
for me.

 

[rf]

(See http://habarixenu.mozdev.org for info on HX. It's an RSS reader.)

house of cards), I'll post the entire file (~150 lines, including
comments) if requested. Until then, here's a relevant chunk:

Post the URL.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Thu, 27 Dec 2007 04:50:38
GMT zara scribed:

I've customized this addon to look exactly the way I'd like, but can't
seem to get the "content:after" pseudo-element to work for visited
links. Aware of CSS "heritability" (elements must be presented in a
certain logical order, or else the whole thing falls apart like a
house of cards), I'll post the entire file (~150 lines, including
comments) if requested. Until then, here's a relevant chunk:

******* CODE FOLLOWS *******

.hx-headline {

border-bottom: 1px solid #ddd !important;
color: #000 !important;
display: block !important;
font-family: Trebuchet MS, arial, verdana, sans-serif !important;
font-size: 20px !important;
font-weight: normal !important;
min-height: 1.3em !important;
padding: 14px 0 0 0 !important;
}

.hx-headline a {

color: #000;
text-decoration: none;
}

.hx-headline a:visited:after { content: " (finished)"; }

******* END CODE *******

For what it's worth, even the ".hx-headline a" doesn't have any effect
either (tried changing the color to red -- #f00 -- but that didn't
work. I adapted this code from "Mozilla" at sage.mozdev.org.
Everything works perfectly, exactly the look I want, except for this
one thing.

By the way, I use (Mozilla) Seamonkey, not Firefox, so Sage won't work
for me.

I dunno, you may simply need to change to:

..hx-headline a:link {

color: #000;
text-decoration: none;
}

(Notice the ":link".)

 

[zara]

Post the URL.

http://www.jeffntina.com/habarixenucustom1.css

Thanks in advance --

 

[dorayme]

<[email protected]

,

http://www.jeffntina.com/habarixenucustom1.css

Thanks in advance --

That is not what what was meant. A URL to a live webpage, this
way everyone can see everything including the css.

 

[zara]

I dunno, you may simply need to change to:

.hx-headline a:link {

color: #000;
text-decoration: none;

}

(Notice the ":link".)

Thought about that, and I did try it, but no luck. Very strange.

I also tried adding "div.hx-headline" etc., and then ":visited:after",
"a:visited:after", and so on, and every imaginable combination
thereof, in a desperate attempt to stumble into the light switch in
the dark.

Grrrrr ...

I'd guess that this pseudo-element isn't compatible with my browser
(Seamonkey 1.1.4), except that when I go to sage.mozdev.org/styles and
click on the "Mozilla" style, visit one of the links, return and
reload, *bang*, it works there. Go figure ...

 

[zara]

That is not what what was meant. A URL to a live webpage, this
way everyone can see everything including the css.

Right. Unfortunately, Habari Xenu is a Mozilla/Firefox extension,
customizable via CSS. I'd embed it into my personal web page (a la
"Sage" at mozdev) if I knew how, but ... alas.

 

[dorayme]

<[email protected]
m>,

Right. Unfortunately, Habari Xenu is a Mozilla/Firefox extension,
customizable via CSS. I'd embed it into my personal web page (a la
"Sage" at mozdev) if I knew how, but ... alas.

Perhaps I am not concentrating? Are you saying you do not know
how to upload a test case html doc up to a public server so that
you can ask how to get some feature that is not working and can
be seen not to be working working? I can help you. But I am not
going off on a wild goose chase if this is not what you are
saying. <g>

 

[zara]

Are you saying you do not know
how to upload a test case html doc up to a public server so that
you can ask how to get some feature that is not working and can
be seen not to be working working?

Here ya go ...

http://jeffntina.com/hx-test.htm

Now, if I get rid of the anchor, and just leave it as:

..hx-headline:after {

color: #f00 !important;
content: " (visited)" !important;
font-size: 12px;
}

it works. Squeeze in "a:visited" and it breaks.

 

[dorayme]

<[email protected]
m>,

Here ya go ...

http://jeffntina.com/hx-test.htm

Now, if I get rid of the anchor, and just leave it as:

.hx-headline:after {

color: #f00 !important;
content: " (visited)" !important;
font-size: 12px;
}

it works. Squeeze in "a:visited" and it breaks.

Gosh, I think that is the first stylesheet I have ever seen where
everything is so !important.

I know that if you uncomment your:

..hx-headline:hover {
color: #EF7314 !important;
text-decoration: underline !important;
}

the hover effect then works in both my Safari and FF but not
otherwise. But I cannot penetrate your css for now, sorry.

 

[dorayme]

<[email protected]
m>,

I meant to add that if you must use XHTML, I would have thought
that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

would be what you would have at top.

You have:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

I think this confuses the validators, maybe your browser too?

You need to look into these errors too:

Document type doesn't permit attribute ³target² within element
³<a>².
Document type doesn't permit attribute ³clear² within element
³<br>².

 

[zara]

You have:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

I think this confuses the validators, maybe your browser too?

You need to look into these errors too:

Document type doesn't permit attribute ³target² within element
³<a>².
Document type doesn't permit attribute ³clear² within element
³<br>².

You asked me to dummy up a page to look like what's shown in Habari
Xenu, so I did that. I have a habit of writing everything in XHTML,
but Habari Xenu doesn't even have so much as a <doctype> declaration.
When you view the source of the right-hand (content) frame, the first
thing you see is this:

<HTML><HEAD>
<TITLE>Reason Magazine - Hit & Run</TITLE>
<link rel='stylesheet' type='text/css' href='chrome://habarixenu/skin/
display.css'>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=utf-8'>
<BASE HREF='http://www.reason.com/blog'>
</HEAD>
<BODY onload='return false;'>
<div class='hx-header'>

etc.

The target="_blank" is generated by HX, as is the br clear="all" (I
don't even know what that's supposed to do).

By the way, I agree with you that not everything's as !important as
the original author of that stylesheet seemed to feel, so yeah, I'll
probably delete most of that.