internet explorer is the bane of my existence (menu no worky) [Archive]

View Full Version : internet explorer is the bane of my existence (menu no worky)

jasonayre366396

09-16-2009, 07:07 PM

www.socalstyleonline.com

Works fine in Firefox, Safari, but falls apart in IE. Whole page does actually. But specifically I am getting a message saying cssmw is undefined.

Any assistance would be very much appreciated.

Jason Byrnes

09-17-2009, 09:18 AM

Look for the following code on your page:

<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw0',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw0',{select_current: 0, orientation: 1}); }, true); }</script>

and change it to:

<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw0.intializeMenu('cssmw0',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw0.intializeMenu('cssmw0',{select_current: 0, orientation: 1}); }, true); }</script>

jasonayre366396

09-17-2009, 11:19 AM

thanks jason that fixed the error on the page. however, the menu itself still doesen't work for me in IE, any ideas?

Jason Byrnes

09-17-2009, 01:41 PM

When I view source of your page, I see the following at the top:




<html xmlns="http://www.w3.org/1999/xhtml">

there are a couple things wrong here. both of which are causing IE to render in quirls mode which is breaking the menu.

1) There can be no HTML on the page before the <doctype... > tag.

2) You do not have a <doctype..> tag. For standards compliance, you must specify a doctyp for the page as the first tag.

change the top of your page to:

<!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">

jasonayre366396

09-17-2009, 02:14 PM

you are a genious, the menu is now showing up, but that has brought me to a new IE failure :)

-- now, the menu works, but the first LI in the list is not showing up and does not appear to be working @ all because if you try and move your mouse down to the other categories, it disappears. Any ideas on that?

Also if it's not too much trouble, since you seem to be quite proficient in exterminating IE bugs, my little brand logos on the left are appearing way too far left and overlap my content div, but once again only in IE.

Thanks again for all the help I would be smashing my head into my keyboard right now without it :)

Jason Byrnes

09-18-2009, 03:12 PM

For the menu problem,

change the .topWood selector, remove the position: relative; elememt:

.topWood {
background-image: url("layout/h1828.jpg");
background-repeat: repeat-x;
/*position: relative;*/
border-top:1px #889898 inset;
line-height:30px;
height:30px;
width:100%;
}

I cant find the problem in the logo's along the left, sorry.

jasonayre366396

09-21-2009, 01:23 PM

k, removed that, it is now semi fixed. there is still a very small gap between the menu when u rollover the element, which makes it difficult to select the menus below. Also if you go to a product detail page, the menu when expanded is hidden behind the add to cart button, I am not sure why?

Jason Byrnes

09-21-2009, 01:57 PM

I am not able to reproduce the gap when I import your site. I would suspect that thre is some conflicting CSS or java script causing the issue. Try removing any javascript you have added to the page to see if your still have the problem. Then try removing any of your CSS Form the page till you find the culprit.

Remember to make a backup before you start removing parts.

The over lap on the add to cart page is because of the position relative setting on the .productTop selector, change it to:

.productTop {
background-image: url("http://www.socalstyleonline.com/layout/producttopspan.png");
background-repeat: repeat-x;
/*position: relative;*/
width:100%;
height:33px;
}

jasonayre366396

09-22-2009, 10:48 AM

Ok I did that (by the way when you commented it out, you meant to delete it alltogether right? because doesent that essentially serve the same purpose from a viewing the site on your browser perspective?) - and it fixed the problem now I am just having a bit of trouble repositioning the elements but I think I can figure it out.

So is using relative positioning less reliable and more bug potent than non relatively positioning elements, or was I just doing something wrong in particular with my usage of relative position?

I am not able to reproduce the gap when I import your site. I would suspect that thre is some conflicting CSS or java script causing the issue. Try removing any javascript you have added to the page to see if your still have the problem. Then try removing any of your CSS Form the page till you find the culprit.

Remember to make a backup before you start removing parts.

The over lap on the add to cart page is because of the position relative setting on the .productTop selector, change it to:

.productTop {
background-image: url("http://www.socalstyleonline.com/layout/producttopspan.png");
background-repeat: repeat-x;
/*position: relative;*/
width:100%;
height:33px;
}

Jason Byrnes

09-22-2009, 04:06 PM

Yes, can delete it or comment it. I commented it so you would see the change being made.

using relative positioning on your other elements was resetting the stacking order so that they where being given a higher z-index.

The CSS Selectors for the menu items where more specific, so could not be given a z-index that would override the less specific elements.