17 Replies Latest reply: Jan 24, 2013 9:00 AM by point hvnwrd RSS

    Sites and IE

    point hvnwrd Community Member

      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

        • 1. Re: Sites and IE
          WolfShade Community Member

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

           

          ^_^

          • 2. Re: Sites and IE
            point hvnwrd Community Member

            Yes.  Thank you.  Know it's (IE) not a favorite out there...for lots of reasons.  I know there is css to fix this...just don't know what exactly that I should be doing.  (I don't know a whole lot.)

             

            Are you saying maybe I shouldn't worry about it then?  

             

            My site http://pointheavenwardsiamese.com/ has some differences in IE...but NONE like hers.

             

            Thank you for your reply.

             

            Melody            

            • 3. Re: Sites and IE
              WolfShade Community Member

              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.

               

              ^_^

              • 4. Re: Sites and IE
                182255*km

                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

                • 5. Re: Sites and IE
                  Jon Fritz II MVP

                  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.

                  • 6. Re: Sites and IE
                    point hvnwrd Community Member

                    Had company all afternoon.  I will check this all out more thoroughly.  Seeing your suggestions and making changes.  Thank you for your reply...I just very much appreciate it!!

                     

                    I've used a link in the head section before, will see if that's something I can do again.

                     

                    Thank you again!!!

                     

                    Melody

                     

                          

                     

                                 pointheavenwardsiamese.com                                  openwindowswebdesign.com  

                     

                                            

                     

                                

                    • 7. Re: Sites and IE
                      point hvnwrd Community Member

                      Goodness I do not know if I did this right.

                       

                      I have added this to my css.

                       

                      @font-face {

                              font-family: "Chinese Takeaway";

                              src: url("http://www.dafont.com/chinese-takeaway.ttf"),

                              src: url("http://www.dafont.com/chinese-takeaway.eot"); /* IE9*/

                      }

                       

                      Is this correct?  Is this all that it looks like I need to do for IE to display the Chinese Takeaway font?

                       

                      On my end (my computer IE...Windows 7) it is still distorting the page.  I have (for example on my home page http://www.geishagollsiamese.com/Geisha.html) it looks like two background images.  One on top of the other.  The navigation is not the same length as the body section..it's shorter.  And the "Created just for you" link at the bottom, is off to the left and not centered.  The page looks bad.

                       

                      Noticed on the Contact page (http://www.geishagollsiamese.com/Contact.html) that it has in the box where the contact form should be the words "Diese Präsenz ist leider nicht verfügbar."  Don't know what that is!

                       

                      Also noticed that the photo gallery is showing a black background rather then the cream color.  (Not too worried about that.  Not what I chose/have...but it's okay to leave.)

                       

                      So appreciate you alls help.

                       

                      Thank you.

                       

                      Melody

                      • 8. Re: Sites and IE
                        point hvnwrd Community Member

                        I have also tried this, but it doesn't seem to make a difference.  (With or without the .font)

                         

                        @font-face {

                                font-family: "Chinese Takeaway";

                                src: url("http://www.dafont.com/chinese-takeaway.font.ttf"),

                                src: url("http://www.dafont.com/chinese-takeaway.font.eot"); /* IE9*/

                        }

                        • 9. Re: Sites and IE
                          Jon Fritz II MVP

                          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.

                          • 10. Re: Sites and IE
                            point hvnwrd Community Member

                            Okay Jon, I have created a font folder, and then uploaded the Chinese Takeaway file into it.

                             

                            I have changed my css:

                             

                            @font-face {

                                    font-family: "Chinese Takeaway";

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

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

                            }

                             

                            How does this look?

                            • 11. Re: Sites and IE
                              point hvnwrd Community Member

                              Just saw your edit.  Then this font will not work on IE, is that correct?  I'm not going to be able to fix her site?

                              • 12. Re: Sites and IE
                                Jon Fritz II MVP

                                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.

                                • 13. Re: Sites and IE
                                  point hvnwrd Community Member

                                  Okay.  I have used a font converter and have now added the ttf in eot (to my font folder).

                                   

                                  My css:

                                   

                                  @font-face {

                                          font-family: "Chinese Takeaway";

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

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

                                  }

                                   

                                  I am not seeing any changes on my end.  Would you mind looking (http://www.geishagollsiamese.com/Geisha.html) and seeing if it is working on yours. 

                                  • 14. Re: Sites and IE
                                    Jon Fritz II MVP

                                    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*/

                                    • 15. Re: Sites and IE
                                      point hvnwrd Community Member

                                      Thank you Jon.  Appreciate you!

                                       

                                      I have also removed the second "src:"

                                       

                                      Thank you.

                                      • 16. Re: Sites and IE
                                        Jon Fritz II MVP

                                        There we go. IE then FF...

                                         

                                        IE-version2.jpg

                                        ff-version2.jpg

                                         

                                        Looks good on this end.

                                        • 17. Re: Sites and IE
                                          point hvnwrd Community Member

                                          Thanks Jon.  I wouldn't have gotten it without your help.  Thankyou.

                                           

                                          Melody