Apply Background Color only on text

[angelazou]

I’m changing the background of my headers, but there is this width problem that I’ve never met. For all the times that I’ve worked with CSS, I apply the background color and it only covers the part where there are text over. But this time, when I apply a background cover, it fills the entire row. I have no idea what to do now. The following is the CSS code for it:
h1, h2, h3, h4, h5, h6 {
margin: 4px 12px;
padding: 2px;
width: 115px;
line-height: 1.1em;
height: 1.2em;
color: #fff;
background: #0686c9;
}

I have included the text shadow and gradient code because it’s kind of long. Please let me know if you need any further information.

Angela

[chrisburton]

Edit: Remove the height from your css

[Senff]

Isn’t it just because the header elements have a specific width of 115 pixels, so the background color would be applied to the entire element?

[chrisburton]

Maybe I’m confused on what @angelazou is having trouble with. I’m not really understanding what they’re trying to do.

[Mottie]

Maybe that headers are filling the entire row? Did you try adding a display:block; in your css?

[joshuanhibbert]

@cnwtx That will cause issues in IE7, I would just float them left. Unless of course IE7 support isn’t needed?

[joshuanhibbert]

Yeah it will. Floating automatically wraps the element at the width of the content. Here is an example: http://jsfiddle.net/sl1dr/3xUd7/

[joshuanhibbert]

@angelazou To answer your question specifically, remove the fixed width and add float: left; and clear: left;, as shown in this example: http://jsfiddle.net/sl1dr/3xUd7/2/

[angelazou]

Me too, especially when the customer only uses IE. I saw something interesting with IE9. I have ‘height:’ on because I needed to apply some text show in IE9. But one minute it was there, and the next refresh it’s gone. I have no idea what’s going on.

I visited the jsFiddle link provided, I will try and see if there is any difference. What I’m saying that when I try to apply a background color (it fills the entire row). I had to limit it to 115px so it doesn’t go over an entire row. But this is not a solution, because when I go to pages with post title (that are like 1 or 2 lines long), they are all stuck together because I limit the width to 115px.

Thanks
Angela

[joshuanhibbert]

Can you post a link to the issue? There must be something else overriding your styles.

[angelazou]

Well, I used float:left and only part of the problem is solved. Because I used float:left, all the elements follow after the header. I tried clear: left and clear:both, none of them works.

PS: I’m doing a local installation. But I can get you a screenshot and the content of the CSS if you’d like.

[Sam_Purcell]

Add display: table; to your headers.

[angelazou]

This is the full code, I tried various combination of display (including table), but none of it really works.

h1, h2, h3, h4, h5, h6 {

margin: 4px 12px;

padding: 2px 4px;

float: left;

display: block;

clear: both;

line-height: 1.1em;

height: auto;

filter: dropshadow(color=#666, offx=-1, offy=-1);

color: #FFF;

background: #0686C9;

text-shadow: -1px -1px 1px #666;

background: rgb(30,87,153);

background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));

background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);

background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); 	background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);

background: linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

-webkit-border-radius: 2px;

-webkit-border-top-right-radius: 8px;

-webkit-border-bottom-left-radius: 8px;

-moz-border-radius: 2px;

-moz-border-radius-topright: 8px;

-moz-border-radius-bottomleft: 8px;

border-radius: 2px;

border-top-right-radius: 8px;

border-bottom-left-radius: 8px;

}

see a screenshot here

[joshuanhibbert]

I’m not entirely sure what is wrong in the screenshot? Just that the rounded corners aren’t showing up?

[angelazou]

No, but aren’t you seeing that all the content are coming after the title (instead of below the title)? That’s the problem.

[Author]

Posts