Why does my website's code render wierd in IE9?

Problems with the Windows version of XAMPP, questions, comments, and anything related.

Why does my website's code render wierd in IE9?

Postby Phailip » 05. June 2011 15:42

Hi!

My name is Philip, I'm new to this forum and I got some problems with IE9...

I've got a few questions about IE9 (Internet Explorer 9) and XAMPP.

I am new to building websites and I think I know a bit more than the basics. I really love building sites and designing them and all I've built so far have worked more than fine in all browsers I've tested them in (Google Chrome, Mozilla Firefox and Safari) except IE9. I've noticed that IE9 doesn't want to read some of the CSS3, @font-face or similar stuff. I got some of the CSS3 to work, but only without a webserver. If I run my .htm locally (C:\xampp\htdocs\start\index.htm) it looks like this:
http://i55.tinypic.com/18oso2.png

When I run it with XAMPP (http://127.0.0.1/start/) it looks like this:
http://i53.tinypic.com/lccy1.png

As you can see there is a 1 px border around the body, the border-radius doesn't work and the green picture is moved up.
In the both pictures the @font-face doesn't work, which does work in Chrome:
http://i54.tinypic.com/mhslsp.png

I wonder why there is such a big diffrence between the two first picutes and why the @font-face doesn't work at all in IE9.

The code for the @font-face:
Code: Select all
@font-face {
   font-family: 'bgothm';
   src: url('fonts/bgothm.eot?#iefix') format('embedded-opentype'),
        url('fonts/bgothm.woff') format('woff'),
        url('fonts/bgothm.ttf')  format('truetype'),
        url('fonts/bgothm.svg#svgbgothm') format('svg');
   }


That is some code I saw on: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Here's the whole site's code:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Philip Jacobsson - Websites</title>
   <link rel="stylesheet" href="style.css" media="screen">
   <script type="text/javascript" src="scripts/jquery-1.2.2.pack.js"></script>
   <script type="text/javascript" src="scripts/js.js"></script>
   <meta http-equiv="X-UA-Compatible" content="IE=9" />

</head>
<body>
   <div id="WorkWrapper">
      <div id="center">
         <ul id="work">
            <li><a href="#" target="_blanc" class="kb11"><span class="kb11"></span></a></li>
         </ul>
      </div>
   </div>
      
   <div id="center">
      <div id="logo"></div>
      
      <div id="MainHolder">
      <a id="font">
         Hello!
      </a>
      
      </div>
   </div>
</body>
</html>


and the CSS:
Code: Select all
body
{background-color:#202020; font-family:helvetica, arial; text-indent:15px; margin:0; padding:0; left:0;}
div#center
{margin:auto; zoom:1; position:relative; width:1110px;}

div#logo
{background-image:url(pics/logo.png); width:500px; height:150px; position:absolute; top:0px; left:10px;}

div#WorkWrapper
{background-image:url(pics/workbg.png); width:100%; height:370px; position:absolute; top:150px; left:0;}

div#MainHolder
{width:1110px; height:600px; position:absolute; top:530px; left:0; display:block;
border:#000 1px solid; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px;}

@font-face {
   font-family: 'bgothm';
   src: url('fonts/bgothm.eot?#iefix') format('embedded-opentype'),
        url('fonts/bgothm.woff') format('woff'),
        url('fonts/bgothm.ttf')  format('truetype'),
        url('fonts/bgothm.svg#svgbgothm') format('svg');
   }

a#font
{font-family: 'bgothm', arial, serif; font-size:36pt; color:#FFF; text-shadow:#000 1px 1px 2px;}


      ul#work
      {height:150px; width:1110px; position:absolute; top:-10px; left:-30px;}
      ul#work li
      {float:left; list-style:none;}
      
      ul#work li a.kb11
      {background-image:url(pics/kb11.png); height:150px;width:211px; position:relative; display:block; margin:20px 10px 0 0;}
      ul#work li a span.kb11
      {background-image:url(pics/kb11.png); position:absolute; top:0; left:0; height:100%; width:100%; z-index:100; display:block;}
      ul#work li a.kb11 span
      {background-position: 0px -150px;}


I hope you guys can help me solve this.

Thanks,

Philip
Last edited by Phailip on 05. June 2011 22:08, edited 1 time in total.
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 05. June 2011 21:20

It is not only HTML my question is about, it is about why it is rendered different when using XAMPP from when using no webserver at all.
I figured that someone must know how to fix this since this is a forum about webservers, and in webservers you usually host websites :)


EDIT: I'll try what you told me :)

EDIT2: I tried to exchange the "," to a ";" but then it didn't work at all in any browser
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Sharley » 06. June 2011 03:26

You can copy and paste your CSS code (and HTML code) in this site for testing and checking for correctness:
CSS here:
http://jigsaw.w3.org/css-validator/
HTML here:
http://validator.w3.org/
Select the tab for Direct Input then copy and paste your code.
You can also select More Options to refine your validations for CSS Level 3.

As you can see there are a few anomalies with the CSS and HTML code you posted and all browsers do not conform to all the CSS standards in total, so what I do is I create my CSS and HTML code so that as many browsers as possible can display the page as I intended it to look, which does require some degree of flexibility - trial and error, especially with the latest browser offerings that are supposed to conform more and more to standards but sadly they are still creating there own egotistical standards with the obvious intension of them being right and the standards should conform to their code, it seems.


Just so you are aware and why the previous poster made his usual flaming comments is that Apache server does not render or parse HTML or CSS code at all, this is done solely by a browser and that is why there are so many issues with incorrect CSS and HTML code that will not render correctly in all browsers.

Welcome to the world of HTML CSS coding headaches. :)

Best wishes.
User avatar
Sharley
AF Moderator
 
Posts: 3316
Joined: 03. October 2008 05:10
Location: Yeppoon, Australia Time Zone: GMT/UTC+10
Operating System: Win 7 Pro 32bit/XP Pro SP3

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 06. June 2011 10:06

Thank you very much for the help with the validators.

The HTML is now down to one warning (Using Direct Input mode: UTF-8 character encoding assumed), don't really understand why or how to solve it...

The CSS I will keep as it is, since I really want the cool new CSS3 features atleast in some browsers. :)


There is one question I yet havn't got an aswer to, and that is: Why does my website look diffrent in the same browser (IE9) as I explained earlier:
Phailip wrote:If I run my .htm locally (C:\xampp\htdocs\start\index.htm) it looks like this:
http://i55.tinypic.com/18oso2.png

When I run it with XAMPP (http://127.0.0.1/start/) it looks like this:
http://i53.tinypic.com/lccy1.png


I don't think this is on the browser side. If it is, Microsoft has got some problems...
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Altrea » 06. June 2011 17:06

Does your site render different locally and from Apache in Firefox too?
Then you can debug your output and all external ressources (and paths) with the Firebug extension.
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8286
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 06. June 2011 20:00

It looks exactly the same from both locations while using firefox, but thanks for the tip
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Altrea » 06. June 2011 20:29

Okay, than my last idea:

IE compatibility / rendering mode.
IE does have different compatibility modes which takes effect in very different situation (Intranet, Internet, local file, ...).

You can check out which rendering engine IE uses with a little snippet of javascript
Code: Select all
javascript:alert(document.documentMode);


you can check for standard or quirks mode too, but thats a deprecated feature:
Code: Select all
javascript:alert(document.compatMode);


P.S.: These Snippets can be used in the browsers address bar right after finished rendering
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8286
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Why does my website's code render wierd in IE9?

Postby Altrea » 06. June 2011 20:55

wole wrote:This is a indicator for a syntax-error in CSS or other links to a file in this web-file.

Yeah, but he will keep it as it is, so don't push him to the right direction, please :mrgreen:
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8286
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 06. June 2011 21:04

Altrea wrote:P.S.: These Snippets can be used in the browsers address bar right after finished rendering


If I enter those "snippets" in IE9 it forwards me to a website called: http://www.plusnetwork.com/
In firefox is says "undefined" on the first one and "CSS1Compat" on the other.

And btw, could you please explain more about this?
wole wrote:This is a indicator for a syntax-error in CSS or other links to a file in this web-file.
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 06. June 2011 21:19

I got it working with IE, it said "9", dunno what it means so could you be kind and tell me? :)
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Altrea » 06. June 2011 21:21

Phailip wrote:
Altrea wrote:P.S.: These Snippets can be used in the browsers address bar right after finished rendering


If I enter those "snippets" in IE9 it forwards me to a website called: http://www.plusnetwork.com/

Doublecheck if the javascript: stays in front of the alert. IE9 cut this of if you copy and paste this in the address bar

Phailip wrote:In firefox is says "undefined"

Sure, this is a IE only command. Firefox don't use IE rendering engines.
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8286
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Why does my website's code render wierd in IE9?

Postby Altrea » 06. June 2011 21:23

Phailip wrote:I got it working with IE, it said "9", dunno what it means so could you be kind and tell me? :)

That says that IE is rendering your site in IE9 standard compliant rendering mode.

You have to compare with this command your two different requests (local and with Apache request)
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8286
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 06. June 2011 21:25

It says "7" from the apache. We are getting somewhere! :D
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Re: Why does my website's code render wierd in IE9?

Postby Altrea » 06. June 2011 21:28

So your IE rendered your Apache request in IE7 standards complaint mode. IE7 rendering engine is different in some rendering actions than IE9
We don't provide any support via personal channels like PM, email, Skype, TeamViewer!

It's like porn for programmers 8)
User avatar
Altrea
AF Moderator
 
Posts: 8286
Joined: 17. August 2009 13:05
XAMPP version: several
Operating System: Windows 10 Pro x64

Re: Why does my website's code render wierd in IE9?

Postby Phailip » 06. June 2011 21:32

Is there a sulotion to this, so the visitors IE always use 9?
Phailip
 
Posts: 9
Joined: 05. June 2011 15:06

Next

Return to XAMPP for Windows

Who is online

Users browsing this forum: No registered users and 51 guests