Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1095 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

fixed width css buttons

Thread title: fixed width css buttons
     
    Thread tools Search this thread Display Modes  
Prev Previous Post   Next Post Next
08-06-2011, 06:11 PM
#1
polaris1 is offline polaris1
Status: I'm new around here
Join date: Jun 2011
Location:
Expertise:
Software:
 
Posts: 5
iTrader: 0 / 0%
 

polaris1 is on a distinguished road

  Old  fixed width css buttons

I've got a horizontal navigation menu styled with CSS buttons. I want each button to have uniform dimensions of 35px * 110px. I can set the height, but I cannot set the width! The browser seems to completely disregard anything to do with width and shrinks the element box down to the size of the text contained within. Any help would be greatly appreciated. Thank you.

Code:
<nav>
			<ul>
				<li><a href="#">Link1</a></li>
				<li><a href="#">Link2</a></li>
				<li><a href="#">Link3</a></li>
				<li><a href="#">Link4</a></li>
			</ul>
</nav>
CSS:

Code:
nav {
	
	margin-left:150px;
	}

nav li {
	list-style-type:none;
	display:inline;
	margin: 8px 6px 7px 0;
}

nav a {
        height:35px;
        width:110px;
	color:#ffffff;
	text-decoration:none;
	padding:11px 0px 12px;
	text-transform:uppercase;

/*CSS3 Button Normal Gradient--------------------*/
		background: url(images/button-normal.png) no-repeat; /* Old browsers */
		background: -moz-linear-gradient(top, #04ca9e 0%, #03ae84 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#04ca9e), color-stop(100%,#03ae84)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #04ca9e 0%,#03ae84 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #04ca9e 0%,#03ae84 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #04ca9e 0%,#03ae84 100%); /* IE10+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04ca9e', endColorstr='#03ae84',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #04ca9e 0%, #03ae84 100%); /* W3C */

/*CSS3 Rounded Corners---------------------------*/
	-moz-border-radius: 5px;
	border-radius: 5px;
}

nav a:hover{
	/*CSS3 Button Depressed Gradient-----------------*/
		background: url(images/button-pressed.png) no-repeat; /* Old browsers */
		background: -moz-linear-gradient(top, #04c49c 0%, #03af8d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#04c49c), color-stop(100%,#03af8d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #04c49c 0%,#03af8d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #04c49c 0%,#03af8d 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #04c49c 0%,#03af8d 100%); /* IE10+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04c49c', endColorstr='#03af8d',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #04c49c 0%,#03af8d 100%); /* W3C */
	
		}

     


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed