IE rendering page differently online vs. locally

Posted on 2013-12-22
Medium Priority
Last Modified: 2013-12-22
I am working on redesigning a very old website.
I have the dev page laid out:

This is preliminary, but in the direction I want it to go.

The page renders fine in Chrome (31.0.1...), FireFox (25...), Safari (5.0.3).
It also renders just fine on my (Vista) computer (locally) with IE 9

The problem is that when I upload the file and view it on the server it looks the same in every browser except IE9.
IE9 loses the embedded font, the alignment of the top left container, the top margin and rounded edges on the center container, etc...
The permissions are set to 755.

I have never had this happen before were it renders differently between my local computer and online.

The CSS is somewhat sloppy currently as I have been working on layout primarily, but will get cleaned up later.

I could go back and do most of this with HTML tables, but I would prefer to get it working properly with CSS. This is going to be a template that will be incorporated into a shopping cart program.

Any idea why the page renders differently in IE between on my computer and online?

I have attached the page to this also.

Question by:dresdena1
  • 3
  • 2
  • 2
LVL 23

Assisted Solution

by:Patrick Bogers
Patrick Bogers earned 1000 total points
ID: 39734846

Some advise: start by validating your code here.

After your link to pull in the CSS, put this:
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />

Make a second style sheet called ie.css and just change the parts that need to for IE.

You also have the ability to add versions: (if need support for older versions)
<!--[if IE 7]>

BTW: i did not see behaviour your are descibing in IE9, it did see heavy downstyling in IE8. Top alignment becomes a square box and font get 'ordinairy'

Maybe you start looking by using the multiple <body> tags which isnt good practice for some browsers.

LVL 84

Accepted Solution

Dave Baldwin earned 1000 total points
ID: 39734871
Your @font-face only has one font and that is not adequate to support all the browsers online.  You have:
@font-face {
	font-family: BreeSerif-Regular;
	src: url("BreeSerif-Regular.otf") format("opentype");

Open in new window

The normal declaration looks like this:
@font-face {
    font-family: 'ContaxSans65Medium';
    src: url('ContaxSans65Med-webfont.eot');
    src: url('ContaxSans65Med-webfont.eot?#iefix') format('embedded-opentype'),
         url('ContaxSans65Med-webfont.woff') format('woff'),
         url('ContaxSans65Med-webfont.ttf') format('truetype'),
         url('ContaxSans65Med-webfont.svg#ContaxSans75Regular') format('svg');
    font-weight: normal;
    font-style: normal;

Open in new window

The 'eot' declarations are required to support different IE versions.  And of course you actually have to have all those versions in/on your site.  More info: http://sixrevisions.com/css/font-face-guide/

Author Comment

ID: 39734872
Thanks for the reply.
I validated the page. It had an open <UL> that gave 6 errors. As soon as I closed it validated with 1 warning and 0 errors. Thanks!

I understand using conditional stylesheets for IE, I am just really puzzled why the page renders in IE locally (with all formatting and embedded fonts) and online differently.

I read your comment that it looked OK on your machine (until IE8) and that is a little reassuring, but I am still puzzled why it renders differently locally vs. online in my IE9.

Any thoughts on this?

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 23

Expert Comment

by:Patrick Bogers
ID: 39734876
Hi Dresdena,

This can be caused because you have all sort of developers tools and plugins loaded which affect the behaviour of some browser instances.
Glad to see you got the page error-free, it is a good way to build on.

BTW: HTH means 'hope this helps' :)

Oh and DaveBaldwin gives a very valuable statement above which you should look into.

Author Closing Comment

ID: 39734940
Patricksr1972 and DaveBaldwin,
Thank you very much! I have split the points because from Patricksr1972 I found a validation error (which has been corrected) and from DaveBaldwin I was able to follow the path to FontSquirrel and using the Font Generator create the proper embedded font!

Thank you very much!
LVL 23

Expert Comment

by:Patrick Bogers
ID: 39734966
Youre welcome, nice split and merry Christmas!
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39735034
You're welcome, glad to help.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
Now many of you may wonder how you can reach great design with least number of essentials. Isn’t stuffing ‘more and more number of elements that speak for the purpose’ the right way to do it? Erm, not always, and in this write-up, you will see why.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

586 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question