troubleshooting Question

Why is this CSS code not working in a template

Avatar of cindysei
cindysei asked on
CSSHTMLAdobe Dreamweaver
20 Comments1 Solution453 ViewsLast Modified:
My colleague has asked me to put a button into a web page template. I want to put the button into an empty table column/row. The button appears in the template in the table column, but not on the pages the template applies to (even though it goes through the process of updating the pages in Dreamweaver). Also, for some reason, the font style is lost in button - it should be Arial but it's coming in as a Times or something. I'm a beginner web designer so all this is new to me. Here's the HTML code that I copied and pasted into my web page template table column:

<a class="small blue awesome" href="http://iris.ca/storelist.html">Schedule an eye exam</a>
Here's the CSS code that appears in the external style sheet that page links to:

/* New CSS Buttons */

.awesome, .awesome:visited {
      background: #222 url(/images/alert-overlay.png) repeat-x;
      display: inline-block;
      padding: 5px 10px 6px;
      color: #fff;
      text-decoration: none;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
      border-bottom: 1px solid rgba(0,0,0,0.25);
      position: relative;
      cursor: pointer;
}


.awesome:hover                                          
{ background-color: #111; color: #fff; text-decoration: none; }
.awesome:active                                          
      { top: 1px; text-decoration: none; color: #fff; }
.small.awesome, .small.awesome:visited                   
      { font-size: 11px; padding: color: #fff; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited             
      { font-size: 13px; color: #fff; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited                   
      { font-size: 14px; padding: 8px 14px 9px; color: #fff; }
      
.blue.awesome, .blue.awesome:visited            
      { background-color: #2daebf; color: #fff; }
.blue.awesome:hover                                          
      { background-color: #007d9a; color: #fff; }

Is there something else I have to add? Thanks, Cindy
ASKER CERTIFIED SOLUTION
Jason C. Levine
Don't talk to me.

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 20 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 20 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros