Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

IE8 bug menu CSS


  • Please log in to reply
No replies to this topic

#1 joerg2008

joerg2008

  • Members
  • 15 posts
  • OFFLINE
  •  
  • Local time:12:29 PM

Posted 24 November 2009 - 03:45 PM

I hope this is the appropriate forum for my question.

The menus on my site work fine on FF and basically on all IE versions, except on the new IE8. There is always some extra space underneath the menus and on some other pages the design is just not what it used to be (the menus are either smashed together or there is a strange gap). Itís a bit awkward to explain, but if you have a look on my site http://www.casinomadness.de and click through the big green menu buttons on top then hopefully you can see what I mean, itís always the left menus on these pages. Does anybody have an idea or maybe had a similar problem? This is my CSS code, but I am not sure if thatís the problem. Any help would be much appreciated J

CSS Menu Code:

**************** menu coding *****************/


#menu {
position:relative;
z-index:100;
width: 180px;
background: #eee;
margin-bottom:0; /* was 20px */

}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2, #menu div.spacer, #menu h3 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu div.spacer {
background-color:#258722;
padding: 5px 0 5px 4px;
}

div.spacer img {
width:170px;
height:51px;
}


#menu h2 {
color: #fff;
background: #258722;
font-size:12px;
}

#menu h3 {
color: #fff;
background:#5FB145;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu a img {
position:absolute;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


This is part of the left-menu-code of this page: http://www.casinomadness.de/introduction.php
and the menu seems fine??

<div id="content-left">

<!-- Menu Left Start -->
<div id="menu">
<ul>
<?php
// menu introduction
include "left-menu";
?>
</ul>
</div>
<!-- Menu Left End -->
<h3> Software Platforms</h3>

</div> <!-- Content left end -->

I am greatful for any suggestions. Thanks!

BC AdBot (Login to Remove)

 





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users