Before and After Pseudo Elements

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Before and After Pseudo Elements

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> Before and After Pseudo Elements

Page: [1]


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	Before and After Pseudo Elements - 9/19/2005 9:48:20 Has anybody ever got these to work? If so, which browser and how? _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype?


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 10:18:48 think i played with them in firefox but didn't really need them anyway more info here http://www.w3.org/TR/CSS21/page.html#propdef-page-break-before _____________________________ David Prescott Gekko web design (in reply to jaybee)


Tailslide Posts: 6032 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 10:40:09 I don't believe IE recognises them so I've never really bothered much - along with all the other cool stuff in CSS2 that there's no point in playing with until a certain large software corporation gets its arse in gear. Only time I use them is in Fat Erik's breadcrumb menu : http://css.maxdesign.com.au/listamatic/horizontal33.htm Which uses the before psuedo class and has a border effect so that IE plays nice. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to d a v e)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 10:45:30 Yes, I read the w3c stuff but I'm trying to use a sound file and nada, nix, zip. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)


caz Posts: 3520 Joined: 10/10/2001 From: Somewhere south of Chester, UK Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 10:59:08 I have used them for the float clearing method described here, http://www.csscreator.com/attributes/containedfloat.php Of course IE encloses floats (wrongly) anyway, but the righteous browsers get it. _____________________________ Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard. Cheshire cat. www.doracat.co.uk I remember when it took less than 4hrs to fly across the Atlantic. (in reply to Tailslide)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 11:04:34 quote: a sound file and nada, nix, zip that's where you're going wrong then. 'nada' isn't supported by IE, 'nix' is too old and zip.. well zip is zip :) _____________________________ David Prescott Gekko web design (in reply to caz)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 14:06:23 Oh ha ha. Thought I'd try and be clever with putting sound on the page rather than EMBED etc or JS. Huh. Well that was a waste of time. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to d a v e)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 14:10:52 oh you mean for an audio stylesheet?? like http://www.w3.org/TR/CSS21/aural.html#propdef-pause-before or http://www.w3.org/TR/CSS21/aural.html#propdef-cue-before ?? nope never tried that... _____________________________ David Prescott Gekko web design (in reply to jaybee)


womble Posts: 5526 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 16:31:09 quote: 'nix' is too old I do hope Nicole doesn't hear you calling her old - she's liable to come round and slap you! _____________________________ ~~ "A cruel god ain't no god at all" ~~ (in reply to d a v e)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 16:35:14 No, not an audio stylesheet just sound on the page. You can apparently (according to w3c) do a before or after on a tag and have the url as a sound file. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to womble)


Nicole Posts: 2830 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 17:24:03 Don't worry Womble, I'd only come around and slap someone if they were a slaphead! _____________________________ (in reply to womble)


womble Posts: 5526 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 17:46:22 _____________________________ ~~ "A cruel god ain't no god at all" ~~ (in reply to Nicole)

coreybryant

Posts: 2422
Joined: 3/17/2002
From: Castle Rock CO USA
Status: offline

RE: Before and After Pseudo Elements - 9/19/2005 17:55:06

I ahve been able to get the to work properly. One code I am using:

div.nav a:link, div.nav a:visited 
{
     color: #330099;
     font-size: 0.8em;
}
div.nav a:hover, div.nav a:active
{
     color: #990000;
     text-decoration: none;
}

with a DOCTYPE of

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

seems to work fine on my site. There is a pretty good thread here about it as well (even though it did go off topic a bit) :)

_____________________________

Corey R. Bryant
Merchant Accounts | Toll Free Numbers | My Blog | Expression Web Blog

(in reply to womble)


caz Posts: 3520 Joined: 10/10/2001 From: Somewhere south of Chester, UK Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 18:03:54 quote: ORIGINAL: Nicoleoz Don't worry Womble, I'd only come around and slap someone if they were a slaphead! Would that be a pseudo class of :after < Message edited by caz -- 9/19/2005 20:01:21 > _____________________________ Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard. Cheshire cat. www.doracat.co.uk I remember when it took less than 4hrs to fly across the Atlantic. (in reply to Nicole)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 18:24:13 Crumbs Corey, you had me worried there for a minute. It's not pseudo classes in general I'm having trouble with, I use them all the time, it's the specific pseudo classes :before and :after. W3c example of what I'm trying to do.... quote: CSS2 - The :before Pseudo-element The ":before" pseudo-element can be used to insert some content before an element. The style below will play a sound before each occurrence of a header one element. h1:before { content: url(beep.wav) } CSS2 - The :after Pseudo-element The ":after" pseudo-element can be used to insert some content after an element. The style below will play a sound after each occurrence of a header one element. h1:after { content: url(beep.wav) } But it won't work. I don't get any errors but I don't get any sound either. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to caz)


coreybryant Posts: 2422 Joined: 3/17/2002 From: Castle Rock CO USA Status: offline	RE: Before and After Pseudo Elements - 9/19/2005 18:55:00 Ah sorry, I read that but it did not compute - until now. I can ask the guys and gals over there at IWDN to see if they have any suggestions though if you would like. (Or you can :)) - I bother them all the time for those types of questions _____________________________ Corey R. Bryant Merchant Accounts \| Toll Free Numbers \| My Blog \| Expression Web Blog (in reply to jaybee)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/20/2005 4:11:59 Thanks Corey. I had a quick hunt around the w3c lists and I think maybe I'm trying to do something it was never meant to do. I have a sneaking suspicion that the sound is only rendered if you are using aural stylesheets. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to coreybryant)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Before and After Pseudo Elements - 9/20/2005 10:46:23 ah like this quote: oh you mean for an audio stylesheet?? ok i called it audio... check out this side bar for firefox - (well bookmark it and it will display in the sidebar, i think! http://people.opera.com/rijk/panels/css2.1-online/prop-visual.html _____________________________ David Prescott Gekko web design (in reply to jaybee)


coreybryant Posts: 2422 Joined: 3/17/2002 From: Castle Rock CO USA Status: offline	RE: Before and After Pseudo Elements - 9/20/2005 10:58:51 We actually had this conversation over there at IWDN a few weeks ago actually (memory is coming back :) ). Generated Content is where they have to be used. If I am remembering correctly, it is something close to Automatic counters and numbering and Opera provided a little support but that was it. _____________________________ Corey R. Bryant Merchant Accounts \| Toll Free Numbers \| My Blog \| Expression Web Blog (in reply to d a v e)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/20/2005 11:02:05 quote: oh you mean for an audio stylesheet?? Yes, no, I mean..... I thought it was nothing to do with that to begin with. It's not in the Aural bit in W3C so I figured it was standalone. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to coreybryant)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/20/2005 11:05:17 quote: Generated Content is where they have to be used. Oh well, forget that then. Rats. I've got a game done in css and html. No flash, no java, no js. Loads like lightening and brill for little kids hitting the client's site but....... They want it to make a helicopter noise when the kids hover the mouse over the helicopter. So I got all excited about a:before {url(helicopter.wav)} Oh well, never mind. Out comes the javascript. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


jaybee Posts: 14152 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Before and After Pseudo Elements - 9/20/2005 11:20:37 Ahhhh, the plot unthickens! Seems the :before { url() does work but only if you happen to be using Netscape Navigator 6.0 or 7.0. Well that's handy then _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)