www.webdeveloper.com
Results 1 to 6 of 6

Thread: Don't have shadows on div in link..

  1. #1
    Join Date
    Nov 2008
    Posts
    116

    Don't have shadows on div in link..

    So I have something like this for all links making them look like little buttons of sorts.

    Code:
    a:link {
    	color:#FFFFFF;
    	text-decoration: none;
    	
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;	
    	border-radius: 5px;
    	
    	padding:1px 5px;
    	font-weight:bold;
    	
    	-moz-box-shadow: 2px 2px 3px #080808;
    	-webkit-box-shadow: 2px 2px 3px #080808;
    	box-shadow: 2px 2px 3px #080808;
    }
    I also have similar css for buttons that I define and use as a class for div or span tags. Those buttons of course have links so they are getting both the code above and the code for the button.

    How do I get around that?

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    create .CLASS?

    Why don't you create a .CLASS for the special effects (or a couple of classes, one for each effect). Remember you can apply multiple space-separated classes to one element <div id="main" class="button shadow">...</div>.

    Or better, "contextually" style links for specific sections
    Code:
    #nav a:link { 	-moz-border-radius: 5px; 	-webkit-border-radius: 5px;  border-radius: 5px;  
                    	-moz-box-shadow: 2px 2px 3px #080808; 	-webkit-box-shadow: 2px 2px 3px #080808; box-shadow: 2px 2px 3px #080808;
    }
    Of course, I'm assuming that's what you want. There are also options such as "adjacent sibling" and "attributes" to create very specific style rules.
    Last edited by auntnini; 07-11-2012 at 04:44 PM. Reason: copy code

  3. #3
    Join Date
    Nov 2008
    Posts
    116
    Hmm, interesting, I will give this some thought and break it up differently.

  4. #4
    Join Date
    Nov 2008
    Posts
    116
    Here is my problem, this is an old site that is all HTML that has 200+ pages. Changing tags in the HTML isn't an option at this point.

    Does any one see any way of doing this. As it is now any properties that I apply to a:link are showing up on any button that I have. I just want to be able to style text links and not links that are a button.

    Button looks something like below and is styled to have a drop shadow and round corners.

    Code:
    <a Href=""><span class="button">Push Me</span></a>

  5. #5
    Join Date
    Nov 2008
    Posts
    116
    I find this odd behaviour so maybe some one can shed some light on it.

    The drop shadows that are being applied in the a selector are adding a drop shadow that is the height of the text but wider then the button. So I get this second drop shadow sticking out the ends of the buttons.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    CSS 3 does not work in all browsers. Be sure you are using a compatible browser for viewing the CSS 3 effects.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles