Need Help Fixing IE Bug...

Discussion in 'Web Design and Development' started by MegaMan1311, Jul 22, 2008.

  1. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #1
    Ugh... I really don't like IE6. It works in every browser except IE6. Here is what is wrong.

    I am creating a horizontal navigation bar out a styled list, with a different background gradient on each button and on top of it is a PNG that has the text on it. That PNG has a script that increases the margin on it to make it move onmouseover and a script to fix IE transparency issues.

    All of that works, except for the fact that in IE6, the 2nd of the 5 buttons gets wrapped below into the first button and the first button is having issues because of that. The other buttons work great.

    Here is the URL: I made a redirect page for this to hopefully avoid Search Engines from crawling this page. I doubt it will work, but oh well.
    Here

    I'm going to edit this post with a print screen in a minute.

    EDIT: The print screen is attached.
     

    Attached Files:

  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Your redirect page didn't work (error 404, page not found) so either include a working link or please import the scripts in question so we can looksee.
     
  3. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #3
    Sorry about that. I just changed it to a direct link. It works now.
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Ah, much better.

    I don't have IE6 but I believe ya that it renders oddly. I am pretty sure I know why, here is the relevant page source, copied verbatim, look carefully at the end of the 4th line:

    Code:
    !-- Each li is a menu header.  Each div with a id starting with drop_ is a drop down box.  Each div in those boxes is a menu item. -->
    <ul id="navigation">
        <li id="navr">
            <div class="nav_inside"><a href="index.php"><img src="images/navigation/home-t.png" alt="Home" class="fixpng" /></</div>
        </li>
        <li id="navb">
            <div class="nav_inside"><a href="products.php"><img src="images/navigation/products-t.png" alt="Products" class="fixpng"/></a></div>
        </li>
        <li id="navg">
            <div class="nav_inside"><a href="specials.php"><img src="images/navigation/specials-t.png" alt="Specials" class="fixpng"/></a></div>
        </li>
        <li id="navp">
            <div class="nav_inside"><a href="about.php"><img src="images/navigation/about-t.png" alt="About" class="fixpng"/></a></div>
        </li>
        <li id="navy">
            <div class="nav_inside"><a href="contact.php"><img src="images/navigation/contact-t.png" alt="Contact" class="fixpng"/></a></div>
        </li>
        <br class="clear" />
    </ul>
    </div>
    Look specifically at the "</" just before the closing div. This typo is fudging up MSIE 6.0 which parses differently than other browsers for this situation (incompleted closing tag). Fix that, it is apparently supposed to be a closing anchor tag, i.e. </a>. Typos will get ya, every time. I know, I've made this kind of mistake a million times, so have we all.

    BTW, I also want to point out two things related to your code...

    1) If you're trynig to do XHTML transitional, I suggest the following DTD and headers in addition to your own custom headers:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    
    2) You should remove the </a> closing tag if you use /> on the end of img tags (or any "open" HTML tag, i.e. no content between open/close tags) in an XHTML 1.0 transitional environment. Meaning, no need to add both.

    Fix all that, run your site through a validator next time like the one here and you can identify and fix most of this kind of stuff more easily. Even if this is not the error, you'll find it via validation. Cheers and thanks for posting the link, nice looking site.

    -jim
     
  5. jaikob macrumors 6502

    jaikob

    Joined:
    Jul 1, 2008
    Location:
    Freeland, MI
    #5
    Its your javascript, please post links to it so we can take a peak at it.

    or, I suggest you take your javascript out, and see if the layout is fit.

    Btw, IE6 is throwing a javascript error:

    Line: 3
    Char: 13516
    Error: 'style' is not null or an object
    Code: 0

    I left IE6 5 months ago, and I've never looked back. I don't develop for IE6 only 7+
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Please note for the record the typo I found is at the precise location between first and second button the OP described the problem with MSIE 6.0 as follows:

    I am not saying there aren't issues beyond this, or the JS plays a role, but when you say, "Its your javascript" please consider that I checked the JS code (FFox with the web dev add-on, those who use it know what I mean) and it does not target a specific content element by ID, otherwise all the png's would be affected and not just one or two. The OP also uses the popular MooTools library used for a slideshow integration, based on the code comments, FYI.

    No harm, no foul, just noting the problem stated was asked and answered correctly (syntax issue with anchor tag), I'm pretty sure at this point that has to be fixed first before debugging further.

    -jim
     
  7. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #7
    SrWebDeveloper, it worked great, thanks! I prefer xhtml 1.1 instead of xhtml 1.0 transitional. It doesn't allow me to make as many mistakes without coughing up errors when validating. That keeps my code cleaner. I usually wait to run validation until I finish coding the design of the site, then I validate and create the content.

    About the links, are you saying that I can do this:
    HTML:
    <a href="myurl.php"><img src="myimage.jpg" alt="" />
    I didn't know that I could do that. Does it work in an xhtml 1.1 environment also?

    And yes, I am using mootools and to fix some IE issues I am using IE7.js and some IE hacks.

    EDIT: While working on another site for a different client, I found yet another IE bug. Ugh... I wish I could just ignore IE6. Anyways, here is the url to the site.

    This is the issue:
    When you mouse over the navigation on the left, javascript (mootools to be exact) is used to increase its position by 30 and is supposed to be overlapped by the rest of the page, creating an indent effect. This works in all browsers except IE6. In IE6, the navigation overlaps the rest of the page instead of the otherway around. I had this issue in IE7 initially as well, but resolved it using z-index. I have had no such luck with ie6. If I need to, I will make a new thread. Any suggestions?

    Thanks in advance.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Pretty sure that was a typo. The anchor tag does need a closing tag so the browser knows what content is involved in the link. It also wouldn't validate as XML.

    *The link you gave in your edit section gave me a 404 error.
     
  9. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #9
    Ok. Thanks.

    Also, I've fixed the link. I really need to start checking to see if they work before I post them...
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    For the new problem.

    CSS snippet:
    Code:
    .navitem1{
    ...
     z-index: 0;
    }
    .navitem1 div, .navitem2 div{
    ...
     z-index: 1;
    }
    I believe the second block's z-index is overriding your first z-index. Not sure why it only effects IE6 though.

    Edit: Also, when making comments in CSS use /* comment */ rather than // as a number of browsers (FF included) will complain about it, though not likely the issue here.
     
  11. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #11
    Thanks for the help, but that wasn't it. I changed it to how it was after I ran into the IE issue. I changed it back to z-index: 0 and it still doesn't work.
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    OK, got it now. In the CSS, for #left add position: relative; It at least worked for me when I downloaded the page and tried it out.
     
  13. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #13
    That worked thanks! I'm going to have to read up on position and z-index. This is the first time I've ever really used them except for hiding things off the page. Thanks again!
     

Share This Page