Table when saved as html

jmt356 · Post by **jmt356** » 09 Jan 2011, 09:49

I am using Word to design a web page that when converted to html shows a blue bar to the right of an image on the header when displayed in IE (but not when displayed in Mozilla Firefox or Google Chrome). In the Word document, I aligned the image in the header all the way to the right, so there is no bar showing through from behind the image. But in IE, the file displays differently: a blue bar, which is coming from the blue background of the table cell in which the image is located, is coming through in a space between the right edge of the image and the right border of the table. Why is this background showing up, even though when displaying the page in Word, it is completely sealed up?

I am attaching the web page. Though the images are not embedded, you can see where the image would have been located by looking at the X in the top row of the table.

Post by **HansV** » 09 Jan 2011, 11:15

You can't attach HTML documents directly but - as with all file types - you can zip them and attach the zip file. Here is the file you sent me by e-mail.

html_design.zip

When viewed in Word, the table is 654 pixels wide.
When viewed in Internet Explorer 8, it is 692 pixels wide.
When viewed in Firefox 3.6.13, it is 652 pixels wide.
I assume that this difference causes the image to be aligned incorrectly.

I don;t know what causes this, The HTML generated by Word is such a mess that it is virtually impossible to read it. I'd try a real HTML editor; if you need recommendations, ask in the Web Development forum.

jscher2000 · Post by **jscher2000** » 09 Jan 2011, 19:34

Two thoughts come immediately to mind:

(1) The page has no DOCTYPE declaration on the top line. Thus, it will be rendered in a browser's "quirks" mode. As the name implies, this is a non-standard rendering mode meant to offer some backwards compatibility with pages created in the last millennium. Here is a sample DOCTYPE declaration to add as the very first line on your page (use a text editor to paste this into the HTML file, not in the Word document):

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

While that may not cure any particular problem, it should help improve consistency between browsers. To me, this makes the display in IE8 and Fx3.6 almost the same.

(2) The CSS rule for table-layout is not set. Tables are stretchy by design, so wide content can break your width settings. To prevent that, you can add a CSS rule:

Code: Select all

<style type="text/css">
table {table-layout:fixed;}
</style>

Since you control everything in your table, this probably isn't necessary, but it's helpful if you have unpredictable text or image input (e.g., a forum).

Edit: I echo Hans' recommendation to consider other HTML editors because Word, even with the "filtered" HTML setting, includes information that is only useful for Word. This makes it harder to maintain the page and increases download and rendering time for visitors.

jmt356 · Post by **jmt356** » 14 Jan 2011, 11:42

Iâ€™m opening the file in a â€œrealâ€ html editor (Dreamweaver) but it still doesnâ€™t help. Though the image is right aligned and displays correctly in DW's design mode, that border shows up when being viewed in IE. I don't fully understand why all these web browsers are showing the table with different widths. The width isn't fixed?

Jefferson! So nice to see you on the Lounge.
The code you suggested (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">) indeed made my table look the way it should but it also made all my images disappear when I was viewing the page in IE. I guess you couldnâ€™t see that in your version because the version I uploaded didnâ€™t have all of the images embedded.

As for the suggested code
<style type="text/css">
table {table-layout:fixed;}
</style>, it fixed the table width issue and left the images intact, but it modified the table height such that the second and third rows get cut off.

If I could just get the effects of the first code while leaving the images intact ...

jscher2000 · Post by **jscher2000** » 15 Jan 2011, 05:38

jmt356 wrote:The code you suggested (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">) indeed made my table look the way it should but it also made all my images disappear when I was viewing the page in IE. I guess you couldnâ€™t see that in your version because the version I uploaded didnâ€™t have all of the images embedded.

I can't think of why that should be, unless the src path is written in some peculiar way??

jmt356 wrote:As for the suggested code
<style type="text/css">
table {table-layout:fixed;}
</style>, it fixed the table width issue and left the images intact, but it modified the table height such that the second and third rows get cut off.

Try removing the height values everywhere that they are not essential (e.g., table, cells).

jmt356 · Post by **jmt356** » 15 Jan 2011, 11:38

Hans, where did you read that when viewed in Word, the table is 654 pixels wide?

Is there a way to merge the two columns in the first row without causing the image to move to underneath the word "company"? I want to keep the image to the right of the word.

Post by **HansV** » 15 Jan 2011, 11:56

I opened the document in Word, IE8 and FF3.6.13 and used a screen ruler (included in the paid version of FastStone Screen Capture) to measure the width of the table.

Yes, you can merge the two columns and keep the image to the right (use a right-aligned tab), but it'll mess with the vertical position of the text. How to solve that is a web design question, I can't help with that.

jscher2000 · Post by **jscher2000** » 15 Jan 2011, 17:47

jmt356 wrote:Is there a way to merge the two columns in the first row without causing the image to move to underneath the word "company"? I want to keep the image to the right of the word.

In HTML, you could do something like this (increases column span to cover all 8 columns, then float two fixed-width paragraphs side-by-side in the cell):

Code: Select all

   <tr>
    <td colspan=8 style='background:#003366;padding:0 5.75pt;height:67.55pt'>
      <p class=MsoNormal style='margin-top:1.25em;width:216px;float:left;text-align:center;
        font-size:23.0pt;color:white;font-style:italic;'>Company</p>
      <p class=MsoNormal style='margin:0;float:right'><img width=405 height=123
        src="html%20design_files/image002.jpg"></p>
    </td>
   </tr>

I don't know how that translates to native Word formatting, but the good thing is, if you paste that into an HTML file and open it in Word, I think Word will try to convert it for you.

jmt356 · Post by **jmt356** » 17 Jan 2011, 04:39

Hans I see your point. Even when after incorporating your suggestion, I set the cell alignment to vertically centered, the word "company" still appears on the bottom of the cell. I think becasue the image is taller than the font, the word "company" defaults to the bottom of the cell.

Jefferson: in split view mode in Dreamweaver, I placed my cursor in the table and then in the html code right where the cursor was I copied that code in, but it made the whole table disappear. Why is this? Can I not edit in DW the html of a web page created in Word ?

jscher2000 · Post by **jscher2000** » 19 Jan 2011, 21:14

jmt356 wrote:Jefferson: in split view mode in Dreamweaver, I placed my cursor in the table and then in the html code right where the cursor was I copied that code in, but it made the whole table disappear. Why is this? Can I not edit in DW the html of a web page created in Word ?

I don't use DW. The above is the entire row. Perhaps DW pasted it just into one cell??

jmt356 · Post by **jmt356** » 21 Jan 2011, 10:55

JScher, do you do html by hand? Perhaps I should hold off on following your advice until I learn html better. My knowledge of it all is quite limited, which is why I'm pretty dependant on Dreamweaver's design mode.

jscher2000 · Post by **jscher2000** » 21 Jan 2011, 20:57

jmt356 wrote:JScher, do you do html by hand?

Yes. I started with FrontPage, but soon discovered that making some changes in the WYSIWYG view caused problems. So gradually I learned how to make those changes by hand. Dive in! No time like the present.

If I recall correctly, FP had a feature where you could select an element in the WYSIWYG view, then change to a pure HTML view, and the code for that element was selected. This made it easy to find the part of the code I needed to work on. Not sure whether DW does that.

agibsonsw · Post by **agibsonsw** » 21 Jan 2011, 21:30

I find DW slightly unreliable in switching between Code and Design view. I find sometimes I have to drag to select something in Design view so that when I switch to Code view it goes to the appropriate place. It seems to throw in the odd space here and there as well. Highlighting something in Code view and switching to Design seems to work a little better.

jmt356 · Post by **jmt356** » 22 Jan 2011, 14:02

Jefferson, do you continue to use FrontPage and when there is a problem in the WYSIWYG view, switch to the code to edit it manually, or do you do it all by code? Do you recommend FP? Is it a good program for someone who knows MS Word well? For example, is working with web site styles and templates come easily to someone who knows how to work with MS Word styles and templates or is there a learning curve?

Are you familiar with the WYSIWYG Web Builder at://www.wysiwygwebbuilder.com/purchase.html" onclick="window.open(this.href);return false;? For $44.95, it's way less expensive than DW, and it is marketed as an easy tool for beginners who don't know html. I wonder if it's any good.

jscher2000 · Post by **jscher2000** » 22 Jan 2011, 17:40

jmt356 wrote:Jefferson, do you continue to use FrontPage and when there is a problem in the WYSIWYG view, switch to the code to edit it manually, or do you do it all by code?

I was using FrontPage 2000, and I no longer use it at all. Anyway, Microsoft discontinued FrontPage a few years ago and released Expression Web, which was designed to be more competitive with Dreamweaver. There might be a free trial you could check out.

Coding by hand, I definitely miss a few features of WYSIWYG editors, but I use the PSPad text editor, which has some helpful features for code editing. If you click in the first tag of a pair (e.g., <td>) it usually highlights both the open tag and the close tag. Also it applies some color coding to help selected parts of the text pop out. And you can indent a selected block off text with tab, and out-dent with shift+tab. Certainly better than notepad. :D: (There probably is another thread about "favorite text editors" somewhere.)

Eileen's Lounge

Table when saved as html

Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html

Re: Table when saved as html