• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Image inserted inside a cell not taking up full height

Contributor ,
Nov 12, 2018 Nov 12, 2018

Copy link to clipboard

Copied

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

Screen Shot 2018-11-12 at 1.49.05 PM.png

In Live mode

Screen Shot 2018-11-12 at 1.49.29 PM.png

Views

790

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 13, 2018 Nov 13, 2018

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>

Votes

Translate

Translate
LEGEND ,
Nov 12, 2018 Nov 12, 2018

Copy link to clipboard

Copied

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

img {

display: block;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 12, 2018 Nov 12, 2018

Copy link to clipboard

Copied

Try Osgood's suggestion or (a it safer)

img {vertical-align: bottom;}

Surprising that Dreamweaver does not do this automatically.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 12, 2018 Nov 12, 2018

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

If you are using a table, then Ben's reply is more on target. However, you should not be using tables for this... and especially a table coded with extremely outdated methods. In addition to default padding, height could be the issue. Height should NEVER be set.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

Osgood

Bingo. Removing the <span> </span> fixed the issue.

Thanks

Alan

ALsp

Tables is all I know. I'm still learning HTML and I know some of the things I use such as tables is better handled some other way, but it gets the job done.

Alan

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

We have just the tool to help you... if you recognize the need and make the investment. Then you can take your time learning, while having a tool that make any type of layout you can imagine - without tables.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

Thanks ALsp. I'm retired so I have the time. I'd love to see what's available.

Alan

BTW what does the code <span> </span> do?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

English100  wrote

BTW what does the code <span> </span> do?

Really you would use that in instances such as below:

.brown_text {

color: brown;

}

The quick <span class="brown_text'>brown</span> fox jumped over the lazy dog.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

Osgood answered your span query.

As for a page layout builder...

If you are retired than web design is probably not a money-maker for you so I would imagine you might not want to invest in a tool. But if you desire a quick track to a modern, mobile-friendly site, our Harmony Page Builder extends Dreamweaver to make it a page-layout superstar. There is a price, though. $125. If you're still interested, you can mouse over my name and go to my site to see what we make.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

LATEST

ALsp  wrote

If you are retired than web design is probably not a money-maker for you so I would imagine you might not want to invest in a tool. But if you desire a quick track to a modern, mobile-friendly site, our Harmony Page Builder extends Dreamweaver to make it a page-layout superstar. There is a price, though. $125. If you're still interested, you can mouse over my name and go to my site to see what we make.

Retired persons can invest heavily in their pastimes. If that's for building a personal website or maintaining an organisation website of which they are members................. perfect I think.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 13, 2018 Nov 13, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines