[RESOLVED] [HTML/CSS] Images in table row

Basically, what I need is a table row/cell to make up a heading using images.

I have 4 images per heading. One for the background, that can be repeated. One for the left edge that should sit OVER the background image. One for the title itself that should also be positioned over the background. And one for the right edge. The whole thing should have 100% width.

This:

Code:

---

td align=top height=23 width="100%" style="background-image: url(xxxxxxxx);">
<img src="xxxxx" style="left: 0px; top: 0px;" />
<img src="xxxxx" style="top: 5px; left: 29px;"/>
<img src="xxxxx" style="right: 0px; top: 0px; "/>
</td>

---

Does not work. The background appears, but the whole cell has a 1 px border around it, plus it is too tall. The images are all exactly 23 px tall but the cell renders at 27px tall. The background image appears to be UNDER the border, so that the bottom of it is 1 px above the bottom of the other two images.

Plus, my 4th image is not right-aligned. I suspect this is due to my rather large lack of knowledge of CSS. It's a little hard to describe as I am unable to post a picture of it.

Any ideas on how to fix?

You need to set the border width to 0px to make it transparent. Also I suspect that your table's Cellpadding and cellspacing are not set to 0px either thus rendering the row height taller then your 23px's. ;)

have you tried setting the cellspacing and cellpadding properties of the table to zero? and of course having border property as 0?

well i hope i understood it correct :D

oops sorry RB didn't see your post there ;) I type really slow :cry:

Its ok. :)

Who's RB? RhinoBull? :D

borders and frames were off.

Setting cellpadding and cellspacing to 0 got rid of the border.

Now it is still 2/3 pixels taller than the images. I have made the height value smaller and it makes no difference.

Also, the right image is not right-aligned :)

I noticed that your placing the middle pix 5 px below the others. Could this be causing the extra height? Try placing it at zero just for the fun of it.

Quote:

---

Originally Posted by RobDog888

I noticed that your placing the middle pix 5 px below the others. Could this be causing the extra height? Try placing it at zero just for the fun of it.

---

Altering the "top" value seems to make no difference. It was 5 becaues the middle image was a smaller one, but then I made them all the same height and forgot to fix it. Still too tall though.

Quote:

---

Originally Posted by RobDog888

Its ok. :)

Who's RB? RhinoBull? :D

---

OOOOPSS sorry RDDDD

Without seeing its effects its hard to try to come up with anything else. I also hate HTML thats why I dont really do too many website projects.

Firstly you need to get rid of all that alignment rubbish from the HTML and do this:

HTML Code:

---

<td class="col">
<img class="img1" src="xxxxx" style="left: 0px; top: 0px;" />
<img class="img2" src="xxxxx" style="top: 5px; left: 29px;"/>
<img class="img3" src="xxxxx" style="right: 0px; top: 0px; "/>
<div class="clear"></div>
</td>

---

In the header part of your HTML inside style tags, have this:

Code:

---

.col {
  background-image: url(xxxxxxxx);
  border: 0px;
  padding: 0px;
}

.col .img1 {
  float: left;
}

.col .img1 {
  float: center;
}

.col .img2 {
  float: right;
}

.col .clear {
  clear: both;
  visibility: hidden;
}

---

Remember also the <tr> element will have a padding too, so you might need to remove that. Let us know if that works - if not I will have a go at replicating my end, if you supply me with a blank image of the appropriate size ;)

Its Super Amoeba to the rescue, AKA: VisualAd :thumb:

I have to use the rubbish, because my HTML code is inserted within the document. I don't have access to the header.

I can upload blank coloured images of the size I've been using if you want, give me a sec.

Use the style attribute then. ;)

Right it's almost there, but now it's going on to two lines for some reason.

i.e. the background picture is repeating twice (vertically), and the right-hand picture (the one with float:right;) is on the second line. Apart from that it's fine.

Here's my current cell code.

Code:

---

<td style="background-image: url(xxxxxxxxxx); border: 0px; padding: 0px;">
<img src="xxxx" style="float: left;" />
<img src="xxxx" />
<img src="xxxx" style="float: right;" />
</td>

---

If I remove style="float: right;" from the last image, then it goes onto one line, but the row is a few pixels too tall. And obviously the image is in the wrong place. If the attribute is present, then the row is double height and the image on the bottom half of the row. Adding "top: 0px;" makes no difference.

I'm really confused :(

Put the middle image last, like i've done here:

http://adam.codedv.com/test.html

OMG, as if that makes the difference. Stupid HTML :rolleyes:

Thanks Adam, and Rob and Oceane :)

Does that mean you solved it or gave up? :P

Putting the middle image last made it work, it looks great :)