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
In Live mode
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>
Copy link to clipboard
Copied
Are you using css to style your page, you should be....... add the css selector below:
img {
display: block;
}
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.
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;">
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
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>
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.
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>
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
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.
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?
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.
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.
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.
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