Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Background color on text, maintain left padding on line wrap

Background color on text, maintain left padding on line wrap

Problem

I am attempting to create a style that applies a Background Color to header text. This is simple enough by including an inline element within my header, but problems arise when there is a line wrap because the Left Padding is only applied to the first line of text. To solve this issue I am applying a left-border to my header tags, which properly maintains left padding during line wraps. However, I'm having serious issues matching the left-border height with the inline element background across browsers. I get it matched up in Chrome/Safari, and it's off in Firefox, etc. I've created a fiddle to demonstrate:

http://jsfiddle.net/spidercoder/4KJn2/1/

My approach is:

HTML:

Lorem ipsum dolor sit amet consectetur adipiscing elit.

CSS:

h1{
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 34px;
line-height: 44px;
border-left: 10px solid black;
padding: 8px 0 7px 0;} // This tweaks the height of the left-border

h1 span{
white-space: pre-wrap;
background: black;
padding: 10px 10px 10px 0;}

I've attempted several different approaches, but unfortunately nothing is working. This seems like a fairly simple effect to pull off, but I have been unable to properly match the height of the border with the span background across browsers, which ruins the effect.

Does anyone have any ideas on how to pull this off so it works across browsers? An approach that doesn't require the left-border would probably be best, so that we don't have to match element heights.

Thanks for any suggestions!

Problem courtesy of: idealboy

Solution

Add to the span:

box-shadow: 10px 0 0 black, -10px 0 0 black;

Or Just:

box-shadow: -10px 0 0 black;

Used this myself after finding it here:

http://css-tricks.com/multi-line-padded-text/

There are many other methods by which this can be done listed there.

Solution courtesy of: JackArbiter

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Background color on text, maintain left padding on line wrap

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×