Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with line-height and background-color

    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:
    Code:
    <div id="facebook">
         <a id="status" href="#">Alex is design- ing a website</a>
         <a href="#"><img src="img/fBlue.gif" /></a>
    </div>
    Code:
    #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; }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about increasing the line-height: .75em; value?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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 ...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •