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.
display:block won't do any difference, since the H1-H6 tags already are block-level elements by default, plus they have a fixed width.
I'm also a little confused what he is having trouble with to be honest...!
But here's my guess....
If the H1-H6 elements need to have a background color on the text only, don't give it a specific width of 115px, cause then the color will be applied over that full width. However if there's no width declared, it will be applied to the entire row, so you'll have to use float:left;.
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.
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.
If it's too complex to give us the whole context of the site, then maybe you can try wrapping each H1-H6 element in a div.
Give H1-H6 a float:left; but NO width (and preferably no height either) Give the div that's wrapping the H1-H6 element a specific width (whatever you want to set as the maximum, in your case 115px) and the background color you want.
But that means I have to search the entire theme for every instance coming after the header. Is there a shortcut? Perhaps a clear:right; for the headers? [Nope, clear: right; didn't work]
Thanks for the tip, but unfortunately again, it only solves part of the problem. I am seeing some improvement, but not all of them. I'm using the following:
h1 + p, h2 + p, h1 + a, h2 + a, h1 + div, h2 + div { clear: left; }
But the code that I previously gave (for the Date too close thread) doesn't really apply even though it's immediately followed by a div. Is there a wildcard I can use? (And hopefully, it works with IE9, right?)
The wildcard selector (*) would cause you to have problems with other floats in your design, such as the date bit. The other option, as @Senff said, is to wrap every header in a div.
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
display:block;in your css?display:blockwon't do any difference, since the H1-H6 tags already are block-level elements by default, plus they have a fixed width.I'm also a little confused what he is having trouble with to be honest...!
But here's my guess....
If the H1-H6 elements need to have a background color on the text only, don't give it a specific width of 115px, cause then the color will be applied over that full width. However if there's no width declared, it will be applied to the entire row, so you'll have to use
float:left;.display:inline-block;in your css for the headers.float: left;andclear: left;, as shown in this example: http://jsfiddle.net/sl1dr/3xUd7/2/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
PS: I'm doing a local installation. But I can get you a screenshot and the content of the CSS if you'd like.
Give H1-H6 a
float:left;but NO width (and preferably no height either)Give the div that's wrapping the H1-H6 element a specific width (whatever you want to set as the maximum, in your case 115px) and the background color you want.
http://jsfiddle.net/hzpqu/
(I've set the maximum width to 150 though, just to make it more clear)
If there are more lines though, the background color will expand to the longest line, and not go line-by-line.
see a screenshot here
You need to give the first item below the header (the one that is currently to the right)
clear: left;h1 + p {Shown here: http://jsfiddle.net/sl1dr/Fxja2/clear: left;
}
But the code that I previously gave (for the Date too close thread) doesn't really apply even though it's immediately followed by a div. Is there a wildcard I can use? (And hopefully, it works with IE9, right?)
Initially, I used the following
Didn't work, then I tried this
Didn't work either. Here is a sample text widget content
h3 + .textwidget {clear: left;
}