Welcome to WebmasterWorld Guest from 54.146.240.181

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)

5+ Year Member



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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

5+ Year Member



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

topr8

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

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



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)

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



dupe

tangor

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

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



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)

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



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)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month