Solved

IE rendering page differently online vs. locally

Posted on 2013-12-22
7
431 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 23

Assisted Solution

by:Patrick Bogers
Patrick Bogers 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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.
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 23

Expert Comment

by:Patrick Bogers
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

737 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