Solved

IE rendering page differently online vs. locally

Posted on 2013-12-22
7
427 Views
Last Modified: 2013-12-22
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
Comment
Question by:dresdena1
  • 3
  • 2
  • 2
7 Comments
 
LVL 19

Assisted Solution

by:Patricksr1972
Patricksr1972 earned 250 total points
ID: 39734846
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 250 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/
0
 

Author Comment

by:dresdena1
ID: 39734872
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 19

Expert Comment

by:Patricksr1972
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.
0
 

Author Closing Comment

by:dresdena1
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!
dresdena1
0
 
LVL 19

Expert Comment

by:Patricksr1972
ID: 39734966
Youre welcome, nice split and merry Christmas!
0
 
LVL 83

Expert Comment

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 44
Getting Column Height to Match Other Column 5 44
Problem with a CSS in a page 2 27
Wordpress errors showing up, hacked? 4 0
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

895 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now