Search code examples
htmlcssinternet-explorercross-browserfont-face

IE 8 CSS problems

My website is looking fine on IE9, but not on IE8. The Davideugenepeterson class and id is not working. Can anyone point out where the problem is coming from? Here's my CSS:

   @charset "utf-8";

body
{ min-width:839px;
  max-width:none;
  margin-left:0;
  margin-top:0;
  margin-right:0;
  margin-bottom:0;
  background-color:#fff; }

#Container
{ margin-left:auto;
  margin-right:auto;
  position:relative;
  overflow:auto; }

  #Banner
{ position:relative;
  background-color:#000;
  height:37px;
  width:auto;
  z-index:1; }

    #Theportfolioof
{
  position:absolute;
  text-align:center;
  width:170px;
  height:37px;
  left:-192px;
  top:9.4px;
  bottom:0;
  right:0px; }

.Theportfolioof
{ white-space:nowrap;
  color:#888888;
  text-align:center;
  letter-spacing:1.3px;
  text-transform:uppercase;
  word-spacing:5px;
  line-height:3px;
  font:normal 21px "Quaver Sans";
  font-weight:100;
  margin-left:auto;
  margin-right:auto;
  overflow:visible;
  z-index:1; }

 #Davideugenepeterson
{ position:absolute;
  text-align:center;
  width:170px;
  height:37px;
  left:182px;
  top:1px;
  bottom:0px;
  right:0px; }

.Davideugenepeterson
{ white-space:nowrap;
  color:#FFF;
  text-align:center;
  letter-spacing:0.8px;
  text-transform:capitalize;
  word-spacing:4px;
  line-height:3px;
  font :normal 18px "Pacifico";
  font-size:18px;
  font-weight:100;
  margin-left:auto;
  margin-right:auto;
  overflow:visible;
  z-index:1; }




#Logo
{ width:117px;
  height:117px;
  background-image:url(images/logo.png);
  background-repeat:no-repeat;
  position:absolute;
  left:0;
  top:37px;
  bottom:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  z-index:1; }

Here's my HTML:

    <body>
    <div id="Container">
    <div id="Banner"><div id="Theportfolioof" class="Theportfolioof">the portfolio of</div><div id="Davideugenepeterson" class="Davideugenepeterson">david eugene peterson</div></div>
    <div id="Logo"></div>
    </div>
  </div>
    </div>
    </body>

Here's the IE9 browser screenshots: This is how it's supposed to look IE9

And here's the difference with IE8. IE8

I've validated it with W3C, The css is valid for html 4.01 strict and the html is valid as well. Anyone know what the issue is? It's like it's not even recognizing my set font. (Yes all the fonts are installed correctly on my server)

Solution

  • You are probably testing it on different PCs. The one with IE 9 has Pacifico and Quaver Sans installed, the other one does not.

    This is not how web fonts work. If you want to use a custom one, you must define font-family in CSS:

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

    where url() containes the path to the font relative to CSS file.

    If you don't have font files in all of the formats above use Font Squirell's @font-face generator. If you wonder do you really need all of them check The New Bulletproof @Font-Face Syntax.