I've been working on styling a web page as a report, and just finished my basic styling. I tested the design in IE8, Firefox 3.6 and Chrome 5.0 (all on Windows) and it worked fine.

I then uploaded my app to the server, along with my css sheets. However, now my report doesn't view properly in IE8, although it looks no different to before in Firefox and Chrome. IE8 no longer shows the tr borders, yet everything else still shows up the same, and the css sheet is exactly the same (I downloaded it and compared it with my local copy, besides which the other browsers still render correctly).

My CSS code is available online here.

What should I change to get this remote copy working correctly on IE8?

Working copy of local version on Firefox 3.6 Working copy of remote version on Firefox 3.6

Chrome looks exactly the same. Here is the IE8 version: Working copy of local version on IE8 Non-working copy of remote version on IE8

  • What do you mean by "remote?" How are you including the style sheet? Nathan Duran almost 9 years ago
  • @Nathan - by remote I mean that it is on a server somewhere, as opposed to being run on my machine in debug mode ("local"). The stylesheet (in all cases) is included with the line `<link rel="stylesheet" type="text/css" media="screen" href="/content/css/report-screen.css" />` a_m0d almost 9 years ago
  • That will obviously not work if it's on a different server. Post a live page or all you're going to get are guesses. Nathan Duran almost 9 years ago

2 answers

a_m0d 0
0
points
This was chosen as the best answer

I worked it out at last - for some reason IE8 defaults to displaying intranet pages in Quirks Mode. Removing this setting made my pages display correctly (I had added some more styling options which also weren't quite working properly).

Answered almost 9 years ago by a_m0d
0
points

This is a long shot, but could it be that your server is case sensitive and your local dev isn't? I noticed that you have title case'd some of your CSS keywords (which may or may not be a problem). color: Black should be color: black?

Answered almost 9 years ago by Tony Crockford
  • Not sure about that - I'm viewing the pages in exactly the same browser (one tab for local, one tab for server). The page is coming through exactly as it was uploaded it, which is the same as is being used on the local machine, but it just doesn't want to show those `tr` borders a_m0d almost 9 years ago
  • if we could look at the server version we'd be able to help. URL? Tony Crockford almost 9 years ago
  • The version I posted *is* the server version - I copied it onto a USB drive, after verifying that it was working on my computer, and uploaded it to the server. I can't give a URL because the server is only available on the local network. a_m0d almost 9 years ago
  • so, maybe the path to the stylesheet needs to be relative, rather than root relative then? try <link rel="stylesheet" type="text/css" media="screen" href="content/css/report-screen.css" /> Tony Crockford almost 9 years ago
  • NB, the default styling in Chrome may be fooling you - is the stylesheet actually loaded? ad a test style declaration to be sure. Tony Crockford almost 9 years ago
  • I worked out that it was because IE8 defaults to displaying all intranet pages in quirks mode, which introduced strange rendering effects. a_m0d almost 9 years ago