SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS button help

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS button help

    Hi,

    I've after some help with the below CSS code for a button with mouseover effect.

    CSS:
    Code:
    <style type="text/css">
    <!--
    a.button {
    	font-weight: bold;
    	font-size: 14px;
    	font-family: Arial, Helvetica, sans-serif, Verdana;
    	font-style:italic;
    	padding: 2px 8px;
    	border-top: 2px solid #ffffff;
    	border-right: 2px solid #cccccc;
    	border-bottom: 2px solid #cccccc;
    	border-left: 2px solid #ffffff;
    	text-align: center;
    
    	width: 65px;
    	height: 17px;
    	display: block;
    	margin-right: auto;
    	margin-left: auto;
    }
    a.button:link { 
    	background-color: #ffffff; 
    	color: #000000;
    	text-decoration: none;
    	}
    a.button:visited {
    	background-color: #ffffff; 
    	color: #000000;
    	text-decoration: none;
    	}
    a.button:hover { 
    	background-color: #ffffff; 
    	color: #cccccc;
    	text-decoration: none;
    	}
    a.button:active { 
    	background-color: #ffffff; 
    	color: #000000; 
    	text-decoration: none;
    	}
    -->
    </style>
    HTML:
    Code:
    <a href="#" class="button">Home</a>
    Basically, the code works fine unless the text size is changed in the browser then the text size increases but the size of the button doesn't with it.

    Is there any way to make the button size increase with the text size? If not then maybe just keep the size it is (em, yes probably not accessible).

    As always any help appreciated!

    Thanks.
    Last edited by zsasz24; Dec 30, 2004 at 17:43. Reason: posted in wrong forum (doh!)

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Specify the size of the button using ems. For example:
    Code:
     a.button {
       	[...]
       	padding: 0.15em 0.5em;
      	[...]
       	width: 4.6em;
       	height: 1.2em;
       	[...]
      }
    I'd leave the border-width in pixels, though - rounding errors can lead to some really funky weirdness when you use small fractions of ems. It's not usually too much of a problem with padding/margins, but it can look terrible when applied to borders.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent!

    Thank you for your help!

  4. #4
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As requested, moved to the CSS forum.
    Former Design Your Site Team Leader

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    I'm still working with the above code but I've come across another problem when viewing in the Firefox browser.

    For:

    Code:
    <a href="illustration.htm" class="button">Illustration</a>
    the 'n' character in illustration touches the right hand side border of the button. I've tried increasing the width of the button, but this is not reflected in Firefox or Safari but is in IE.

    I've experimented with increasing the width and also the min-width (using ems) but no luck.

    Any ideas please?

    Code:
    a.button {
    	font-weight: bold;
    	font-size: 14px;
    	font-family: Arial, Helvetica, sans-serif, Verdana;
    	font-style:italic;
    	padding: 0.15em 0.5em;
    	border-top: 2px solid #ffffff;
    	border-right: 2px solid #cccccc;
    	border-bottom: 2px solid #cccccc;
    	border-left: 2px solid #ffffff;
    	text-align: center;
    	min-width: 65px;
    	width: 4.6em;
    	height: 1.2em;
    	display: block;
    	margin-right: auto;
    	margin-left: auto;
    }
    a.button:link { 
    	background-color: #ffffff; 
    	color: #000000;
    	text-decoration: none;
    	}
    a.button:visited {
    	background-color: #ffffff; 
    	color: #000000;
    	text-decoration: none;
    	}
    a.button:hover { 
    	background-color: #ffffff; 
    	color: #cccccc;
    	text-decoration: none;
    	}
    a.button:active { 
    	background-color: #ffffff; 
    	color: #000000; 
    	text-decoration: none;
    	}
    Hope I'm making sense!

    Thanks

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see anything obvious.

    Can you give us a link to the page?

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not live yet mate but here's the rest of the style code (guess I should've posted earlier!):

    Code:
    	#bodyframe {
    	padding-right: 0px;
    	margin-top: 10px;
    	padding-left: 0px;
    	padding-bottom: 0px;
    	margin-left: auto;
    	width: 750px;
    	margin-right: auto;
    	padding-top: 0px;
    	text-align: left
    	}
    	
    	.bodytext {
    	padding-right: 5px;
    	margin-top: 5px;
    	padding-left: 5px;
    	font-weight: bold;
    	font-size: 80%;
    	padding-bottom: 0px;
    	vertical-align: text-top;
    	line-height: normal;
    	padding-top: 0px;
    	font-family: arial, helvetica, sans-serif;
    	text-align: justify
    	}
    	
    	.imgpad {
    	padding-right: 5px;
    	padding-left: 5px;
    	padding-bottom: 0px;
    	vertical-align: text-top;
    	padding-top: 0px
    	}
    	
    	p {
    	margin-top: 5px;
    	margin-bottom: 5px
    	}
    	
    	.bodytextcopy {
    	padding-right: 5px;
    	margin-top: 5px;
    	padding-left: 5px;
    	font-weight: bold;
    	font-size: 70%;
    	padding-bottom: 0px;
    	vertical-align: text-top;
    	line-height: normal;
    	padding-top: 0px;
    	font-family: arial, helvetica, sans-serif;
    	text-align: justify
    	}
    	
    	h2 {
    	padding-left: 15px;
    	font-size: 16px;
    	background-image: url(/blankbar.gif);
    	color: #ffffff;
    	background-repeat: no-repeat;
    	font-style: italic;
    	font-family: arial
    	}
    	
    	a.button {
    	border-right: #cccccc 2px solid;
    	padding-right: 0.5em;
    	border-top: #ffffff 2px solid;
    	display: block;
    	padding-left: 0.5em;
    	font-weight: bold;
    	font-size: 14px;
    	padding-bottom: 0.15em;
    	margin-left: auto;
    	border-left: #ffffff 2px solid;
    	width: 4.6em;
    	margin-right: auto;
    	padding-top: 0.15em;
    	border-bottom: #cccccc 2px solid;
    	font-style: italic;
    	font-family: arial, helvetica, sans-serif, verdana;
    	height: 1.2em;
    	text-align: center;
    	min-width: 65px
    	}
    	
    	a.button:link {
    	color: #000000;
    	background-color: #ffffff;
    	text-decoration: none
    	}
    	
    	a.button:visited {
    	color: #000000;
    	background-color: #ffffff;
    	text-decoration: none
    	}
    	
    	a.button:hover {
    	color: #cccccc;
    	background-color: #ffffff;
    	text-decoration: none
    	}
    	
    	a.button:active {
    	color: #000000;
    	background-color: #ffffff;
    	text-decoration: none
    	}
    	
    	h1 {
    	padding-right: 0px;
    	padding-left: 0px;
    	font-size: 100%;
    	padding-bottom: 0px;
    	margin: 0px;
    	padding-top: 0px;
    	font-style: italic;
    	font-family: "arial narrow";
    	text-align: center
    	}
    Thanks for looking!

  8. #8
    SitePoint Enthusiast MstrBob's Avatar
    Join Date
    Dec 2004
    Location
    New York City
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting the width of a.button so that it is:

    width: 5.6em;

    Should work.

  9. #9
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We're probably going to need the HTML around the links (i.e. a group of links, and the containing element) at least. Also, are you running in standards mode, or quirks mode?

    (Firefox->right click->page info->general->render mode)

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, thanks for the replies.

    MstrBob, that fixed the problem! I had tried something similar to that but I think I may have been changing the min-width as well.

    blufive, firefox is running in Standards compliance mode.

    The HTML was:

    Code:
    <div id="bodyframe">
    
    <table width="750" border="0" cellspacing="0" cellpadding="3">
      <tr>
        <td><a href="index.htm"><img src="logo.gif" width="232" height="58" border="0"></a></td>
        <td><a href="index.htm" class="button">Home</a></td>
        <td><a href="illustration.htm" class="button">Illustration</a></td>
        <td><a href="cartoons.htm" class="button">Cartoons</a></td>	
        <td><a href="contact.htm" class="button">Contact</a></td>
      </tr>
    </table>
    
    </div>
    Thanks for the help guys and a happy new year!!


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
  •