Local website renders differently using (IP address or machine name) vs localhost?

Question

I have an MVC3 (razor) site published to IIS7 locally for testing purposes.

When I access the site via "localhost" it looks different from when I access using the IP address or machinename?

I have cleared my cache and re-loaded the pages to confirm and they still appear the different. The CSS must be loading to give the correct fonts/colours etc, although ":hover" elements appear to load much slower?

I am using JQuery/JQueryUI on the site if that helps identify the problem?

Localhost

IP Address

Any ideas?

Edit: More info

The titles, labels and table definition are build from ViewBag.Title, or looping through rows in a ViewModel - nothing clever, just standard MVC3/Razor stuff.

The same css file is used for every page, and F12 in IE8 shows the correct css has been loaded.

Title/subtitle font sizes/colours are correct, just their positioning is out? Table border appears thicker? Positioning generally seems a little "out", but I can't understand why there is this difference?

Can a firewall/AV package strip out positioning?

Can you check if under "privacy" or "security" in the IE settings one of the two is defined when you click the "websites" button? In the security tab, select the different zones as well before checking. Also, what happens in another browser? — Erik Oosterwaal, Oct 11 '11 at 08:06
Both versions look the same in FF - so guessing it's an IE issue. Unfortunately, my "quick testers" are using IE while we await a test server to be installed/configured - so they're seeing the issues :( — BlueChippy, Oct 11 '11 at 08:26
Sorry, for clarity: both versions in FF look CORRECT! With the elements as per the top image. — BlueChippy, Oct 11 '11 at 08:30
hmmm, okay. You say you're using the F12 tool in IE for debugging. If I'm not mistaken you can see/select the browsermode and the documentmode in that tool (at the end of the menu in the F12 tool) Can you check if in both cases browsermode and documentmode are the same. It almost looks as if one domain is in quirks mode. — Erik Oosterwaal, Oct 11 '11 at 08:30

score 28 · Accepted Answer · answered Oct 11 '11 at 08:29

28

The same css file is used for every page, and F12 in IE8 shows the correct css has been loaded.

Developer Tools should show that IE is not using the same "Browser Mode"/"Document Mode" between the two instances of the site, because that's the problem here. IE defaults to different modes depending on if you're using a machine name or not (amongst other things).

Adding this to your <head> should sort out the problem:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

answered Oct 11 '11 at 08:29

thirtydot

224,678
48
389
349

3

+1. This abysmal technology is called ["Smart defaults"](http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx) and was probably designed solely to avoid Sharepoint portals from breaking. I'm not 100% sure whether they can be overridden by a header though (Edit: It seems they can.) – Pekka Oct 11 '11 at 08:32
2

Well bend me backwards and call me Katie if this isn't a complete crock of MSh*t! Works perfectly - but there should be NO need to add something to a page for this - you should only add something if you want DIFFERENT behaviour. – BlueChippy Oct 11 '11 at 08:41
Dammit @thirtydot, you beat me by 1 minute! :) Glad you've found your answer Katie! – Erik Oosterwaal Oct 11 '11 at 08:52
1

My jQuery animations were jumping in IIS but not in localhost. This fixed it. Thanks! – Edward Pescetto Sep 26 '12 at 14:32
Someone needs to take IE to the back of the barn and shoot it between the eyes... – Arm0geddon Aug 05 '14 at 22:51

score 3 · Answer 2 · edited Mar 20 '17 at 10:18

3

I had a similar issue, where the sizes differed from the local development site to the one on the production server. Turned out that I forgot the zoom level to 90% when viewing the development version... This answer helped me realize that: https://superuser.com/questions/315448/different-font-size-between-localhost-and-remote-server-in-firefox

edited Mar 20 '17 at 10:18

Community

1
1

answered Apr 29 '13 at 12:28

victorvartan

1,002
2
11
31

Zoom was the issue in my case too. – Aman jangra Aug 30 '18 at 14:12

score 1 · Answer 3 · answered Dec 03 '13 at 14:28

1

I had exactly similar issue in IE11, I used this code

<meta http-equiv="X-UA-Compatible" content="IE=11">

And now whether its localhost or my machine name, the page always rendered nicely.

answered Dec 03 '13 at 14:28

nakul2013

17
2

2

This question is two years old, about IE8, and is already solved with a similar answer. – Polynomial Dec 03 '13 at 14:47

score 1 · Answer 4 · answered Mar 12 '14 at 10:07

Just wanted to add, that if you use HTML5 tags (nav, header etc.) IE8 will render different on localhost and remote host.

If you add:

<!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('nav');
    </script>
<![endif]-->

Then the IE8 will show the same on local and remote host.

Local website renders differently using (IP address or machine name) vs localhost?

4 Answers4

Linked