Table lowering image into none existent row

[kieferm9641142]

I create a 3 x 3 table in Dreamweaver and in design/html preview it looks fine but when I upload it to our site one of my images drops below the table. Anyone have guesses to why this is happening?

(the image below is supposed to all be parallel horizontally )

Code for reference

<table width="1159" height="577" border="0" align="center" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="662" height="577" rowspan="3"><img src="file:///P|/- MILLERS MARKETING & DIGITAL/CONTENT PLAN/Week 50 FY17/HOMEPAGES/BTF/NO PADDING/images/jackets-homepage-banner_03_01.jpg" width="662" height="577" alt=""/></td>

      <td width="15" height="577" rowspan="3"> </td>

      <td width="497" height="275"><img src="file:///P|/- MILLERS MARKETING & DIGITAL/CONTENT PLAN/Week 50 FY17/HOMEPAGES/BTF/NO PADDING/images/jackets-homepage-banner_03_02.jpg" width="497" height="275" alt=""/></td>

    </tr>

    <tr>

      <td width="497" height="27"></td>

    </tr>

    <tr>

      <td width="497" height="275"><img src="file:///P|/- MILLERS MARKETING & DIGITAL/CONTENT PLAN/Week 50 FY17/HOMEPAGES/BTF/NO PADDING/images/jackets-homepage-banner_03_02-03.jpg" width="497" height="275" alt=""/></td>

    </tr>

  </tbody>

</table>

[BenPleysier]

Please supply a link to the site.

[kieferm9641142]

I left it live on the bottom of the page so you could see.

http://www.millers.com.au/weekly-offers

[kieferm9641142]

Sorry Wrong link. Its on the New Zealnad site

http://www.millersfashion.co.nz/weekly-offers

[osgood_ · Accepted solution]

You have some kind of conflict going on with css. If you comment out the below css file the problem goes away. So its something in that file that is conflicting with the coding of your table holding the 3 images.

<!--<link rel="stylesheet" type="text/css" media="all" href="http://www.millersfashion.co.nz/combined.css?id=f8f41bf915c843a" />-->

Good luck with finding it amongst that lot.

Replace the table code you have now with the table code below, that should get you to where you want to be. (you will probably have to relink the images as you have some 'funny' coding '&#9;' in the links that the forum doesnt like plus get rid of the ' ' around the 2 instances of the non-breaking-space in the table code '$nbsp;' - the forum also doesnt like the posting of non-breaking-spaces. All in all for a web forum its kind of deficient when it comes to pasting code which is ironic really, laughable.

<table width="1159" border="0" align="center" clellpadding="0" cellspacing="0">

<tr>

<td><img src="http://www.millersfashion.co.nz/medias/jackets-homepage-banner-03-01.jpg/     /medias/jackets-homepa..." width="651" height="577" alt="" />

</td>

<td width="20">

'$nbsp;'

</td>

<td style="vertical-align: top;">

<!-- nest table -->

<table border="0" align="center" clellpadding="0" cellspacing="0">

<tr>

<td><img src="http://www.millersfashion.co.nz/medias/     /medias/jackets-homepage-banner-03-02.jpg?context=bWFzdG..." width="487" height="275" alt="" /></td>

</tr>

<tr>

<td height="20">'$nbsp;' </td>

</tr>

<tr>

<td><img src="http://www.millersfashion.co.nz/medias/     /medias/jackets-homepage-banner-03-02-03.jpg?context=bWF..." width="487" height="275" alt="" /></td>

</tr>

</table>

<!-- end nest table -->

</td>

</tr>

</table>

[kieferm9641142]

I really appreciate this Osgood, I was stumped for almost an entire day. Cheers.

[Teodor K]

You have some reset rules in the combined.css file. The vertical-align rule there affects all the table and td elements in your site.

Just remove it from there, it is not really required ....

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}