Skip to main content
E
English100
Inspiring
November 12, 2018
Answered

Image inserted inside a cell not taking up full height

  • November 12, 2018
  • 4 replies
  • 1203 views

I have an issue with an inserted image inside a cell not taking up the full height. If you look at the first screenshot taken in Design mode, the image appears to fill the whole cell. But the second screenshot taken in Live mode, the image doesn't fill the cell height-wise. If in Design mode I try to drag the image's handle down, all it does is increase the height of the cell. It seems as if there is maybe a piece of code that is preventing the image to fully fill the cell and I'm not code savvy enough to figure it out. Can anyone please help me?

Thanks

Alan

In Design mode

In Live mode

This topic has been closed for replies.
Correct answer osgood_

Okay, I put both of these in my stylesheet:

img {

display: block;

}

img {vertical-align: bottom;}

But neither worked.

This is the code for the top row of the table. Please let me know if it's correct. You will notice that the image height is the same as the cell height, yet it still shows up as shorter.

Thanks

Alan

<body>

<table width="86%" height="834" border="0" cellpadding="0">

  <tbody>

    <tr>

      <td width="12%" height="130"><span class="styletitle"><img src="http://www.mywebsite.org/main_image_small.png" alt="" width="176" height="130" title="Small Image"/></span></td>

      <td colspan="2" bgcolor="#B9E181" style="text-align: left"><p class="styleheader">                     </p></td>

    </tr>

    <tr>

      <td height="48" colspan="3"> </td>

    </tr>


What does the <span></span> tag do around the image? try removing that and keeping - img {display: block;}

<span class="styletitle"><img src="http://www.mywebsite.org/main_image_small.png" alt="" width="176" height="130" title="Small Image"/></span>

4 replies

P
Paul-M
Legend
November 13, 2018

Have you tried setting the image as a background, then use CSS?:

background-image: url("yourimage.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;

I

Paul-M - Community Expert
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
November 13, 2018

I think what you need is to remove the cell padding. This can be done by adding a bit of styling to the cell.

Try

<td style="padding: 0;">

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
E
English100Author
Inspiring
November 13, 2018

Osgood

Yes, I'm using my style sheet. I'll try your suggestion.

Ben

I already have cellpadding set to zero.

ALsp

Thanks for that tip. Let me try it.

I appreciate the help. I'll report back

Thanks

Alan

E
English100Author
Inspiring
November 13, 2018

Okay, I put both of these in my stylesheet:

img {

display: block;

}

img {vertical-align: bottom;}

But neither worked.

This is the code for the top row of the table. Please let me know if it's correct. You will notice that the image height is the same as the cell height, yet it still shows up as shorter.

Thanks

Alan

<body>

<table width="86%" height="834" border="0" cellpadding="0">

  <tbody>

    <tr>

      <td width="12%" height="130"><span class="styletitle"><img src="http://www.mywebsite.org/main_image_small.png" alt="" width="176" height="130" title="Small Image"/></span></td>

      <td colspan="2" bgcolor="#B9E181" style="text-align: left"><p class="styleheader">                     </p></td>

    </tr>

    <tr>

      <td height="48" colspan="3"> </td>

    </tr>

ALsp
ALsp
Legend
November 12, 2018

Try Osgood's suggestion or (a it safer)

img {vertical-align: bottom;}

Surprising that Dreamweaver does not do this automatically.

O
osgood_
Legend
November 12, 2018

Are you using css to style your page, you should be....... add the css selector below:

img {

display: block;

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices