IE Save as: Different when viewed this way

[Girard Ibanez]

Is it normal for IE when saving a web document, that it reformats the layout.

For example:

on my web site
http://team-raptor.net/girard/myraptor/index.html

When I save as this doc to My Document folder IE will add extra line spaces but FF looks normal. Also, the navigation bars looks sad.

Stump and puzzle.

Thanks

[mwinter]

Is it normal for IE when saving a web document, that it reformats the layout.

Yes. MSIE tries to normalize the markup, but in so doing, it often makes it invalid.

Mike

[Girard Ibanez]

I notice that other web pages do not have the same issues I do.

Could my web page be lacking a code to instruct IE not to add another line spacing? This is the only issue I have when saving my web page to my document.

Thanks for any advice.


girard

[Girard Ibanez]

I think I found my solution but not sure how to fix it.

In my css I have *{margin:0em; padding:0em:} but when the web page is saved as, IE removes it and puts:

{PADDING-RIGHT: 0em;
PADDING-LEFT: 0em;
PADDING-BOTTOM: 0em;
MARGIN: 0em;
PADDING-TOP: 0em
}

Also, the href links don't work using eric king js script from DD.


Help need thanks.

[mwinter]

In my css I have *{margin:0em; padding:0em:} but when the web page is saved as, IE removes it and puts:

{PADDING-RIGHT: 0em;
PADDING-LEFT: 0em;
PADDING-BOTTOM: 0em;
MARGIN: 0em;
PADDING-TOP: 0em
}

Again, that's the bizarre normalisation process at work. The declarations themselves are equivalent, but removing the asterisk (*; the universal selector) is a problem.

Might I ask why this is important? If you're trying to mirror a site, use proper software for the task like wget, Teleport Pro, or HTTrack.

Mike

[Girard Ibanez]

Might I ask why this is important? If you're trying to mirror a site, use proper software for the task like wget, Teleport Pro, or HTTrack.

Not sure what you mean by "mirror a site" or use proper software.

I am putting up a web page that will be an informative page where others can view the contents, save the contents, or print the contents. The problem I am having is that I want the view look tobe maintained when it is saved or printed.

Next question:

My css does not define the "p" tag.

I am using the "*" universal selector because I could not figure out why some browsers would define /default a padding or margin number. So to make my pages uniformed, I used the * selector.

Now I am finding out that perhaps my problem is the "p" tag that is causing me to have that extra line or padding.

[mwinter]

Not sure what you mean by "mirror a site" ...

To make a copy of it. The three products I mentioned are spiders or offline browsers designed to follow URLs and download the resources they find. Though that seems to be overkill in this case, it's the best software for the job.



I am putting up a web page that will be an informative page where others can view the contents, save the contents, or print the contents. The problem I am having is that I want the view look tobe maintained when it is saved or printed.

Well, clearly it's not possible to alter how MSIE works, so you either have to accept it or present an alternative. The latter could be a link that causes the server to prepare the content especially - perhaps by creating a ZIP archive from it - so that the browser saves the contents exactly. That's not particularly trivial to do on-the-fly, so if the content is static, you might want to prepare the download in advance.



I am using the "*" universal selector because I could not figure out why some browsers would define /default a padding or margin number. So to make my pages uniformed, I used the * selector.

That's generally a good idea as the default style sheet of each browser does tend to differ (significantly in some cases).



Now I am finding out that perhaps my problem is the "p" tag that is causing me to have that extra line or padding.

In the saved, off-line version? Yes, because the rule using the universal selector has effectively been removed by MSIE.

On the subject of paragraphs, your current usage is very bad. Don't use empty paragraphs or forced line breaks (br elements) to produce vertical spacing; use margins instead. Similarly, don't use headings to create text that's a certain size; use a font-size declaration instead:



p.notice {
font-size: 150%;
}



<p class="notice">Under construction</p>


Finally, the phrase you're looking for is: "Thank you for your patience." :)

Mike

[Girard Ibanez]

mwinter,

Thanks for your inputs and helping me use the correct English ... dam Islander..:)

If you could be so kind and give me tips/examples on a actual page with <p> contents used on this URL.

http://team-raptor.net/girard/myraptor/r50v2/r50v2_flybar_control_arm_tip.html




On the subject of paragraphs, your current usage is very bad. Don't use empty paragraphs or forced line breaks (br elements) to produce vertical spacing; use margins instead. Similarly, don't use headings to create text that's a certain size; use a font-size declaration instead:

I am not sure I follow your suggestions on empty paragraphs: Most of my paragraphs start with <p> some text here </p>, are these also consider empty paragraphs?

As for the font size, if I define in the body a font-size of 1em, is it correct to use a percentage value to make the font smaller or larger in reference to the 1em font size defined? Or, should I just use the em value.

What would be the reason not to use the <br /> tag for vertical spacing? I am not clear on how to define the margin if what I am trying to do is space the text. Should I use the &nbsp;?

Thanks again for making me understand correct html/css verbage and including English grammer :D

[mwinter]

If you could be so kind and give me tips/examples on a actual page with <p> contents used on this URL.

http://team-raptor.net/girard/myraptor/r50v2/r50v2_flybar_control_arm_tip.html

Sure.



I am not sure I follow your suggestions on empty paragraphs: Most of my paragraphs start with <p> some text here </p>, are these also consider empty paragraphs?

An empty paragraph is either one with no content:



<p></p>

or only whitespace (including non-breaking spaces):



<p> </p>
<p>nbsp;</p>

Instead of doing something like that (and I assume Dreamweaver is the cause, not you) or using forced line breaks (br elements), adjust the margins applied to the paragraphs.



p {
margin: 0.5em 0;
}

will probably do in your case.



As for the font size, if I define in the body a font-size of 1em, is it correct to use a percentage value to make the font smaller or larger in reference to the 1em font size defined?

Yes, though I use 100% for the body element as well (but it's not necessary).



What would be the reason not to use the <br /> tag for vertical spacing?

As you should be aware, simply pressing enter within a line doesn't create a new line in HTML; the carriage return is converted to a space when the document is rendered. To permit these sorts of line breaks, the br element was introduced but the intent is only to break lines (which is why the element is in-line) not to separate elements vertically.

One example of proper line break usage is in poetry or a postal address:



<div class="address">
One Microsoft Way<br>
Redmond<br>
WA 98052-6399
</div>




I am not clear on how to define the margin if what I am trying to do is space the text.

The CSS snippet I posted above is a start.

I balance the top and bottom margin because MSIE doesn't support the first-child pseudo-class selector, or the sibling combinator (+). If it did, the top margin could be 1em, and the first paragraph could have its margin removed, avoiding an unwanted space at the top.



Should I use the &nbsp;?

Non-breaking spaces should be fairly rare. That said, they are useful when you don't want two or more words to be separated across lines (really, that's the purpose of the non-breaking space). An example might be link text, especially in menus.



Thanks again for making me understand correct html/css verbage and including English grammer :D

You're welcome. :)

Mike

[Girard Ibanez]

Mike,

I cannot Thank You enough for helping me and steering me in the right direction.

I corrected the paragraph as you mention and that solved my double spacing in MSIE. As it stands, I may not need the * universal selector.

Now I am redoing my entire page layout again. On the bright side, it is time well spent learning.

Thanks again and for sure this will not be my last .... just a heads up.:)


Girard