Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Need Help Fixing IE Bug...

M

MegaMan1311

macrumors regular
Original poster
Jun 30, 2007
216
0
USA
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.
 

Attachments

  • iebug.JPG
    iebug.JPG
    160.2 KB · Views: 108
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
 
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+
 
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:

...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...
Click to expand...

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
 
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.
 
MegaMan1311 said:
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?
Click to expand...

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.
 
Ok. Thanks.

Also, I've fixed the link. I really need to start checking to see if they work before I post them...
 
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.
 
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.
 
MegaMan1311 said:
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.
Click to expand...

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.
 
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!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back