Highlighted

Image inserted inside a cell not taking up full height

Contributor ,
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

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>

TOPICS
Learn Dreamweaver

Views

641

Likes

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

Image inserted inside a cell not taking up full height

Contributor ,
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

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>

TOPICS
Learn Dreamweaver

Views

642

Likes

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
Nov 12, 2018 0
LEGEND ,
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;

}

Likes

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
Reply
Loading...
Nov 12, 2018 0
Mentor ,
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.

Likes

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
Reply
Loading...
Nov 12, 2018 0
Adobe Community Professional ,
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;">


Ben

Likes

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
Reply
Loading...
Nov 12, 2018 0
Contributor ,
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

Likes

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
Reply
Loading...
Nov 13, 2018 0
Contributor ,
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>

Likes

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
Reply
Loading...
Nov 13, 2018 0
Mentor ,
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.

Likes

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
Reply
Loading...
Nov 13, 2018 1
LEGEND ,
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>

Likes

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
Reply
Loading...
Nov 13, 2018 0
Contributor ,
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

Likes

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
Reply
Loading...
Nov 13, 2018 0
Mentor ,
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.

Likes

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
Reply
Loading...
Nov 13, 2018 0
Contributor ,
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?

Likes

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
Reply
Loading...
Nov 13, 2018 0
LEGEND ,
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.

Likes

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
Reply
Loading...
Nov 13, 2018 0
Mentor ,
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.

Likes

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
Reply
Loading...
Nov 13, 2018 0
osgood_ LATEST
LEGEND ,
Nov 13, 2018

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Nov 13, 2018 0
Adobe Community Professional ,
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, ACP

Likes

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
Reply
Loading...
Nov 13, 2018 0