Submit Your Article Forum Rules

Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: AAAAAAAAAAA IE is giving me a headache!!!

  1. #1
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155

    Exclamation AAAAAAAAAAA IE is giving me a headache!!!

    www.theangelsmuse.com Works in every browser BUT IE. How do I fix this? I haven't run it through the validator. I am in the process of doing that now.

    Oh, and I already consulted the previous thread about this, and used the fix. It didn't work.
    Last edited by Anissa; 02-28-2012 at 02:36 PM.

  2. #2
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,772
    Still rooting through the source code for issues, but noticed one that you can fix right away--the image thumbnails. At present they are 1125x900 and 113 KB (the one I downloaded). This is adding tremendous weight to the page's download. Your thumbnails should be the exact size you are displaying (115x85), not reductions of a much larger image by means of the img width & height attributes.

    Will look through source and get back to you.

  3. The following user agrees with weegillis:
    LD
  4. #3
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,772
    You might need to add either 'modernizr' or the HTML5 shim to help IE with the HTML5 elements that it doesn't recognize (so it can't apply CSS).

  5. #4
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    Officially confused. Looking up the first thing.

    Is the shim the .js thing or I am eluding to the java that isn't needed anymore? I looked at modernizr. went cross-eyed. lol I am going to need a whole day for that one I think.

    Btw, thanks for coming to my rescue again.
    Last edited by weegillis; 02-28-2012 at 04:04 PM. Reason: merged for topic flow

  6. #5
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,772
    The shim you want is this:

    HTML Code:
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    Just drop this into the HEAD, before any style sheets (such as just under your meta description/keywords tags). But it is not the real problem solver, just a kludge for IE 8 and below. Good to have in all our HTML5 documents.

    I'm seeing your problem in IE 9, so obviously my advice above is no help. Will need to look a little closer.

  7. #6
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    the modernizr worked. ty ty ty ty ty ty. Once again you have come to my rescue. If you ever need a piece of jewelry or an herbal, let me know. I so owe you one!

  8. #7
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,772
    Picking away: I see a comment at the beginning of your document:
    <!-- HTML 5 -->
    To be a valid document, there can be nothing before the DOCTYPE, including html comments. They are outside of the root html element, so not HTML at all, just gibberish to any browser. IE is probably just not very forgiving. Try removing that and see what happens.

  9. #8
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    In the process now.

  10. #9
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,772
    Glad to hear that! I would like to segue into your code, for a moment:
    HTML Code:
    <!-- HTML5 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="index.css">
    <meta name="description" content="...">
    <meta name="keywords" content="...">
    <title>Angels' Muse Enterprises|Party Crafts|Handmade Jewelry|Herbal Products</title>
    <!--[if IE]>
    <script src="html5forie.js"></script>
    <![endif]-->
    </head>
    Could be refashioned like so:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Angels' Muse Enterprises|Party Crafts|Handmade Jewelry|Herbal Products</title>
    <meta name="description" content="...">
    <meta name="keywords" content="...">
    <!-- this one -->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- OR this one, not both, and BEFORE your style sheet -->
    <!--[if IE]>
    <script src="html5forie.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="index.css">
    DOCTYPE, HTML root opentag with lang attribute, HEAD opentag; META charset tag, TITLE, META description, META keywords, SHIM, LINK to style sheet... in this order.

  11. #10
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,772
    More segue into markup and style. Focussing on your main horizontal nav bar, you can prevent the jumping if you style both the static and active links the same way; i.e., match their line-height and font-size, and put a border on the static link that matches the background color. This way both states use the exact same screen area, and the jitters will be gone.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •