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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Css & Internet Explorer!

    Hello!

    I've been messing around and formatting a navigation menu bar for a while now on chrome. However when I went to complete a Internet Explorer Test the navigation bar presented some issues:

    - Hovering over text no longer changes the color of the text.
    - The submenu does not show when you hover over it.

    So I was wondering if anyone could show me how to make the submenu dropdown/appear in internet explorer and help with the hovering text issue.

    Style.css:
    Code:
    /* Reset */
    .menu,
    .menu ul,
    .menu li,
    .menu a {
    	margin: 0;
    	padding: 0;
    	border: none;
    	outline: none;
    }
    
    /* Menu */
    .menu {	
    	height: 40px;
    	width: 600px;
    
    	background: #d1052e;
    	background: -webkit-linear-gradient(top, #d1052e 0%,#d1052e100%);
    	background: -moz-linear-gradient(top, #d1052e 0%,#d1052e 100%);
    	background: -o-linear-gradient(top, #d1052e 0%,#d1052e 100%);
    	background: -ms-linear-gradient(top, #d1052e 0%,#d1052e100%);
    	background: linear-gradient(top, #d1052e 0%,#d1052e 100%);
    
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }
    
    .menu li {
    	position: relative;
    	list-style: none;
    	float: left;
    	display: block;
    	height: 40px;
    }
    
    /* Links */
    
    .menu li a {
    	display: block;
    	padding: 0 14px;
    	margin: 6px 0;
    	line-height: 28px;
    	text-decoration: none;
    	
    	border-left: 1px solid #FFFFFF;
    	border-right: 1px solid #FFFFFF;
    
    	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    	font-weight: bold;
    	font-size: 13px;
    
    	color: #edecec;
    	text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    
    	-webkit-transition: color .2s ease-in-out;
    	-moz-transition: color .2s ease-in-out;
    	-o-transition: color .2s ease-in-out;
    	-ms-transition: color .2s ease-in-out;
    	transition: color .2s ease-in-out;
    }
    
    .menu li:first-child a { border-left: none; }
    .menu li:last-child a{ border-right: none; }
    
    .menu li:hover > a { color: #FFFFFF; }
    
    /* Sub Menu */
    
    .menu ul {
    	position: absolute;
    	top: 40px;
    	left: 0;
    
    	opacity: 100%;
    	
    	background: #cdcccc;
    
    	-webkit-border-radius: 0 0 5px 5px;
    	-moz-border-radius: 0 0 5px 5px;
    	border-radius: 0 0 5px 5px;
    
    	-webkit-transition: opacity .25s ease .1s;
    	-moz-transition: opacity .25s ease .1s;
    	-o-transition: opacity .25s ease .1s;
    	-ms-transition: opacity .25s ease .1s;
    	transition: opacity .25s ease .1s;
    }
    
    .menu li:hover > ul { opacity: 1; }
    
    .menu ul li {
    	height: 0;
    	overflow: hidden;
    	padding: 0;
    
    	-webkit-transition: height .25s ease .1s;
    	-moz-transition: height .25s ease .1s;
    	-o-transition: height .25s ease .1s;
    	-ms-transition: height .25s ease .1s;
    	transition: height .25s ease .1s;
    }
    
    .menu li:hover > ul li {
    	height: 36px;
    	overflow: visible;
    	padding: 0;
    }
    
    .menu ul li a {
    	width: 100px;
    	padding: 4px 0 4px 40px;
    	margin: 0;
    
    	border: none;
    	border-radius: 1px;
    	border-bottom: 1px solid #d1052e;
    }
    
    .menu ul li:last-child a { border: none; }
    index.html
    Code:
    <html>
    <head>
    <link rel="stylesheet" href="style.css" media="screen">
    	<style type="text/css">
    		html, body { margin: 0;	padding: 0; }
    		body { margin: 5px; background: #f2f2f2 url(img/bg.png) no-repeat top center; }
    		ul.menu { margin: 250px auto 0 auto; }
    	</style>
    </head>
    <body>
    
    <ul class="menu">
    
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Test</a></li>
    	<li><a href="#">Test</a>
    
    		<ul>
    			<li><a href="#" >test</a></li>
    			<li><a href="#" >test</a></li>
    			<li><a href="#">test</a></li>
    		</ul>
    
    	</li>
    	<li><a href="#">test</a></li>
    	<li><a href="#">test</a></li>
    	<li><a href="#">test</a></li>
    
    </ul>
    </body>
    </html>
    Thank you in advance for any help or guidance!

    -bluespiked

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    what version of IE? Older versions only recognize the :hover psuedo selector on anchors and nothing else ( in this case LI's) ( the fix is to use javascript to fix the deficiency, but if memory serves, the element being hovered on still has to have a set width in IE)
    Last edited by DanInMa; 09-23-2013 at 06:34 PM.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE version

    Hi,

    I just checked and the IE I am using is IE10.

    Thanks.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I cannot test in IE10 at work( they use IE8 exclusively here -- dont ask lol)
    try giving the li's a set width and see if that helps.

  • Users who have thanked DanInMa for this post:

    bluespiked (09-23-2013)

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for your response - I tried setting a width of a 100px to the li's however it had no affect in IE. It did have a visual affect in Chrome though.

    Thanks.

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Did you declare a doctype?

    Code:
    <!DOCTYPE html>
    My signature :)

  • Users who have thanked ttkim for this post:

    bluespiked (09-23-2013)

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    Thank you so much! Works well in IE too! I feel more of a noob than I originally did.

    Thanks for all your help!

    -blue


  •  

    Tags for this Thread

    Posting Permissions

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