Table when saved as html
-
- SilverLounger
- Posts: 2389
- Joined: 28 Mar 2010, 01:49
Table when saved as html
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.
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.
Regards,
JMT
JMT
-
- Administrator
- Posts: 78532
- Joined: 16 Jan 2010, 00:14
- Status: Microsoft MVP
- Location: Wageningen, The Netherlands
Re: Table when saved as html
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.
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.
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.
You do not have the required permissions to view the files attached to this post.
Best wishes,
Hans
Hans
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Table when saved as html
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):
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:
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.
(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">
(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>
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.
-
- SilverLounger
- Posts: 2389
- Joined: 28 Mar 2010, 01:49
Re: Table when saved as html
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 ...
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 ...
Regards,
JMT
JMT
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Table when saved as html
I can't think of why that should be, unless the src path is written in some peculiar way??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.
Try removing the height values everywhere that they are not essential (e.g., table, cells).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.
-
- SilverLounger
- Posts: 2389
- Joined: 28 Mar 2010, 01:49
Re: Table when saved as html
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.
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.
Regards,
JMT
JMT
-
- Administrator
- Posts: 78532
- Joined: 16 Jan 2010, 00:14
- Status: Microsoft MVP
- Location: Wageningen, The Netherlands
Re: Table when saved as html
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.
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.
Best wishes,
Hans
Hans
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Table when saved as html
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):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.
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>
-
- SilverLounger
- Posts: 2389
- Joined: 28 Mar 2010, 01:49
Re: Table when saved as html
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 ?
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 ?
Regards,
JMT
JMT
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Table when saved as html
I don't use DW. The above is the entire row. Perhaps DW pasted it just into one cell??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 ?
-
- SilverLounger
- Posts: 2389
- Joined: 28 Mar 2010, 01:49
Re: Table when saved as html
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.
Regards,
JMT
JMT
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Table when saved as html
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.jmt356 wrote:JScher, do you do html by hand?
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Table when saved as html
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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
-
- SilverLounger
- Posts: 2389
- Joined: 28 Mar 2010, 01:49
Re: Table when saved as html
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.
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.
Regards,
JMT
JMT
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Table when saved as html
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.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?
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.)