• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

IE rendering page differently online vs. locally

EE,
I am working on redesigning a very old website.
I have the dev page laid out:
http://www.affordable-megafood.com/index_dev.html

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.

Thanks.
dresdena1
0
dresdena1
Asked:
dresdena1
  • 3
  • 2
  • 2
2 Solutions
 
Patrick BogersDatacenter platform engineer LindowsCommented:
Hi

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" />
<![endif]-->

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.

HTH
0
 
Dave BaldwinFixer of ProblemsCommented:
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/
0
 
dresdena1Author Commented:
HTH,
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?

dresdena1
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Patrick BogersDatacenter platform engineer LindowsCommented:
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.
0
 
dresdena1Author Commented:
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!
dresdena1
0
 
Patrick BogersDatacenter platform engineer LindowsCommented:
Youre welcome, nice split and merry Christmas!
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now