Skip navigation
point hvnwrd
Currently Being Moderated

Sites and IE

Jan 23, 2013 7:50 AM

What do I need to fix/add to make this site look like it SHOULD in Internet Explorer?  http://www.geishagollsiamese.com/Geisha.html 

 

I created it in Chrome...looks fine there, and Firefox...but IE...it does some really weird things.  I'd like to fix that for her if I can.

 

Appreciate your help.

 

Melody

 
Replies
  • Currently Being Moderated
    Jan 23, 2013 7:58 AM   in reply to point hvnwrd

    IE does things differently than Chrome/FF.  Some developers use CSS hacks for IE.

     

    ^_^

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 8:38 AM   in reply to point hvnwrd

    I'm not saying don't worry about it.  I'm not very good with CSS, though, so don't know what advice to give.

     

    ^_^

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 9:33 AM   in reply to point hvnwrd

    I'm having the same problem with my website.  I'm a designer and really do not understand coding.  Here is my site.

    http://mccraryproductions.com

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 9:43 AM   in reply to WolfShade

    Your fonts appear to be the problem.

     

    "Chinese Takeaway" is not installed on my machine, so all I see is the Comic Sans back-up in most my browsers, but IE for some reason gives me a totally different font. Here are some screenshots, the first is FF, the second is IE on the same machine...

     

    FF-version.jpg

    IE-version.jpg

     

    To import fonts correctly when you're not using the base websafe fonts like Arial, Verdana and Times, and to cover all browsers, you need to use the @font-face rule with at least two file types, a .eot for Internet Explorer and a .ttf for everything else. Or you can use a link in your head section from Google WebFonts or another service to serve your font choices.

     

    @font-face Rule: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

    Google Web Fonts: http://www.google.com/webfonts

     

    Also, remove <title>styles.css</title> from the .css file. HTML cannot be in your css file.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2013 7:46 AM   in reply to point hvnwrd

    The german info is coming from an iframe on that page. It's a page unavailable error.

     

    The urls in your @font-face rule need to point to the actual font files you're using. When I click on any of the links you provided to the fonts I get a 404 File Not Found Error. Make sure you are linking to the exact file location of the fonts.

     

    It looks like you are supposed to download the fonts and add them to your server from that service. If that is the case, they need to then be uploaded to your server and linked in your @font-face rule.


    EDIT: Actually, that site only appears to allow you to download a .ttf font for use in a graphic program like Photoshop. They don't appear to have fonts available for web use.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2013 8:08 AM   in reply to point hvnwrd

    Adding .eot at the end of the .ttf file won't work. You're going to need an actual .eot version of that font in order for IE to work right on computers that don't have Chinese Takeaway installed on them.

     

    You need both physical files in order for your site to display correctly across all browsers.

     

     

    EDIT: I would search Google Fonts: http://www.google.com/webfonts or Font Squirrel http://www.fontsquirrel.com/fontface to find something similar to the Chinese Takeaway. Then at least you'll have what you need to get it working cross-browser.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2013 8:31 AM   in reply to point hvnwrd

    The files are in the right spot now, I can see them when I attempt a download.

     

    The second src: should be removed.

     

    So...

     

    @font-face {

            font-family: "Chinese Takeaway";

            src: url("font/CHINESETAKEAWAY.ttf"),

            src: url("font/CHINESETAKEAWAY.eot"); /* IE9*/

     

    to

     

    @font-face {

            font-family: "Chinese Takeaway";

            src: url("font/CHINESETAKEAWAY.ttf"),

      url("font/CHINESETAKEAWAY.eot"); /* IE9*/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2013 8:51 AM   in reply to point hvnwrd

    There we go. IE then FF...

     

    IE-version2.jpg

    ff-version2.jpg

     

    Looks good on this end.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points