Why does my website's code render wierd in IE9?
Posted: 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:
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:
and the CSS:
I hope you guys can help me solve this.
Thanks,
Philip
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