hi I have a problem in IE6, my buttons disappear when the mouse is on them and if i roll the window down and up again it appear again. it doesnt happen in IE7, IE8, FF thanks for your help see the problem here - kbarnea.com
Well, in general I suspect the problem is related to the use of absolute positioning of those spans inside the anchor without making the anchor a display:block or floated element, but it's kind of hard to say... Looking at the code for it, I see all sorts of oddities that could be your cause... like the 'clip' property which does not exist cross-browser, your hover states trying to slide the element instead of the background (which CAN be done, just not that way) - to be honest I'm trying to figure out how that works in ANY browser since from what I'm seeing it shouldn't... Though I would suspect that IE conditional nonsense to have something to do with it. Little tip, when you have seven stylesheets and no media types, you've probably over-thought both your CSS and your markup, and made trying to diagnose the simplest of problems a total nightmare. Without major changes, I'd just start throwing haslayout triggers like zoom:1 at the involved elements (start with the wrapping anchor) - but really I'd throw away how you are currently trying to build those elements and use just one single span (that doesn't even need a class on it) and sliding doors - which would also reduce that from three images to just one. Basically, where you have: <div class="art-nav"> <div class="l"></div> <div class="r"></div> <ul class="art-menu"><li class="item53"><a href="/index.php?option=com_content&view=article&id=46&Itemid=53"><span class="l"> </span><span class="r"> </span><span class="t">מערכות מידע ×ž×§×•×•× ×•×ª</span></a></li><li class="item56"><a href="http://joomla-e.co.il/index.php?option=com_content&view=category&layout=blog&id=37&Itemid=18"><span class="l"> </span><span class="r"> </span><span class="t">תיק עבודות</span></a></li><li class="item70"><a href="http://joomla-e.co.il" target="_blank"><span class="l"> </span><span class="r"> </span><span class="t">×ª×‘× ×™×•×ª עיצוב</span></a></li><li class="item57"><a href="/index.php?option=com_artforms&formid=1&Itemid=57"><span class="l"> </span><span class="r"> </span><span class="t">יצירת קשר</span></a></li><li class="item62"><a href="/index.php?option=com_wrapper&view=wrapper&Itemid=62" target="_blank"><span class="l"> </span><span class="r"> </span><span class="t">פתיחת קרי×ת שרות</span></a></li></ul></div> Code (markup): in the markup, I'd strip that down to what's actually needed: <div id="mainMenu"> <ul> <li> <a href="/index.php?option=com_content&view=article&id=46&Itemid=53"> ?????? ???? ???????<span></span> </a> </li><li> <a href="http://joomla-e.co.il/index.php?option=com_content&view=category&layout=blog&id=37&Itemid=18"> ??? ??????<span></span> </a> </li><li> <a href="http://joomla-e.co.il"> ?????? ?????<span></span> </a> </li><li> <a href="/index.php?option=com_artforms&formid=1&Itemid=57"> ????? ???<span></span> </a> </li><li class="last"> <a href="/index.php?option=com_wrapper&view=wrapper&Itemid=62"> ????? ????? ????<span></span> </a> </li> </ul> <!-- #mainMenu --></div> Code (markup): With the CSS being something like ... #mainMenu { list-style:none; overflow:hidden; /* wrap floats */ height:28px; /* also trips haslayout */ font:bold 12px/15px arial,helvetica,sans-serif; } #mainMenu ul { float:right; padding:3px 0; background:url(images/mainMenuBackground.png) 0 0 repeat-x; } #mainMenu li { display:inline; /* don't even TRY styling these */ } #mainMenu a { float:left; display:inline; /* fix IE margin doubling */ position:relative; padding:4px 12px; margin-right:5px; background:url(images/mainMenu.png) 0 24px no-repeat; } #mainMenu a span { position:absolute; top:0; right:-5px; width:17px; height:23px; background:url(images/mainMenu.png) -495px 24px no-repeat; } #mainMenu .last a span { width:12px; } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { background-position:0 0; } #mainMenu a:active span, #mainMenu a:focus span, #mainMenu a:hover span { background-position:-495px 0; } Code (markup): Untested code, I have time tomorrow I'll make a working demo of that with a mastered image - mainMenu.png would be a 512x23 version of your button, the code will auto-crop it down using sliding doors. Really, you got more complicated than need be in the markup, and it's biting you cross browser... though the page on the whole is filled with things like that. You may want to research techniques like sliding doors, since it would let you axe about two thirds of those DIV you have in there and a whole slew of classes would go with it too... From there, you could axe the mootools and other scripting that isn't doing anything useful for you - and clean it up so you don't have to do that 'send a separate stylesheet to every version of IE' nonsense.