|
| |
|
|
yammez
Posts: 2
Joined: 4/25/2008
Status: offline
 |
Enlighten me on line-height please - 4/25/2008 17:34:54
This is the site: http://www.timeandgems.com/tempsite_abc/index.php
This is the CSS: http://www.timeandgems.com/tempsite_abc/includes/style10.css
The thing I'm trying to fix is the "tab" menu. I have changed the CSS line height of the spans to 100%. If you look at it in Firefox, the text in the tabs do not fit in the tab. In IE, the text does fit, and the line-height is affected like I told it to.
I've tried moving the line-height property to different places, like in the "menu" <div> and the "tab_" <a>'s. Neither work for Firefox or IE.
There must be a way to get that text to fit, line-height or not. Can anyone help?
|
|
|
|
jaybee
Posts: 13784
Joined: 10/7/2003
From: Berkshire, UK
Status: offline
|
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.
_____________________________
If it ain't broke..... fix it until it is.
GAWDS
Now where did I put that Doctype?
| |
|
|
|
yammez
Posts: 2
Joined: 4/25/2008
Status: offline
|
RE: Enlighten me on line-height please - 4/29/2008 11:40:40
Thanks for the help. It works to an extent, but it still doesn't solve the line-height issue. You method fits the text, but the space between the lines still seems large when viewed in Firefox.
The thing about setting the height is to give the tabs a discrete area in which to "move" down when moused over. If I don't specify the height, then when the padding is added to the tabs, everything below shifts down as well .
I'm going start the menu over from scratch and try some different methods of achieving the same effect. If the line-height doesn't work though, I might just have to use images for the text on the tabs. How lame!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
