Hi all. My site http://jay019.com/test/ works great in Firefox. For some reason it wont work in Internet Explorer. In particular the drop down lists are not displaying the way one would expect. Can someone please help me work out how to get the site working in IE. To make matters worse I dont get much time to test it in IE being the linux user that I am. Anyway, any help would be appreciated. The styles in particular are held in the file /test/products.css and I have file specifically for Internet Explorer name /test/retardstyle.css The main offenders seem to be expander, expander1, menuheaders and menubuttons. Here is the code involved... index.html <div class="sidebox"> <ul class="expander"> <li class="menuheaders"><a href="javascript:toggle('submenu1')">Geek Toys</a></li> <li style="display: none;" id="submenu1"> <ul class="expander1"> <li class="menubuttons"><a href="#">Remote Control</a></li> <li class="menubuttons"><a href="#">Fun Stuff</a></li> <li class="menubuttons"><a href="#">LED and Laser</a></li> </ul> </li> <li class="menuheaders"><a href="javascript:toggle('submenu2')">Wireless</a></li> <li style="display: none;" id="submenu2"> <ul class="expander1"> <li class="menubuttons"><a href="#">Analyzers</a></li> <li class="menubuttons"><a href="#">Toys</a></li> <li class="menubuttons"><a href="#">RFID</a></li> </ul> </li> <li class="menuheaders"><a href="javascript:toggle('submenu3')">Computers</a></li> <li style="display: none;" id="submenu3"> <ul class="expander1"> <li class="menubuttons"><a href="#">Media Centres</a></li> <li class="menubuttons"><a href="#">Servers</a></li> <li class="menubuttons"><a href="#">Laptops</a></li> </ul> </li> <li class="menuheaders"><a href="#">Books</a></li> </ul> </div> Code (markup): the css... .sidebox { background-color:#cccc99; border:1px solid #000; border-top:0px; margin-top: 0px; line-height: 14px; padding:5px; font-size:8pt; } .sidebox ul li a:hover { background: #DDDD99; color: #000000; text-decoration: none; } .menuheaders a, .menuheaders li { border: 1px solid #000000; padding: 4px 4px 5px 9px; margin: 0px -6px -1px -36px; display: block; text-decoration: none; color: #000000; } .expander { list-style-type: none; list-style-image: none; margin: -6px 0px -6px -10px; } .expander1 { list-style-type: none; list-style-image: none; margin: 1px -6px -1px -76px; padding: -1px 0 0 0; } .menubuttons a, .menubuttons li { background: #e7e7ba; border:1px solid #000; border-left: 1px; border-right: 0px; border-top: 1px; display: block; margin: 0 1px 0 1px; padding: 5px 0px 7px 10px; text-decoration: none; color: #000000; } Code (markup): the javascript... function toggle(list){ var listElementStyle=document.getElementById(list).style; if (listElementStyle.display=="none") { listElementStyle.display="block"; } else { listElementStyle.display="none"; } } Code (markup): The files involved... http://jay019.com/test/index.html http://jay019.com/test/products.css http://jay019.com/test/retardstyle.css Cheers. Jay
Well, you've got a LOT of issues in there. PT sized fonts with a px line-height is BOUND to fail. You've got ABSURD amounts of borders, margins and padding all vying for control... it's got problems. Man, I advocate negative margins - but what the devil? Here, try this on for size: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Expanding Menu</title> <style type="text/css"> * { margin:0; padding:0; } .expander { list-style:none; color:#000; background:#CC9; font:8pt/10pt arial,helvetica,sans-serif; } .expander ul { display:none; list-style:none; } .expander .expand ul { display:block; } .expander li { display:block; } .expander ul li { background:#E7E7BA; } .expander a { display: block; height:10pt; /* should be same as line-height */ padding:5px 10px; text-decoration: none; color:#000; border-bottom:1px solid #000; } .expander a:active, .expander a:focus, .expander a:hover { background: #DD9; } </style> <script type="text/javascript"> function toggle(list){ var listElement=document.getElementById(list); listElement.className=((listElement.className=='') ? 'expand' : ''); } </script> </head><body> <div class="sidebox"> <ul class="expander"> <li id="submenu1"> <a href="javascript:toggle('submenu1')">Geek Toys</a> <ul> <li><a href="#">Remote Control</a></li> <li><a href="#">Fun Stuff</a></li> <li><a href="#">LED and Laser</a></li> </ul> </li> <li id="submenu2"> <a href="javascript:toggle('submenu2')">Wireless</a> <ul> <li><a href="#">Analyzers</a></li> <li><a href="#">Toys</a></li> <li><a href="#">RFID</a></li> </ul> </li> <li id="submenu3"> <a href="javascript:toggle('submenu3')">Computers</a> <ul> <li><a href="#">Media Centres</a></li> <li><a href="#">Servers</a></li> <li><a href="#">Laptops</a></li> </ul> </li> <li><a href="#">Books</a></li> </ul> </div> </body></html> Code (markup): That should be functionally identical, and is a heck of a lot less code/classes. Ideally I'd attach a onload event to trap the expander class's parent elements instead of using ID's, but that's some heavy duty coding.
Cheers deathshadow, That did the trick! It also works in IE 6 which is the browser I was targeting. Being a PHP coder trying to learn CSS has its ups and downs. I should have thought of using the ternary operator in javascript as I've just started using it a lot in php. lol. Only problem is that it sits within a couple of divs, sidebar and sidebox... Which both have an equal amount of craziness in regards to padding and margins. I probably should have posted the whole file instead of just the part that was the problem as it seems the whole thing has its problems. lol. I'll have another go at it today and see if I can make it work. But thanks for showing me how it should be approached, thats a great start. Jay