css anchor class not working

Forum Moderators: not2easy

Message Too Old, No Replies

css anchor class not working

hate css

Shipintern

9:03 pm on Mar 25, 2010 (gmt 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

Nobias

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

Maybe:

.pricing a:link

Shipintern

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

thanks but nope. just tried it and not working.

Nobias

10:08 pm on Mar 25, 2010 (gmt 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 :).

tangor

10:23 pm on Mar 25, 2010 (gmt 0)

You'll need to put your anchor in a div... you can float divs, not links...

Shipintern

10:46 pm on Mar 25, 2010 (gmt 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?

Fotiman

11:12 pm on Mar 25, 2010 (gmt 0)

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.

Shipintern

11:30 pm on Mar 25, 2010 (gmt 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

Shipintern

11:38 pm on Mar 25, 2010 (gmt 0)

ah it does not seem to be working even after i add the href= :(

topr8

8:46 am on Mar 26, 2010 (gmt 0)

have you tried

<p><a href="" class="pricing">$1,250</a> some text here which will be level with float</p>

topr8

8:46 am on Mar 26, 2010 (gmt 0)

dupe

tangor

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

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

Fotiman

12:51 pm on Mar 26, 2010 (gmt 0)

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>

Shipintern

1:27 pm on Mar 26, 2010 (gmt 0)

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