|
jaybee -> RE: Enlighten me on line-height please (4/25/2008 20:16:42)
|
The problem is, different browsers, different machines, different OS, different visitors who may have the text size in their browser increased or decreased means you can't get it the same.
I'm currently looking at it in Firefox on the Mac and it all fits.
Line-Height just increases the gap between the rows.
But you have several problems, the main one being you're specifying a height which doesn't allow anything to expand and your fonts are pt which is why they're getting stuck.
div#menu /* This div has the actual tabs */
{
margin: 0px;
padding: 0px 0px 0px 10px;
width: 800px;
overflow: hidden;
position:relative;
background-image: url('../images/bg_beige.png');
background-repeat: repeat-y;
}
div#menu a {font: 10px Trebuchet MS, Helvetica, sans-serif; color: #FFF; text-decoration: none; }
div#menu a:visited {font: 10px Trebuchet MS, Helvetica, sans-serif; color: #FFF; text-decoration: none;}
div#menu a:hover {font: 10px Trebuchet MS, Helvetica, sans-serif; color: #FFF; text-decoration: none;}
Try that and you'll see the difference. You'll need to play around with the font size a bit as 10px is pretty small. Don't forget to change the hover state as well.
|
|
|
|
