Welcome to WebmasterWorld Guest from 23.20.79.227

Forum Moderators: not2easy

Message Too Old, No Replies

css anchor class not working

hate css

     
9:03 pm on Mar 25, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2008
posts: 27
votes: 0


i cant understand it since i'm doing it exactly according to all the tutorials that are out there. seems simple enough ...

a.pricing:link {
float: right;
color: #990400;
text-decoration: none;
}


my HTML looks like:

<a class="pricing">$1,250</a>



I have also tried:

.pricing a {
float: right;
color: #990400;
text-decoration: none;
}


.. dont work

a.pricing {
float: right;
color: #990400;
text-decoration: none;
}


.. dont work

.pricing {
float: right;
color: #990400;
text-decoration: none;
}


.. dont work

i dont understand why this would be so difficult that i would waste an hour on it. can anyone please help
9:21 pm on Mar 25, 2010 (gmt 0)

Junior Member

joined:Dec 23, 2009
posts:52
votes: 0


Maybe:

.pricing a:link
9:38 pm on Mar 25, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2008
posts:27
votes: 0


thanks but nope. just tried it and not working.
10:08 pm on Mar 25, 2010 (gmt 0)

Junior Member

joined:Dec 23, 2009
posts:52
votes: 0


I don't know what you're trying to do though ;). Another suggestion - remove this part:

text-decoration: none;

because it overwrites anything you wrote above :).
10:23 pm on Mar 25, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:6903
votes: 378


You'll need to put your anchor in a div... you can float divs, not links...
10:46 pm on Mar 25, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2008
posts:27
votes: 0


well the thing is if i do all those attributes in an inline style (i.e. <a style=".... ) then it works. so i dont see there is anything wrong with those attributes. now the trouble is why dont they work when i put them in a class in the stylesheet?
11:12 pm on Mar 25, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


Your problem is that you are specifying :link, but you are using an anchor tag that is not a link (when you don't include the href attribute, it's not a link it's just an anchor). If you add in an href attribute, then the first example you posted will work.

Nobias, no, the text-decoration will not overwrite what was above it (text-decoration does not affect float or color settings).

tangor, you can float links. Floating an element will implicitly give it display: block properties.
11:30 pm on Mar 25, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2008
posts:27
votes: 0


wow, Fotiman, thank you so much. that makes perfect sense. i'll see how that affects things. is there any way to style an anchor without hyperlinking it?

the reason being if i put the text in a div then it creates a line break. but i need it to be on the same line as some preceding text, but float it to the right side of the page.

so i dont really need to link it. just didnt know how else to go about styling it without breaking the line it is on
11:38 pm on Mar 25, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2008
posts:27
votes: 0


ah it does not seem to be working even after i add the href= :(
8:46 am on Mar 26, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2002
posts:3195
votes: 12


have you tried

<p><a href="" class="pricing">$1,250</a> some text here which will be level with float</p>
8:46 am on Mar 26, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2002
posts:3195
votes: 12


dupe
9:31 am on Mar 26, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:6903
votes: 378


What browser are you using? IE 6 and 7 (and 8 in compatibility mode) have some issues with display:inline. I got it to work in FF3x and IE8
12:51 pm on Mar 26, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


Then you must have some other style rule in play that is overwriting it. Here is a test case that shows it working correctly:

<html>
<head>
<title>Test</title>
<style type="text/css">
a.pricing:link { float: right; color: #990400; text-decoration: none; }
</style>
</head>
<body>
<a href="#" class="pricing">$1000000</a>
</body>
</html>
1:27 pm on Mar 26, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2008
posts:27
votes: 0


thanks all. i'm just using the inline style for now. not sure what the issue is