View Full Version : Problem with line-height and background-color

11-08-2008, 05:03 AM
Hey guys, so I'm trying to get a big heading kind of text to get a specific look to it, but it's proving to be a bit annoying. Here are some pictures to show what I mean.

Here's a mockup I've made:

And here's what my current code is doing:

I've tried using the overflow: hidden command, but I guess since it's a single block of text it doesn't realise it's overlapping like that.

I could always just leave the line-height alone, or set the background to the entire div, but I really wanted that chunky kind of look to it.

Here's my code:

<div id="facebook">
<a id="status" href="#">Alex is design- ing a website</a>
<a href="#"><img src="img/fBlue.gif" /></a>

#facebook {
right: 0px;
position: absolute;
max-width: 500px;
width: 35%;
text-align: right;
margin: 42px 0;
float: right;
overflow: hidden;

#facebook #status {
font-size: 4em;
line-height: .75em;
color: #FFF;
padding: 0;
margin: 0;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;

#blog #facebook #status { background: #bce8ff; }

11-08-2008, 06:43 AM
How about increasing the line-height: .75em; value?

11-08-2008, 06:54 AM
Yeah, that's the problem. I want to have the lines close together, but when I alter the line-height to do that, the background colour overlaps the line above. I want the background colour to be the same height as the letters, not to extend above and below.

11-09-2008, 04:52 PM
Since you are using text, the outcome will vary with the user's browser even if you find a suitable font, which is unlikely as the "highlighting" will always be larger than the text. Only solution I see: Use Photoshop where you can adjust the text and background and create an image ...