PDA

View Full Version : a:link help



rfresh
Jan 18th, 2009, 11:38 PM
I have the a:link code below:



#button_shipping a:link {
color: #0000FF;
}


I want to add a #button_cancel object to this also but I can't seem to get the syntax right to make it work.


#button_shipping, #button_shipping a:link
does not work.

abduraooft
Jan 19th, 2009, 08:03 AM
I want to add a #button_cancel object to this also but I can't seem to get the syntax right to make it work.
Shouldn't that be

#button_shipping a:link,#button_cancel {
color: #0000FF;
} then?

rfresh
Jan 19th, 2009, 04:46 PM
Apparently not as that syntax doesn't work for #button_cancel.

abduraooft
Jan 19th, 2009, 04:48 PM
Apparently not as that syntax doesn't work for #button_cancel.Post a link to your page or the complete html+CSS.

rfresh
Jan 19th, 2009, 09:09 PM
You can see when you run this code that hovering over the Cancel button does not turn the font Red like when you hover over the Submit button.

This is the line in question: #button_shipping_submit a:hover, #button_shipping_cancel {



<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Text</title>
<style type="text/css">
#button_shipping_submit {
color: Black;
float: left;
padding: 4px;
margin: 2px;
width: 45px;
background-color: #C3C3C3;
text-decoration: none;
border-top: 1px solid #C0FFFF;
border-left: 1px solid #C0FFFF;
border-right: 1px solid #0000FF;
border-bottom: 1px solid #0000FF;
}
#button_shipping_cancel {
color: Black;
float: left;
padding: 4px;
margin: 2px;
width: 154px;
background-color: #C3C3C3;
border-top: 1px solid #C0FFFF;
border-left: 1px solid #C0FFFF;
border-right: 1px solid #0000FF;
border-bottom: 1px solid #0000FF;
}




#button_shipping_submit a:link {
color: #000000;
text-decoration: none;
}
#button_shipping_submit a:visited {
color: #000000;
text-decoration: none;
}
#button_shipping_submit a:hover, #button_shipping_cancel {
color: #FF0000;
text-decoration: none;
}
#button_shipping_submit a:active {
color: #000000;
text-decoration: none;
}




#button_shipping_cancel a:link {
color: #000000;
text-decoration: none;
}
#button_shipping_cancel a:visited {
color: #000000;
text-decoration: none;
}
#button_shipping_cancel a:active {
color: #000000;
text-decoration: none;
}
</style>
</head>




<body>
<div ID="radio_shipping_border">
<div ID="button_shipping_submit"><A HREF="">Submit</A></div>
<div ID="button_shipping_cancel"><A HREF="">Cancel</A></div>
</div>
</body>
</html>

Excavator
Jan 19th, 2009, 09:23 PM
Lets shorten that up a bit and include the cancel button in all the a styling like you did with the submit button.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Text</title>
<style type="text/css">
#button_shipping_submit {
width: 45px;
}
#button_shipping_cancel {
width: 154px;
}
#button_shipping_cancel, #button_shipping_submit {
float: left;
padding: 4px;
margin: 2px;
background: #C3C3C3;
text-decoration: none;
border: 1px solid #C0FFFF;
}
#button_shipping_submit a:link, #button_shipping_cancel a:link,
#button_shipping_submit a:visited, #button_shipping_cancel a:visited,
#button_shipping_submit a:active, #button_shipping_cancel a:active {
color: #000000;
text-decoration: none;
}
#button_shipping_submit a:hover, #button_shipping_cancel a:hover {
color: #FF0000;
}
</style>
</head>
<body>
<div id="radio_shipping_border">
<div id="button_shipping_submit"><a href="">Submit</a></div>
<div id="button_shipping_cancel"><a href="">Cancel</a></div>
</div>
</body>
</html>__________________
RalphS


Then check both yours and mine in the validator. XHTML doesn't let you use caps.

rfresh
Jan 20th, 2009, 01:20 AM
Great! That worked.

Thank you...