Help us test the new Databridge BETA with MySQLi support

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Design Extender › CSS Menu Writer › internet explorer is the bane of my existence (menu no worky)

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

Thread began 9/16/2009 10:07 pm by jasonayre366396 | Last modified 9/22/2009 7:06 pm by Jason Byrnes | 3184 views | 9 replies |

9/16/2009 10:07 pm | #1 jasonayre366396

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

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.

9/17/2009 12:18 pm | #2 Jason ByrnesWebAssist

Look for the following code on your page:

html:

<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:

html:

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

9/17/2009 2:19 pm | #3 jasonayre366396

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

9/17/2009 4:41 pm | #4 Jason ByrnesWebAssist

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

html:

<!-- This page created with ProStores technology. http://www.prostores.com                   -->
<!-- ProStores technology portions copyright 1997-2009. ProStores, Inc. All Rights Reserved. -->
<!-- Designated trademarks and brands are the property of their respective owners.           -->

<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:

html:

<!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">
<!-- ProStores technology portions copyright 1997-2009. ProStores, Inc. All Rights Reserved. -->
<!-- Designated trademarks and brands are the property of their respective owners.           -->

9/17/2009 5:14 pm | #5 jasonayre366396

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 :)

9/18/2009 6:12 pm | #6 Jason ByrnesWebAssist

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.

9/21/2009 4:23 pm | #7 jasonayre366396

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?

9/21/2009 4:57 pm | #8 Jason ByrnesWebAssist

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;
}

9/22/2009 1:48 pm | #9 jasonayre366396

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?

Originally Said By: Jason Byrnes

9/22/2009 7:06 pm | #10 Jason ByrnesWebAssist

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.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.