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 */
}