Habari Xenu CSS "chrome" - element problem

Discussion in 'HTML' started by zara, Dec 27, 2007.

  1. zara

    zara Guest

    (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.
     
    zara, Dec 27, 2007
    #1
    1. Advertising

  2. zara

    rf Guest

    "zara" <> wrote in message
    news:...
    > (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.

    --
    Richard.
     
    rf, Dec 27, 2007
    #2
    1. Advertising

  3. zara

    Neredbojias Guest

    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".)

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Dec 27, 2007
    #3
  4. zara

    zara Guest

    zara, Dec 27, 2007
    #4
  5. zara

    dorayme Guest

    In article
    <
    >,

    zara <> wrote:

    > On Dec 27, 12:30 am, "rf" <> wrote:
    >
    > > Post the URL.
    > >
    > > --
    > > Richard.

    >
    > 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.

    --
    dorayme
     
    dorayme, Dec 27, 2007
    #5
  6. zara

    zara Guest

    On Dec 27, 12:44 am, Neredbojias <> wrote:
    > I dunno, you may simply need to change to:
    >
    > .hx-headline a:link {
    >
    > color: #000;
    > text-decoration: none;
    >
    > }
    >
    > (Notice the ":link".)
    >
    > --
    > Neredbojias
    > Riches are their own reward.


    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, Dec 27, 2007
    #6
  7. zara

    zara Guest

    On Dec 27, 12:54 am, dorayme <> wrote:
    > That is not what what was meant. A URL to a live webpage, this
    > way everyone can see everything including the css.
    >
    > --
    > dorayme


    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.
     
    zara, Dec 27, 2007
    #7
  8. zara

    dorayme Guest

    In article
    <
    m>,
    zara <> wrote:

    > On Dec 27, 12:54 am, dorayme <> wrote:
    > > That is not what what was meant. A URL to a live webpage, this
    > > way everyone can see everything including the css.
    > >
    > > --
    > > dorayme

    >
    > 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>

    --
    dorayme
     
    dorayme, Dec 27, 2007
    #8
  9. zara

    zara Guest

    On Dec 27, 1:27 am, dorayme <> wrote:

    > 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?
    >
    > --
    > dorayme


    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.
     
    zara, Dec 27, 2007
    #9
  10. zara

    dorayme Guest

    In article
    <
    m>,
    zara <> wrote:

    > On Dec 27, 1:27 am, dorayme <> wrote:
    >
    > > 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?
    > >
    > > --
    > > dorayme

    >
    > 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
     
    dorayme, Dec 27, 2007
    #10
  11. zara

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article
    > <
    > m>,
    > zara <> wrote:
    >
    > > On Dec 27, 1:27 am, dorayme <> wrote:
    > >


    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>².

    --
    dorayme
     
    dorayme, Dec 27, 2007
    #11
  12. zara

    zara Guest

    On Dec 27, 6:58 pm, dorayme <> wrote:
    > 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.
     
    zara, Dec 28, 2007
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. WindAndWaves

    css element within element....

    WindAndWaves, Feb 2, 2005, in forum: HTML
    Replies:
    29
    Views:
    944
    Leif K-Brooks
    Feb 3, 2005
  2. HANM
    Replies:
    2
    Views:
    734
    Joseph Kesselman
    Jan 29, 2008
  3. Simon Laub
    Replies:
    9
    Views:
    5,236
    GTalbot
    Sep 9, 2009
  4. Cal Who
    Replies:
    5
    Views:
    969
    Cal Who
    Apr 26, 2010
  5. Justin Ezequiel
    Replies:
    3
    Views:
    516
    Justin Ezequiel
    Sep 20, 2010
Loading...

Share This Page