Browsers reformat my HTML which results in different look

EDIT: I found that the issue is actually that IE changes an HTML elements class text from:

"<img class="blah".." to "<img class=blah..". 

This is only happening in IE for me. Note it doesn't remove the src quotation marks or the id quotation marks or others. This is sooo frustrating!

I am using JQuery to update a website visually, Inside my main div(updatableDiv) I change each updatable HTML element(for eg an p, i, b, etc.) into a textarea. The user makes their textual changes then I change the textareas back to a p, b etc. This is all done using JQuery.

My Problem: When I go to get the HTML from the div(with the id updatableDiv), my HTML is slightly different which results in the display of the HTML being slightly different. For example: if I have an image thats sits directly above a white box(not vertical gap in between), af开发者_JS百科ter I update the html, there is a vertical gap introduced in between the image & the white box.

So the before html was(this is an example from IE):

<img class="pageHeading" src="linksHeading.png" width="90%" alt=""/><div class="pageContent">

After getting the HTML using the call $("#updatableDiv").html() the html looks like this:

<IMG class=pageHeading alt="" src="linksHeading.png" width="90%">
<DIV class=pageContent>

So it results in a vertical gap.

So my main question is how can I keep all the formatting of the HTML so problems like this dont occur after I update the HTML & get the HTML from the element by JQuery's $("#updatableDiv").html()?

Make the img display: block.

When you get the innerHTML in some versions of IE, it will NOT give you back your original HTML. It will give you a generated version of the HTML that can be quite different from the original (though semantically identical to it).

I've seen some versions of IE:

• Remove quote marks around attributes
• Change the order of attributes
• Change the case of attribute names

So, in a nutshell, all you can count on when you get the innerHTML of something in IE is that it will give you semantically the same HTML, but it may not be the same HTML as what was in the page originally. It appears that it doesn't save the original HTML, but instead generates it from the object attributes. Since there are many legal ways to express a given set of attributes, IE will not necessarily generate it the same way you originally specified it.

I don't believe there is anything you can do about this unless you want to reformat the generated HTML that IE gives you according to your own style rules (add quotes where you want them, put attributes in a specific order, change to a specific case, etc...).

If you run this jsFiddle in IE7, you will see it change all three items above from what was originally specified.

I specify this HTML in IE7:

<div id="test" data-item="test" style="background-color: red; height: 40px; width: 100px;">

When I request innerHTML, I get this back (different order, caps and quoting):

<DIV style="BACKGROUND-COLOR: red; WIDTH: 100px; HEIGHT: 40px" id=test data-item="test"></DIV>

I'd actually be surprised if the vertical gap you notice is because of the changed HTML. IE is notorious for putting extra space around images. For one, they are an inline item by default so it treats them as being part of a line and gives the line they are on the prevailing line height. This can add extra space around images in various ways. The work-arounds I've used in IE are to make the image display: block (if that's appropriate) or to set font-size: 0 on the container that the image is in so IE doesn't give the line any additional height. You should also make sure that you've specified a border for the image because older versions of IE like to give images a default border too.

This extra spacing around an image can be triggered by the existence of a space in a line that didn't previously exist. Other browsers consider that space only as a separator, but in older versions of IE, it triggers some extra line spacing.

White-space in the source shouldn't matter. You're not losing (or adding) some CSS class information during the transition are you?

img elements are inline by default, so normally they line up to the text baseline leaving a gap that is the extra space below the baseline for dangling letters like lowercase g. Block elements should line up with the bottom of the containing block.

Try setting some CSS:

img { display:block; }
// or possibly
img { vertical-align:bottom; }