h2 on top of background image?

My h2 creates a whole other line beneath it!

[paulpsd]

I've got a <td> that contains a background image, a horizontal rule. I've defined this style this way:

td.columnHead {
background-image: url(grafix/content/content_guide_top.gif);
height: 19px;
width: 229px;
}

Now I've defined h2 this way:

h2 {
font-family: Impact, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #6A283E;
font-weight: normal;
background-color: #EBEBE0;
padding-right: 8px;
}

Now here's the HTML:

<td class="columnHead"><h2>REQUIRED READING</h2></td>

My intention is to have the table cell show the text against a plain background (as specified in the h2 style). Then, starting 8 pixels to the right of where this text ends, I want to see the background image.

What happens is that the background image is completetly obscured on the h2 line. Then a new line in the <td> is created, and there I see my background image. This is in spite of the height of this <td>, which I've set at 19px.

[piskie]

I think the width and height are not required for a background image.
Their presence may cause a problem with some browsers.

[paulpsd]

Thanks for the reply.

I tried taking off the height and width from the <td> style, but all that happened was the width of the <td> expanded wider. The height, and the 2-line background image problem, stayed the same.

[piskie]

I am going to bed now (2 am UK) will look further in the morning.

[Josh_F]

Might be easier to use CSS positioning than a table cell. This will give you precise control over the margins, padding, background, etc. I've run into table cell border differences among various browsers. Also, check your doctype. This can make a difference in how various browsers render CSS, may apply to tables too.

<div class="reqreading"><h2>REQUIRED READING</h2></div>

.reqreading {
position: absolute;
top: ...;
left: ...;
}

Or put Div inside the TD and position relatively.

[paulpsd]

Unfortunately, there's a problem using absolute positioning. I can't omit things from the document flow at this point in the layout.

My doc type is 4.01 Transitional.

[createErrorMsg]

What happens is that the background image is completetly obscured on the h2 line.

<hx> tags are block level elements, which means they fill their containers horizontally. Therefor, the background on the <h2>, which stretches the full width of the table cell, is covering up the background image on the <td>.

To avoid this, you need to somehow shrink the <h2> so that it does not fill the full width of the cell. I can think of three options. The third one is best.

(a) Put the background image on the <h2> and position it to the left of the header text (difficult since it's impossible to reliably know the width of the text).

(b) Place a right margin on the <h2> to push it's right edge away from the right edge of the table cell (also difficult, since , again, you can't know how far to push it over to get 8px between header text and image.

(c) Leave the image as background for the cell, float the <h2> to the left and give it a right margin of 8px.

I recommend option (c). Here's the code...

td.columnhead h2{
float:left;
margin-right:8px;
}

It would be much better if you could give the <h2> a width, as well. Non-widthed, floated elements tend to trigger display bugs in IE, but in this case you really can't. If adding this causes some crazy things to happen on your page (like if mousing over links causes whole portions of the page to vanish), you may need to add a hack to bring IE into line.

Also note that anything which follows the float will have to be given a clear:left.

A final note: if you want the 8px between the header text and the image to have the header's background color, use padding-right instead of margin-right.

cEM

[paulpsd]

I've found the workaround. It's a bit inelegant, and it means doing away with the h2 style. In general, I've always found that the "h" styles (h1, h2, etc) are pretty difficult to work with. They seem to include extra vertical space where a normal style would not. Maybe that's due to my own lack of understanding, but I can't understand why anybody would use these styles.

Anyhow, here's my solution:

========================
CSS

.columnHead {
font-family: Impact, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #6A283E;
font-weight: normal;
background-color: #EBEBE0;
padding-right: 8px;
padding: 0px;
}

td.columnHead {
background-image: url(grafix/content/content_guide_top.gif);
height: 19px;
width: 229px;
}

========================
HTML

<td class="columnHead"><span class="columnHead">REQUIRED READING<img src="../grafix/misc/spacer.gif" width="8"></span></td>

By applying "columnHead" to the <td>, I get the background image. By using <span> for REQUIRED READING, I get the background color to cover over the background image for the extent of the text. Then, my inelegant way of creating 8px of space at the end of the text before the background image appears, I stuck in a spacer.gif.

If anyone can suggest a more elegant approach, I'm all ears. Also, I'd be interested to hear if anyone else has had the same problems as me with the "h" styles.

[bedlam]

Hi,

If I understand the first post correctly, all you should need to do is switch the 'padding-right:8px;' in the <h2> to 'margin-right:8px;'.

Remember that, according to the w3c box model [google.ca], the order of features of a containing element is (from the inside out):

1. Content
   
2. Padding
   
3. Borders
   
4. Margins
   

...and also that background images do not extend past borders - in other words, margins don't get background properties...

-B

[edit]
We posted at the same time :)

In general, I've always found that the "h" styles (h1, h2, etc) are pretty difficult to work with. They seem to include extra vertical space where a normal style would not. Maybe that's due to my own lack of understanding, but I can't understand why anybody would use these styles.

Forgive me for saying so, but it's probably 'cause you don't understand their properties fully. The 'hx' elements are styled by default with a big bottom margin. If the margin causes problems for you, just alter or delete it.

Try a test stylesheet for the page you're working on (or some other), and put this in the stylesheet:

* {
padding:0;
margin:0;
}

This sets all elements' padding and margins to zero. If you do this, you will have to explicitly declare padding and margin values on elements that need them (typically a set of something like hx, ol, ul, p, form, th, td, address etc...), but you will also find that you have a lot more control over the way the elements display.
[/edit]

[createErrorMsg]

They seem to include extra vertical space where a normal style would not.

That vertical space is a margin and it is part of the normal style for header tags. As bedlam says, you can style it away if you wish.

Using a <span> tag will work, but a <span> tag is meaningless. It holds no information about what it contains and gives no indication of the purpose served by the text inside of it.

I can't understand why anybody would use these styles.

For semantic correctness and a logical document structure. Header tags are for marking up header text; i.e., text that informs a reader that a new topic is about to be discussed and what that new topic will be.

all you should need to do is switch the 'padding-right:8px;' in the <h2> to 'margin-right:8px;'.

bedlam, I believe this will reveal only the 8px of the background image that are farthest right in the cell. As a block element, the <h2> currently spans the entire <td>. Adding an 8px margin will push it that many pixels away from the edge, but this will not necessarily leave only 8px between the text and the background image.

cEM

[bedlam]

You're right - I didn't read this crucial bit:

8 pixels to the right of where this text ends

...

-B

[paulpsd]

Given the special issue about the background image, I think I'll go with the solution I've found. Unless somebody can think of a way to achieve the same result in a different way. Thanks for your help!

[createErrorMsg]

Post number 7. The floating method described there ought to create the same effect you get, only without using a meaningless <span> and a spacer gif.
cEM