none
Images not appearing properly in Tables RRS feed

  • Question

  • Hi,

    I am having some problems with Images and text not appearing properly on tables I have created within a DWT template.

    One of the problems is that I am starting to get large vertical "gaps"/"white spaces" appearing above images in cells,
    and at the same time, the images that I have put into cells are appearing cut off at the bottom?

    I have looked at different things to correct it, but for some reason cannot fix it...

    here is an example of one of the pages I am having problems with:

    http://www.simmer.co.nz/Biscuits/Biscuits.htm


    Any help would be appreciated,

    thanks


    Kiwibob
    Tuesday, September 16, 2008 9:45 AM

Answers

  • The white gaps look to be caused simply by the height of the containing cells being 186px whereas the images are 150px high.

    I don't see any images that look as though they've been cut off.

    Be aware that the 'Segoe Script' font may not be one that a lot of users have. It would be better to make the header an image.

    HTH


    Ian

    http://www.ew-resource.co.uk
    http://www.fp-resource.co.uk


    Ian Haynes
    Tuesday, September 16, 2008 10:01 AM
  • A couple of additional comments to Ian's: Looking over the HTML and CSS markup for the page, I get the distinct impression that at least portions of it were originally done using MS Word, and then copied and pasted into an HTML document. That is a really bad practice; Word and HTML format are, in many ways, completely different mediums. One is designed to be used within the context the Word application, for creating documents that are usually sized to a page, for print medium. HTML, on the other hand, is designed to be used in any number of browsers, viewed with browser windows of various sizes and screen resolutions, and not usually sized to fit any print medium whatsoever. So, when Word translates its' format into HTML, it does so with the idea that it should retain its' printable format, and the translation doesn't go very well at all for a web page on the WWW.

    Tables in Word, for example, are generally sized very specifically in all aspects, while HTML tables and other HTML elements are designed to expand and collapse according to their content (by default), or to the width of their container elements (in some cases), but can have specific sizes set for them as well. I know it's tempting to start with some software you're familiar with when you enter a new type of development, but in this case, the differences in the medium make it unrealistic to expect the results you want, or will be satisfied with. HTML was designed specifically for a medium which is usually not sized to a paper size, and may be viewed on many different types of systems, with many different configurations, and using a large variety of web browser software.

    So, considering that Expression Web has many tools which look in many ways like the tools you're familiar with, I would recommend that you start your pages using Expression Web, and that you get familiar (over time) with HTML and CSS. As a beginner, Expression Web does a pretty darned good job of doing most everything for you as you would expect (it understands its' medium). As you progress, you'll find that it also has tools that enable people familiar with HTML and CSS to get down and dirty with the details in a highly productive manner.

    Another aspect which Ian mentioned was the use of a "Segoe" font. This font is a proprietary product of Microsoft, and as such is not installed on all computers. Only the font names appear in the HTML markup; the browser on the client must fetch the appropriate font from the local font store when it is available, and when it is not, it tries as best it can to find a substitute, which is usually based on whether the font is a serif or sans-serif font. So, it's best to stick to the fonts which are almost universally available everywhere, such as Arial, Times New Roman, and Courier.

    Now, back to tables. A table can have a width specified, and it will resize itself to that width (and height, if specified). If the cells in the table are not sized specifically, they will, by default stretch by the same amount each to fill the table. However, if they have content, they may size themselves differently. For example, if a cell contains an image that is wider than the cell, it will generally stretch to fit the image. If the total width of the cells is larger than the table, it will also stretch. So, what I'm getting at here, is in your case, your images are all the same width, or can be sized to the same width, and you may just want to leave out any width specifications for the table and cells. The cells with text in them will wrap at the width of the images, and stretch downwards according to how many lines of text end up in each one. If you want all of the cells with text in them to be the same height, you may want to specify a height style for those cells, but don't worry about the width.

    HTH
    Kevin Spencer, Chicken Salad Alchemist
    Tuesday, September 16, 2008 10:33 AM
  • I have to echo Ian's caution about Segoe Script font (or any non-universal font). On my computer (Windows XP Pro, Office 2003 & 2007), the word Simmer was displayed as italicized Arial on all but the Home page (I don't know what it was on the Home page, but it was weird), while the rest of the masthead text was displayed in the Brush Script MT font. I found the Segoe UI font on my system, but not Segoe Script, hence the substitutions.

    Also, the text "Welcome to the home of Simmer..turning your sweet dreams into reality.." is messed up, again partly due to the font substitution (it's all Arial on my system). The bottom line of text overlaps the one above it. It may be because you are assigning different styles to the <h2></h2> tags, and multiple ones inside those tags and overriding those styles with bolding.

    Also, also, the text ".. well you have come to the right place." wraps oddly, with "place" dangling alone by itself on the left. This again may be due to font substitution.
    Tuesday, September 16, 2008 2:25 PM

All replies

  • The white gaps look to be caused simply by the height of the containing cells being 186px whereas the images are 150px high.

    I don't see any images that look as though they've been cut off.

    Be aware that the 'Segoe Script' font may not be one that a lot of users have. It would be better to make the header an image.

    HTH


    Ian

    http://www.ew-resource.co.uk
    http://www.fp-resource.co.uk


    Ian Haynes
    Tuesday, September 16, 2008 10:01 AM
  • A couple of additional comments to Ian's: Looking over the HTML and CSS markup for the page, I get the distinct impression that at least portions of it were originally done using MS Word, and then copied and pasted into an HTML document. That is a really bad practice; Word and HTML format are, in many ways, completely different mediums. One is designed to be used within the context the Word application, for creating documents that are usually sized to a page, for print medium. HTML, on the other hand, is designed to be used in any number of browsers, viewed with browser windows of various sizes and screen resolutions, and not usually sized to fit any print medium whatsoever. So, when Word translates its' format into HTML, it does so with the idea that it should retain its' printable format, and the translation doesn't go very well at all for a web page on the WWW.

    Tables in Word, for example, are generally sized very specifically in all aspects, while HTML tables and other HTML elements are designed to expand and collapse according to their content (by default), or to the width of their container elements (in some cases), but can have specific sizes set for them as well. I know it's tempting to start with some software you're familiar with when you enter a new type of development, but in this case, the differences in the medium make it unrealistic to expect the results you want, or will be satisfied with. HTML was designed specifically for a medium which is usually not sized to a paper size, and may be viewed on many different types of systems, with many different configurations, and using a large variety of web browser software.

    So, considering that Expression Web has many tools which look in many ways like the tools you're familiar with, I would recommend that you start your pages using Expression Web, and that you get familiar (over time) with HTML and CSS. As a beginner, Expression Web does a pretty darned good job of doing most everything for you as you would expect (it understands its' medium). As you progress, you'll find that it also has tools that enable people familiar with HTML and CSS to get down and dirty with the details in a highly productive manner.

    Another aspect which Ian mentioned was the use of a "Segoe" font. This font is a proprietary product of Microsoft, and as such is not installed on all computers. Only the font names appear in the HTML markup; the browser on the client must fetch the appropriate font from the local font store when it is available, and when it is not, it tries as best it can to find a substitute, which is usually based on whether the font is a serif or sans-serif font. So, it's best to stick to the fonts which are almost universally available everywhere, such as Arial, Times New Roman, and Courier.

    Now, back to tables. A table can have a width specified, and it will resize itself to that width (and height, if specified). If the cells in the table are not sized specifically, they will, by default stretch by the same amount each to fill the table. However, if they have content, they may size themselves differently. For example, if a cell contains an image that is wider than the cell, it will generally stretch to fit the image. If the total width of the cells is larger than the table, it will also stretch. So, what I'm getting at here, is in your case, your images are all the same width, or can be sized to the same width, and you may just want to leave out any width specifications for the table and cells. The cells with text in them will wrap at the width of the images, and stretch downwards according to how many lines of text end up in each one. If you want all of the cells with text in them to be the same height, you may want to specify a height style for those cells, but don't worry about the width.

    HTH
    Kevin Spencer, Chicken Salad Alchemist
    Tuesday, September 16, 2008 10:33 AM
  • I have to echo Ian's caution about Segoe Script font (or any non-universal font). On my computer (Windows XP Pro, Office 2003 & 2007), the word Simmer was displayed as italicized Arial on all but the Home page (I don't know what it was on the Home page, but it was weird), while the rest of the masthead text was displayed in the Brush Script MT font. I found the Segoe UI font on my system, but not Segoe Script, hence the substitutions.

    Also, the text "Welcome to the home of Simmer..turning your sweet dreams into reality.." is messed up, again partly due to the font substitution (it's all Arial on my system). The bottom line of text overlaps the one above it. It may be because you are assigning different styles to the <h2></h2> tags, and multiple ones inside those tags and overriding those styles with bolding.

    Also, also, the text ".. well you have come to the right place." wraps oddly, with "place" dangling alone by itself on the left. This again may be due to font substitution.
    Tuesday, September 16, 2008 2:25 PM