SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Display:Block + Width:Auto

    Hi Guys,

    I am trying to simulate a button using CSS,

    I want the hyperlink to have padding on all 4 sides, but I want the block to only be as wide as the text plus the padding. I thought that width:inherit would work with display:block but it does not.

    Any Idea's?

    Code:
    a.button:link, a.button:visited { 
    		background-color:#ff9900;
    		color:#FFFFFF;
    		font-weight:bold;
    		border-left:2px solid #EFA96C;
    		border-top:2px solid #EFA96C;
    		border-right: 2px solid #AE5C13;
    		border-bottom:2px solid #AE5C13;
    		display:block;
    		font-size:1em; margin:5px;
    		text-decoration:none;
    		padding:10px 10px 10px 10px;
    		width:50px;
    		text-align:center;
    	}
    	a.button:hover {
    		text-decoration:underline;
    	}
    Code:
    <a href="#" class="button">Go</a>

  2. #2
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try:

    • Get rid of the width: 50px
    • change display to inline-block
    Chris Bloom
    Web Application Developer

  3. #3
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you really need to have them displayed as block elements, then consider putting them in a list:
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Test</title>
    		<style type="text/css" media="all">
    			a.button:link, a.button:visited { 
    				background-color: #f90;
    				color: #fff;
    				font-weight: bold;
    				border-left: 2px solid #efa96c;
    				border-top: 2px solid #efa96c;
    				border-right: 2px solid #ae5c13;
    				border-bottom: 2px solid #ae5c13;
    				font-size: 1em; 
    				margin: 5px;
    				text-decoration: none;
    				padding: 0.7em;
    			}
    			a.button:hover {
    				text-decoration: underline;
    			}
    			li {
    				height: 3em;
    			}
    		</style>
    	</head>
    	<body>
    		<p>Lorem</p>
    		<a href="#" class="button">Go</a>
    		<a href="#" class="button">Stop</a>
    		<p>Ipsum</p>
    		
    		<ul style="list-style: none; padding: 0; margin: 0">
    			<li><a href="#" class="button">Go</a></li>
    			<li><a href="#" class="button">Stop</a></li>
    		</ul>
    	</body>
    </html>
    Chris Bloom
    Web Application Developer

  4. #4
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi xangelusx, thanks for the responces ...

    I went with the inline-block solution except it does not work in IE5, is there a reaosn for this?

    Thanks

  5. #5
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off the top of my head, maybe inline-block isn't supported in IE 5. You can try just leaving the display attribute undeclared, which will make it the default "inline" and should achieve the same effect.
    Chris Bloom
    Web Application Developer


Bookmarks

Posting Permissions

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