Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Menu Problems

    I've worked on a menu that works fine Firefox and Safari, but fails in IE. Is there anything that you could think of that would help? The first drop down works in IE, but none of the others. This was a project I picked up midstream with the menu built, and the client really wants to use it.

    Here's a sample http://bigoak.info/press/

    Code:
    #nav ul { height: 47px; z-index:15000; }
    #nav ul li { height: 47px; float: left; z-index: 9999; position: relative;}
    #nav ul li a { display: block; height: 47px; line-height: 55px; padding: 0 10px 0 0px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none; 
    	text-align: center; 
    	background: url(images/nav-seperator.jpg) no-repeat right bottom;
    }
    #nav ul li.first a { display: block; height: 47px; line-height: 55px; padding: 0 10px 0 0px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none; 
    	
    	background: url(images/nav-first-seperator.gif) no-repeat right bottom; 
    }
    #nav ul li.last a { display: block; height: 47px; line-height: 55px; padding: 0 10px 0 0px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none; 
    	background: url(images/nav-seperator.jpg) no-repeat right bottom;
    
    }
    #nav ul li a span { display: block; padding: 0 0 0 11px; height: 47px; float: left; width: 188px; }
    #nav ul ul.dropdown-container { width: 279px; position: absolute; left: 0px; height: auto; display: none; padding: 7px 0 8px 13px; background: url(images/dropdown-bg.png) no-repeat left bottom; top: 47px; z-index: 2;
    	margin-left: -6px;
    	text-align: left; 
    }
    #nav ul ul.dropdown-container li { width: 260px; margin: 0 0 7px; float: none; height: auto; text-align: left;  }
    #nav ul ul.dropdown-container li a { float: none; padding: 6px 9px 4px; color: #5e686c; font-weight: normal; line-height: 14px; height: auto; width: 242px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #f3f3f3 url(images/dropdown-single-arrow-h.gif) no-repeat 242px center; border: 1px solid #e7e7e7; text-align: left; }
    #nav ul ul.dropdown-container li a:hover { color: #8ddc3e; margin: 0; border: 1px solid #a9b2b5; background: #f3f3f3 url(images/dropdown-single-arrow.gif) no-repeat 242px center; text-align: left; }
    #nav ul ul.dropdown-container li a:hover span { background: none; padding: 0; color: #5e686c;text-align: left;  }
    #nav ul ul.dropdown-container li a span { color: #a9b2b5; font-size: 10px; height: auto; float: none; padding: 0; text-align: left; }
    #nav ul .sub-block { height: 500px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #f3f3f3; padding: 8px 9px 6px; width: 241px !important; border: 1px solid #e7e7e7; background: #f3f3f3 url(images/dropdown-single-arrow-h.gif) no-repeat 242px center;}
    #nav ul .sub-block:hover { border: 1px solid #a9b2b5; background: #f3f3f3 url(images/dropdown-single-arrow.gif) no-repeat 242px center;}
    #nav ul .sub-block ul { height: auto;  padding: 0;  }
    #nav ul .sub-block ul .title { float: none; }
    #nav ul .sub-block ul .title a { background: none; padding: 0 8px 0 0; none; color: #5e686c; font-weight: normal; line-height: 14px; height: auto; width: 242px;  font-size: 14px;}
    #nav ul .sub-block ul .title a:hover {background: none;width: 241px}
    #nav ul .sub-block ul li { margin: 0; float: left; width: 80px; }
    #nav ul .sub-block ul li strong { color: #e73e34; font-size: 12px; display: block; margin: 0 0 5px; }
    #nav ul .sub-block ul li a { width: auto; padding: 0 0 0 8px; font-size: 11px; line-height: 18px; color: #5e686c; border: none; background: url(images/sub-block-arrow.gif) no-repeat left center; display: block; }
    #nav ul .sub-block ul li a:hover { border: none; background: url(images/sub-block-arrow.gif) no-repeat left center; }
    #nav ul .hovered a.hoverable { color: #454545; margin: 0 -6px; background: url(images/round-right2.png) no-repeat right top; }
    #nav ul .hovered a.hoverable span { background: url(images/round-left2.png) no-repeat left top; padding: 0 -6px 0 17px; width:  200px; }
    #nav .my-account { float: right; }
    #nav .my-account a { float: right; text-transform: capitalize; padding: 0 15px 0 0; background: url(images/nav-simple-arrow.gif) no-repeat right 24px; }
    #nav .my-account a:hover { color: #fff; background: url(images/nav-simple-arrow-hover.gif) no-repeat right 24px; }
    #nav .my-account a:hover span { background: url(images/ico-account-hover.gif) no-repeat left 20px; }
    #nav .my-account a span { padding: 0 0 0 20px; background: url(images/ico-account.gif) no-repeat left 20px; }
    #nav .resource-nav { position: relative; top: 5px; z-index: 3; }
    #nav .resource-nav a { height: 46px; width: 133px; line-height: 46px; background: url(images/nav-simple-arrow.gif) no-repeat 116px 20px; /*background: url(images/nav-resource.jpg) no-repeat left top;*/ }
    #nav .resource-nav a:hover { color: #fff; height: 46px; background: url(images/nav-resource-hover.jpg) no-repeat left top; }
    #introduction { text-align: center; height: 340px; width: 960px; padding: 20px 0 0 0; margin: 0px -10px 17px; position: relative; background: url(images/intro-bg-tr.png) no-repeat left bottom; }
    #introduction h1 { color: #3b9bd0; text-transform: uppercase; font-size: 61px; margin: 0 0 10px; }
    #introduction p, #introduction h2 { font-size: 24px; line-height: 28px; color: #464647; }
    #introduction p a { font-weight: bold; text-transform: uppercase; text-decoration: none; color: #e13c33; }
    #introduction p a:hover { text-decoration: underline; }
    #introduction h2 + p { font-size: 28px; line-height: 36px; padding: 10px 0 0 0; }
    #introduction .try-out { display: block; font-size: 21px; position: absolute; height: 57px; width: 960px; left: 0; bottom: 0; line-height: 57px; text-decoration: none; color: #fff; }
    #introduction .try-out:hover { background: url(images/try-now-hover.jpg) no-repeat left top; }
    .section-col {
    	float: left;
    	width: 300px;
    	height: 212px;
    	margin-top: 0;
    	margin-right: 20px;
    	margin-bottom: 5px;
    	margin-left: 0;
    	font-family:Arial, Helvetica, sans-serif;
    }
    .section-col h6 a { display:block; text-decoration:none; width: 280px; height: 31px; background: url(images/home-3col-title.gif) no-repeat left top; margin: 0 0 10px;  font-size: 14px; color: #fff; font-weight: bold; line-height: 30px; padding: 0 10px; }
    .section-col h6 a:hover { background: url(images/home-3col-title.gif) no-repeat left -31px; }
    .section-col div { background: url(images/home-3col-2.jpg) no-repeat left top; height: 252px; width: 300px; }
    .section-col.testimonial p { color: #767d80; font-size: 11px; line-height: 16px; padding: 10px 10px 0; }
    .section-col.testimonial p strong { color: #2c2e2f; }
    .section-col.testimonial p em { font-size: 11px; font-family: arial, sans-serif; }
    .section-col.testimonial p a { font-style: normal; color: #34a8e1; text-decoration: none; }
    .section-col.testimonial p a:hover { text-decoration: underline; }
    .section-col p.iconFloat { float:left; width:32px; }
    .section-col.BoxNormal p { color: #767d80; font-size: 11px; line-height: 18px; padding: 10px 10px 0; }
    .section-col.BoxNormal p strong { color: #2c2e2f; }
    .section-col.BoxNormal p em { font-size: 11px; font-family: arial, sans-serif; }
    .section-col.BoxNormal p a { font-style: normal; color: #34a8e1; text-decoration: none; }
    .section-col.BoxNormal p a:hover { text-decoration: underline; }
    .section-col.BoxMargin { margin: 0; }
    .section-col.live-chat div { width: 200px; padding: 10px 0 0 100px; background: url(images/home-3col-1.jpg) no-repeat left top; height: 81px; }
    .section-col.live-chat div p { font-size: 18px; color: #6f777a; line-height: 24px; text-transform: uppercase; }
    .section-col.live-chat div p span { color: #248cc7; font-size: 22px; }
    .section-col.live-chat div .time sup { vertical-align: top; font-size: 10px; }
    .section-col.live-chat div .time span { font-size: 11px; text-transform: capitalize; color: #7d7e7e; }
    .section-col.brochure { margin: 0; }
    .section-col.brochure div { width: 165px; height: 81px; padding: 10px 0 0 135px; background: url(images/home-3col-3.jpg) no-repeat left top; }
    .section-col.brochure div p { color: #6f777a; font-size: 11px; }
    .section-col.brochure div p strong { color: #d9291e; font-size: 18px; }
    .section-col.brochure div a { font-size: 10px; color: #6f777a; display: block; margin: 10px 0 5px 30px; text-decoration: none; }
    .section-col.brochure div a:hover { color: #34a8e1; }
    .section-col.brochure div .other { margin: 0 0 0 30px; }
    .page-title { float: left; color: #3e3f40; text-transform:uppercase; margin: 25px 0 0 0;
    	padding-left: 25px;
    	font: normal 24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
    .page_subtitle { margin-top:15px; color:#3e3f40; }
    #sub-nav { margin: 31px 0 0 0; float: right; }
    #sub-nav li { float: left; margin: 0 0 0 40px; }
    #sub-nav li a { float: left; color: #8e8e8e; font-size: 14px; text-decoration: none; }
    #sub-nav li a:hover { color: #e03c33; }
    #sub-nav li a.selected { color: #e03c33; }
    Last edited by macneal; 10-24-2011 at 12:27 AM. Reason: Adding code

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    That's an essentially Javascript-driven menu -- with Js off, it doesn't work anymore in FF either. The only thing I can offer you is a tutorial on how to create a (normal) cross-browser drop-down menu with CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    You from the future Frankie!? you joined the forums "Sep 2011"! Lol

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    I'm afraid it is you. You didn't take a nap last year, you hibernated through winter, spring and summer.... ;-)
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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