UI formatting messed up on IE when using IP addres

Question

I have an application developed using Primefaces 2.2.1 and JSF 2.0, deployed on Glassfish 3.1 local machine.

Problem is that when I access the application using http://localhost:8080/MyApp, the UI formatting is fine. But if I access the application using http://ip-address:8080/MyApp instead of localhost in the url, the UI formatting is kind of messed up.

This problem occurs only on IE (I have version 8.0), not on FF. What's the difference between using localhost:8080 and ip-address:8080 in the url? Following are the pictures that illustrate my problem.

Using http://ip-address:8080/MyApp:

---

Using http://localhost:8080/MyApp:

Thank you.

Answer 1

IE > 7 is setup by default to run Intranet Sites in Compatibility Mode (ie IE7). This isn't quirks mode. You can turn this behviour off by setting Compatibilty View Options not to run in compat mode for Intranet sites.

Answer 2

Using a local (intranet) IP address forces IE to run in quirks mode which in turn exposes among others the IE box model bug, which you're seeing now. The IE box model bug incorrectly calculates the padding and border size as part of width. Just don't use local IP addresses when accessing a site in IE.