ansaurus

Question

Answer 1

+4 A:

When viewing generated source, it doesn't necessarily follow the XHTML standards. The way the browser reads the DOM at runtime is different than how you see it in the XHTML code. How does this actually affect the rendering of your site? It shouldn't make a difference.

Shawn Steward 2009-12-17 16:53:47

Yes you are right, it is not the reason of bad rendering, however on opera look good... anyway thx for notice that +1 and accept.

Rin 2009-12-17 17:11:50

Answer 2

+3 A:

Funny, I just had and solved this problem yesterday!

The issue is that even though you specify the XHTML doctype, the DOM (at least in FireFox) will only follow XHTML rules if the Content-Type header is set appropriately, like application/xhtml+xml. This includes manipulating the DOM with JavaScript, including jQuery. As an experiment, consider the following code:

var foo = $('<div></div>');
foo.html('<img src="#" />');
console.debug(foo.html());

This code will have different results depending on what Content-Type is set. If the Content-Type is text/html, you'll get back <img src="#">, because with plain-ole HTML, that is correct. However, if the Content-Type is application/xhtml+xml, or any of the other acceptable MIME content types for XHTML, you should get back <img src="#" />.

So, whatever server-side framework you're using, you'll need to add that header to the response. If it's a static file, you should be able to do it with a meta tag:

<meta http-equiv="Content-Type" content="application/xhtml+xml" />

You can check the headers for the page load using the NET tab in FireBug.

I had the additional issue with ASP.NET MVC where it wouldn't set content type, even though I was specifically setting it. The trick is that you need to set it after the call to view. So, this should work:

public void ActionResult Index()
{
   var result = this.View();
   this.Response.ContentType = "application/xhtml+xml";
   return result;
}

EDIT: I just saw your edit and you're setting the wrong Content-Type with your meta tag. See the rest of my answer for more details.

Daniel Schaffer 2009-12-17 17:02:44

Content type not help but thx anyway.

Rin 2009-12-17 17:12:30

Answer 3

+1 A:

It depends on the browser as to what gets generated. Internet Explorer will mostly generate whatever it likes, often unclosed image tags in upper case. That's often how it will look if you inspect the DOM directly, even though it may render correctly.

Firefox is more likely to do what it's told. However, in both browsers if you have invalid XHTML somewhere in your page you may be throwing the rendering engine into Quirks Mode - in which case it will do its best to render the page in the way the old-style browsers would, in being able to deal with virtually any markup you give it and at least present something to the user. The side-effect is that your efforts at standards-compliant elegance may be ignored and rendering won't appear as you expect it.

So I'd look to the rest of the page first and make sure it's fully XHTML compliant, and then JQuery and the DOM should play along nicely.

Karl B 2009-12-17 17:19:50

ansaurus

tags:

views:

answers:

Jquery remove '/' from <img> tag?

related questions