Background and image alignment ???

[randelld]

Hello Guys.
I have a problem that has been a pain for me over and over, and I hope that someone can give me advice on how to overcome it.
Ok, an example.
I have a table with 3 columns and 1 row.
Left middle and right

in left I have an image, leftcorner.gif, in right I have rightimage.gif but as it is expandable and the title text goes in the middle I have the middle image set as background image. When viewed through the browser all three images do not line up correctly.
Does anyone know how I can overcome this??
you can see it here www.yeclaserve.com/exchange

[just-trying-to-help]

Hi randelld,

I took a quick look but seeing as all the tables are collapsed, I cannot check it with dreamweaver. I'm sure someone else here will be able to help you soon. A popular answer to this question though, is to make sure all the pictures and tables are aligned the same.

On another note, you may want to think about importing a css sheet for this site as all the code is currently in your header.

Good Luck

[dharrison]

Hi randell

I have gone through your code and you have a few valign attributes in your table coding. Using the Jumila row as an example:

<td valign=middle background=skins/sunburst/images/cat_top_bg.gif border=0><p align=center><font face='Verdana' size='1' color='#6633cc'>Jumilla</font></p></td>

I would say remove the valign attributes from the <td></td> tags. It might also be worth declaring an absolute height on the <td></td> tags, for example:

<td height="30px" background=skins/sunburst/images/cat_top_bg.gif border=0><p align=center><font face='Verdana' size='1' color='#6633cc'>Jumilla</font></p></td>

HTH

[randelld]

Thanks guys.
The script is a mixture of php and html. This makes it more difficult for me to understand. However, I'll go through it tomorrow and see if I can apply what you've suggested.

Thanks again.

[iwebgeek]

Step 1: Convert site to CSS/XHTML

Step 2: Come back and ask again. :)

[craigmn3]

I did a quick copy and paste, and your images are huge, and you have resized them. Perhaps if you resize them, then post you might have more luck

[DrTandem1]

There are a lot of problems with the page given. Clean up the HTML errors. Lots of open tags, misplaced tags, incorrect nestings, etc. I noticed you have a height attribute for the table tag. There is no height attribute for a table, only width.

Adding padding to the cells will cause problems, if it is not uniformly done.

Now, onto your main question regarding the alignment. I believe the issue here is caused by the font size expanding the height of the table cell. In other words, your font height is exceeding the image's height. You are using font tags and with all the CSS stuff you have, I don't know why.

Speaking of the CSS, move it all into an external style sheet. Do the same with the JavaScript. Then straighten out the head section.

After that, gives us another look.

[DrTandem1]

Also, the background image dimensions does not match the corner images dimensions:

http://www.yeclaserve.com/exchange/s...cat_top_bg.gif

http://www.yeclaserve.com/exchange/s...t_top_left.gif

While both images appear to have a height of 14 pixels, if you look at the properties of cat_top_left.gif on the page itself you see this:

Dimensions: 132 x 15

From where is this extra pixel coming? I believe it is caused by the fact that you neglected to enter the image's height dimension in the image tag and the image is expanding to fit the cell. Try adding height="14" and see how it looks. I think the cell is expanding to meet the taller cell in the middle. It is taller due to the font. Don't forget to set the valign="top" for the cells.

[MarkGatESS]

If you're using Adobe Photoshop and have ImageReady, try bringing in your "image bar" there and use the slice tool to divide it into the three parts. Then, save the image slices and HTML code (using the Output Settings, let ImageReady make the table). Also, when you make the slices, try making the two ends cut short (such as only as big as the rounded edge) and leave the center image most of the length. I'm just thinking that so if it misaligns again, it'll only be a tiny bit on the ends.

When you get the HTML page with the table formatted, try switching ALL the images to backgrounds and make the middle cell fluid so it will expand & contract as the browser window moves (which I'm sure you already know how to do.) I've always had images align properly when I leave the ImageReady exported code alone (for the most part.)

Maybe that might help. :)

[drummin]

Something to ponder...

<style type="text/css">
.titleback {background: url('http://www.yeclaserve.com/exchange/skins/sunburst/images/cat_top_bg.gif'); padding:0; margin:0; height:14px; text-align:center; line-height:14px; font-family:verdana; font-size:10px; color:#6633cc; font-weight:bold;}
.titleleft {background: url('http://www.yeclaserve.com/exchange/skins/sunburst/images/cat_top_left.gif'); padding:0; margin:0; width:127px; height:14px;}
.titleright {background: url('http://www.yeclaserve.com/exchange/skins/sunburst/images/cat_top_right.gif'); padding:0; margin:0; width:127px; height:14px;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="98%" align="center">
<tr><td class="titleleft"></td>
<td height="14px" class="titleback">Welcome</td>
<td class="titleright"></td>
</tr></table>