Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other HTML Parsing through Xampp

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #30192
    kaizer1v
    Participant

    Hello Everyone,

    I am facing a minor problem with the drop down css menu in IE8.

    The problem is, when I open the html file directly (by double clicking on it) in IE8, all the sub-menus (which should open on hover) are already showing and is all over the page. However, when I access the same file via http://localhost (using xampp) the sub-menus are perfectly fine and they show only on hovering (as they should). This is only happening with IE8. They work perfectly in Firefox (many versions) even when on double click and even via http://localhost. I have scratched my head a lot on this and am unable to find a solution. The solution is not necessary and logically speaking no one accesses a website directly by double clicking on the index.html. It is always and should always be accessed via a server. Still, I am looking for a solution. Kindly help me out here.

    Thanks.

    #80292
    kaizer1v
    Participant

    Here is the code.
    The HTML is as below.


    <!-- Navigation Menu -->
    <ul class="menu">
    <li><a href="#"> Home </a></li>
    <li><a href="#"> About Us </a>
    <ul class="sub-menu">
    <li><a href="#"> News </a></li>
    <li><a href="#"> Media </a></li>
    <li><a href="#"> Events </a></li>
    </ul>
    </li>
    <li><a href="#"> Gallery </a>
    <ul class="sub-menu">
    <li><a href="#"> Wedding </a></li>
    <li><a href="#"> Birthday </a></li>
    <li><a href="#"> Christening </a></li>
    <li><a href="#"> Seasonal </a></li>
    <li><a href="#"> Other </a></li>
    </ul>
    </li>
    <li><a href="#"> Flavours </a>
    <ul class="sub-menu">
    <li><a href="#"> Cake and Cookies </a></li>
    <li><a href="#"> Cup Cakes </a></li>
    </ul>
    </li>
    <li><a href="#"> Portions </a></li>
    <li><a href="#"> Prices & Packaging </a></li>
    <li><a href="#"> Ordering </a></li>
    <li><a href="#"> Contact Us </a></li>
    <li><a href="#"> Testimonials </a></li>
    </ul>
    <!-- End of Navigation Menu .menu -->

    The CSS is as below.



    ul.menu
    {
    background: #2379ab;
    /*width: 980px;*/
    width: auto;
    margin: 0 auto;
    list-style: none;
    color: #FFF;
    font-size: 0.88em;
    }
    ul.menu li
    {
    background:url(../images/menu-bg.gif) repeat-x bottom;
    padding: 25px 10px 25px 10px;
    float: left;
    display: block;
    }
    ul.menu li:hover
    {
    background: #3399ff;
    }
    ul.menu li a
    {
    text-decoration: none;
    color: #FFF;
    }

    ul.menu ul.sub-menu
    {
    visibility: collapse;
    background:url(../images/sub-menu-bg.gif) repeat-x bottom;
    position: absolute;
    /*width: 350px;*/
    width: 150px;
    border-left: 1px solid #b8cdd9;
    border-right: 1px solid #b8cdd9;
    border-bottom: 1px solid #b8cdd9;
    top: 239px;
    padding: 0px;
    margin: 0px;
    font-size: 0.88em;
    margin-left: -10px;
    }
    ul.menu ul.exceptional-sub-menu /* For the last sub menu that will go beyond page */
    {
    visibility: collapse;
    background:url(../images/sub-menu-bg.gif) repeat-x bottom;
    position: absolute;
    width: 350px;
    border-left: 1px solid #b8cdd9;
    border-right: 1px solid #b8cdd9;
    border-bottom: 1px solid #b8cdd9;
    top: 68px;
    padding: 0px;
    margin: 0px;
    font-size: 0.88em;
    margin-left: -270px;
    }
    ul.menu ul li:hover
    {
    background: none;
    }
    ul.menu ul li a:hover
    {
    color: #032136;
    }
    ul.menu ul li
    {
    background: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    width: 150px;
    padding-bottom: 10px;
    padding-top: 10px;
    }
    ul.menu ul li a
    {
    display: inline-block;
    height: inherit;
    color: #2275af;
    }
    ul.menu li:hover > ul
    {
    visibility: visible;
    }

    ul.menu ul.sub-menu ul.desc li
    {
    padding: 0px;
    }
    ul.desc
    {
    padding: 0;
    margin: 0;
    color: #666;
    }
    ul.exceptional-desc
    {
    color: #666;
    margin-left: -10px;
    padding: 0;
    margin-top: 0;
    }
    #80275
    kaizer1v
    Participant

    Oh Wait!! Maybe it is happening with IE5 as well. I think it is the ul.menu li:hover > ul property.. Any ideas how to solve that??

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.