Solved

IE rendering page differently online vs. locally

Posted on 2013-12-22
7
428 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

825 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