CSS and HTML driving me nuts!

Dev Shed Forums Sponsor:

July 31st, 2001, 05:17 PM

Justas G

Contributing User

Join Date: Jun 2001

Location: Lithuania

Posts: 192

Time spent in forums: 58 m 53 sec
Reputation Power: 12

CSS and HTML driving me nuts!

Grrrr, css is such an easy thing and stuff, but it just won't work, it's so damn weird...
here's my css:

Code:

a { text-decoration: none; color: #000000; }

a:link { text-decoration: none; color: #999999; }

a:hover { text-decoration: underline; color: #999999; }

according to that file, all links should be colored in #999999 and not underlined, italic or bold. When you hover it, it underlines. the color is still the same, though.

BUT when I upload this:

Code:

<a href="<? echo"$PHP_SELF?function=unimog";?>"><font face="Verdana" size="1">UNIMOG</font></a>

and look at it, the text is black and when you go over the link, it gets #999999 and underlined, just as it should be, now why is it black and not #999999 when you are not over it?

AND when I make images as links, they get a fat big purple border as well...uhhh...it's so ugly. And I can't fix it, i just don't get what could be wrong...please help me

Last edited by Justas G : July 31st, 2001 at 05:20 PM.

July 31st, 2001, 05:31 PM

Captain Zig

Junior Member

Join Date: Jul 2001

Location: CT, USA

Posts: 7

Time spent in forums: < 1 sec
Reputation Power: 0

Give this a shot

Hi, Justas

Give this a shot it may work for you.

For the images as anchors make sure you specify border=0 in your img tag. That one has gotten me a number of times. I forget to define the border and I get that ugly purple border.

For the text link problem try placing your font tags outside of the anchor tag. When the browser sees the font tag inside the anchor tag it may decide to display the text in the pages default font color.

Hope that helps!

July 31st, 2001, 05:58 PM

Justas G

Contributing User

Join Date: Jun 2001

Location: Lithuania

Posts: 192

Time spent in forums: 58 m 53 sec
Reputation Power: 12

Thanks man

the images are fixed, but the text link still doesn't work...

Code:

<font color="#999999" face="Verdana" size="1"><a href="<? echo"$PHP_SELF?function=unimog";?>">UNIMOG</a></font>

Ás you can see the font tag is outside, but it still doesn't change

I even removed the whole font tag, but the link still was black and only changed the color when going over it...Got any more tips?

July 31st, 2001, 05:59 PM

szarecor

Contributing User

Join Date: Apr 2001

Location: New York

Posts: 122

Time spent in forums: < 1 sec
Reputation Power: 13

Justas:

I don't see any problem with your css when I cut and paste to a html doc and test. I did remove some of your whitespace though.

Just a small comment regarding the code snippet you included. Why are you mixing CSS and tags? There's really no reason to do it. I'm a professional developer and I haven't used a tag in a couple of years. Most of our clients specify that we don't use things like , , , etc. While they're still supported by most browsers, the are DEPRECATED - so I would suggest a 100% CSS approach to text styling.

Your css definition for <a> tags could be:

a {font-family:verdana;font-size:10pt;text-decoration:none;color:#000000;}

You can also define custom classes using the .classname syntax:

.cust_links {font-family:verdana;font-size:20pt;text-decoration:none;color:#000000;}
or
a.cust_links {font-family:verdana;font-size:20pt;text-decoration:none;color:#000000;}

And you can associate style definitions with the #elementid syntax

#custom_style {font-family:verdana;font-size:20pt;text-decoration:none;color:#000000;}

<a id="custom_style">...</a>

Just a suggestion.

Last edited by szarecor : July 31st, 2001 at 06:06 PM.

July 31st, 2001, 06:05 PM

Justas G

Contributing User

Join Date: Jun 2001

Location: Lithuania

Posts: 192

Time spent in forums: 58 m 53 sec
Reputation Power: 12

Yeah I know about this 100% way, but since I'm doing a very small site, I thought I'll just do a css for the links...btw, I just changed a. { color: #000000; } to #999999 and now the links are grey, lol, this doesn't make snese does it?

July 31st, 2001, 06:43 PM

Captain Zig

Junior Member

Join Date: Jul 2001

Location: CT, USA

Posts: 7

Time spent in forums: < 1 sec
Reputation Power: 0

Seems to work for me

Hi again.

I made a style sheet, and a quick test php page, and it seems to work for me. That is if I have this correct -- the link should always be grey, and underlined only upon mouseOver?

Here is the style sheet I used:

named test.css

a { text-decoration: none; color: #000000; }

a:link { text-decoration: none; color: #999999; }

a:hover { text-decoration: underline; color: #999999; }

Here is my test php script. Named linkTest.php3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="test.css">
</head>

<body>
Here is some text. 

Next comes a link: 

<a href="<? echo"$PHP_SELF?function=unimog";?>">UNIMOG</a>

</body>
</html>

Good luck!

August 1st, 2001, 03:40 AM

starvingartist

Junior Member

Join Date: Jul 2001

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

try taking out the

a { text-decoration: none; color: #000000; }

line, cuz a:link should take care of it.

August 1st, 2001, 05:09 AM

stardotstar

Contributing User

Join Date: Nov 2000

Posts: 63

Time spent in forums: < 1 sec
Reputation Power: 13

starvingartist is correct. The a style is overiding the a:link one which is why it appears black.

Here's something from the W3C:

Code:

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

August 1st, 2001, 01:36 PM

Justas G

Contributing User

Join Date: Jun 2001

Location: Lithuania

Posts: 192

Time spent in forums: 58 m 53 sec
Reputation Power: 12

Hey cool, it works now

I pasted and edited the W3C code and it works now, woohoo!

Thanks

CSS and HTML driving me nuts!

Developer Shed Advertisers and Affiliates