SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Vietnam
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flexslider & DropDown problem in IE8 - Please help

    Hi Guys,

    I'm using WP with a customized Twenty Twelve theme and added an image slider - flexslider (aka Captain Slider plug-in).
    Now in IE8 the dropdown (drop-up in my case) is closing once hovering above the slider. Tried with z-index, but no luck so far. Could anybody please have a look?

    http://www.halodesign.com.vn/

    This navigation related style is triggered for IE:

    Code:
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    	display: inline-block !important;
    	text-align: right;
    	width: 100%;
    }
    .main-navigation ul {
    	margin: 0;
    	text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
    	display: inline-block;
    	text-decoration: none;
    }
    .ie7 .main-navigation li a,
    .ie7 .main-navigation li {
    	display: inline;
    }
    .main-navigation li a {
    	border-bottom: 0;
    	color: #B4B0A9;
    	line-height: 2;
    	text-transform: uppercase;
    }
    .main-navigation li a:hover {
    	color: #4f4238;
    }
    .main-navigation li {
    	margin: 0 0 0 40px;
    	position: relative;
    }
    .main-navigation li ul {
    	display: none;
    	margin: 0;
    	padding: 0;
    	position: absolute;
    	bottom: 100%;
    	z-index: 1;
    }
    
    .main-navigation ul li ul li {
        margin: 0;
    }
    .ie7 .main-navigation li ul {
    	left: 0;
    }
    .main-navigation li ul ul,
    .ie7 .main-navigation li ul ul {
    	top: 0;
    	left: 100%;
    }
    .main-navigation ul li:hover > ul {
    	border-left: 0;
    	display: block;
    }
    .main-navigation li ul li a {
    	background: none;
    	display: block;
    	font-size: 11px;
    	line-height: 0.5;
    	padding: 4px 5px;
    	width: 180px;
    	text-align:left;
    }
    .main-navigation li ul li a:hover {
    	background: none;
    	color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
    	color: #4f4238;
    	font-weight: bold;
    }
    Many thanks in advance,

    Sam

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi SamSimma. I had a look, and it does the same in IE9, though I can't tell why. It's a little hard to debug remotely. Are you able to make up a demo version that displays this behavior and which we can download and mess with?

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Vietnam
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks fot your answer Ralph,

    You mean a WAMP demo version?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by SamSimma View Post
    You mean a WAMP demo version?
    No, just an .html page that has the CSS and JS embedded (with external link to the jQuery library at Google) that demonstrates the problem. Then we can test it locally and work out what to do.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Want a weird solution?

    Add a background-color to .main-navigation li ul

    style.css Line 103
    Code:
    .main-navigation li ul {
        background-color:#000;
    That works in IE8. Don't know why.

    Somehow, the slide show peeking through between the lines of text drops the menu. Very odd.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,483
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Want a weird solution?

    Add a background-color to .main-navigation li ul

    style.css Line 103
    Code:
    
    
    .main-navigation li ul {
        background-color:#000;
    That works in IE8. Don't know why.

    Somehow, the slide show peeking through between the lines of text drops the menu. Very odd.
    Yes its a very old IE bug and IE needs a background or it falls through the gaps where elements overlap. I engineered a fix for this about 10 years ago and in places where you can't add a background-colour just add a non existent image.

    e.g.

    Code:
    .main-navigation li ul {
     background:url(fake.gif) no-repeat  0 0;
    }
    To avoid server log missing image errors just make a 1px transparent gif instead and use that (not repeated).

  7. #7
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Vietnam
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are amazing!

    Paul, I used your fix - Works nicely

    Many thanks to all of you!

    Sam


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •