CSS - Table Cell Width

What am I doing wrong?

[wfernley]

I have a css file that contains

.mn_box_hdr_l {
width: 6px;
background-image: url(http://www.example.com/images/mn_box_hdr_r.gif);
}
.mn_box_hdr_r {
width: 6px;
background-image: url(http://www.example.com/images/mn_box_hdr_r.gif);
}

And I am calling it like this:

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="mn_box_hdr_l"></td>
<td background="http://www.example.com/images/mn_box_hdr_bg.gif">Title goes here</td>
<td class="mn_box_hdr_r"></td>
</tr>
</table>

For some reason, the left and right cells do not show up. I could just add a spacer.gif in those two cells which will solve the problem, but I want to do it all in CSS.

Can anyone explain why the cells don't show up? I am using FireFox to view the site. I think IE shows the cells but they repeat the image and the width is greater than 6px.

Can anyone help?

Thanks in advance for your help!

Wes

[bedlam]

There are two problems:

1. The left and right table cells have no content, so they won't expand to show their backgrounds,
   
2. You're using a table for something that is really very simple--something that can be done with any single block-level container in fact (or any single table cell for that matter).
   

CSS

.mn_box_hdr {
width:488px; /* The width of {(content area) - (left padding + right padding)}... */
background:transparent url(images/mn_box_hdr_bg.gif) no-repeat 0 0; /* The unsliced background image */
padding:0 6px; /* 6px each of space to the left and right of the content area... */ 
}

HTML

<h1 class="mn_box_hdr">Title goes here</h1>

There are a few things to notice about how I've altered your code:

• I've marked up the title text as what I would guess it is--a header. In other words, the html used actually attempts to describe its contents. Where possible, mark up text as what it is; if the text is then too big/bold/ugly etc, just use css to fix it.
  
• The code is far shorter than the original.
  
• There's usually no need to introduce extra markup--like the table cells to either side of the one containing the content--when all you need is a little 'breathing room' or space around the content. Use padding and/or margins for that purpose.
  

-b

PS-repeat after me: "There is absolutely no reason ever to use a spacer gif again as long as I live..."

[wfernley]

Hello,

Thank you for your reply.

The problem is each box is a different size. That is why I sliced the image. This means it has two fixed sized edges and the middle is a background image that repeats.

If I have an unsliced image it will look different for each box.

Do you have any suggestions?

Thanks again for your help!

[bedlam]

Ah. That was why I said 'usually' there's no need for extra markup. Have a look at the "sliding doors [google.com]" technique.

-b

[jessejump]

Add background-repeat: no-repeat for the backgrounds

You can put a non-breaking spce in the TDs instead of a GIF - &nbsp;

[wfernley]

Thank you for all your replies!

I was able to get it working by using the sliding-doors tutorial.

I found one issue though. Using padding-top: 5px in FireFox will pad the top and bottom.

Is there a fix for this or a workaround?

Thanks again!