Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
CSS Menu Problems In IE
Old 08-22-2011, 03:22 AM CSS Menu Problems In IE
evans123's Avatar
Ultra Talker

Posts: 468
Trades: 0
I'm having trouble getting my CSS menu to work in Internext Explorer, the code works perfectly fine in both Firefox/Google Chome. I believe it has something to do with the :hover pseudo class. The outline of the menu will appear on internet explorer however once you move down to hover over a drop down element it simply vanishes.

Website: http://www.newsmuncher.com

CSS Code:
Code:
/*-- Menu --*/

.menu {
    margin: 0;
    width: 100%;
    display: block;
    z-index: 5;
}

.menu li
{    
    float: left;
    position:relative;
    border-right: 1px solid #1a397a;
    border-left: 1px solid #355089;
}

.menu li:first-child {
    border-left: 1px solid #1a397a;
}

.menu a {
    padding: 10px;
    text-decoration: none;    
    display: block;
    color: #FFFFFF;
}

.menu a:hover {
    background: #284581;
    color: #FFFFFF;
}

.menu ul {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #284581;
    border: 1px solid #1A397A;
    border-top: none;
    border-radius: 0 0 3px 3px;
    top: 35px;
    left: -9999px;
    position: absolute;
    min-width: 125px;
}

.menu ul li {
    float: none;
    border: none;
    border-bottom: 1px solid #1a397a;
    border-top: 1px solid #355089;
    background: #284581;
}

.menu ul a {
    white-space: nowrap;
    padding: 7px 10px !important;
}

.menu li a:hover ul, .menu li:hover ul {
    left: -1px;    
}

.menu li a:hover, .menu li:hover a {
    background: #284581;    
}

.menu li:hover ul li a:hover {
    background: #304B86;    
}

.menu ul li:first-child {
    border-left: none;
}

.menu ul li:last-child {
    border-bottom: none;    
}
HTML Code:
<div id="header" class="clearfix">
    <div class="module clearfix">
        <div id="logo" class="clearfix"> <a href="/"> <span>Newsmuncher.com</span></a></div>
        <ul class="menu">
            <li><a href="#">Home<![if !IE]></a><![endif]>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/help/">Help</a></li>
                    <li><a href="/terms/">Terms</a></li>
                    <li><a href="/privacy/">Privacy</a></li>
                </ul>
                <![if IE]></a><![endif]> 
            </li>
            <li><a href="#">News</a></li>
        </ul>
    </div>
</div>

Last edited by evans123; 08-22-2011 at 03:26 AM..
evans123 is offline
Reply With Quote
View Public Profile Visit evans123's homepage!
 
 
Register now for full access!
Old 08-22-2011, 08:35 AM Re: CSS Menu Problems In IE
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
What version of IE

And set the margins of the problem elements to 0.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 08-22-2011, 08:47 AM Re: CSS Menu Problems In IE
evans123's Avatar
Ultra Talker

Posts: 468
Trades: 0
It's IE9, although it doesn't work in any of the internext explorers.

I've given the elements a margin of 0 and it still doesn't seem to make a difference. The background of the dropdown ul is still transparent.

Last edited by evans123; 08-22-2011 at 08:52 AM..
evans123 is offline
Reply With Quote
View Public Profile Visit evans123's homepage!
 
Old 08-22-2011, 05:46 PM Re: CSS Menu Problems In IE
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Setting margins is not going to affect the background colour.

The other thing I've just seen is the z-index on .menu and IE has problems with stacking orders. It isn't actually doing anything because you can only change the stacking order on positioned elements.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 08-23-2011, 03:54 AM Re: CSS Menu Problems In IE
evans123's Avatar
Ultra Talker

Posts: 468
Trades: 0
I have just resolved the issue, the menu was showing but it was hiding behind all the over divs below it etc... Just needed to amend a few of the positions and z-indexs. Thanks for the help.
evans123 is offline
Reply With Quote
View Public Profile Visit evans123's homepage!
 
Reply     « Reply to CSS Menu Problems In IE
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.78343 seconds with 12 queries