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
    Nov 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS Dropdown menu not working in IE

    Hi!

    I am doing a Horizontal menu in CSS and it has images and a background colour to to it.

    It works fine in Safari, Firefox, Google Chrome, but wont work in IE, it wont show the background at all.

    Here is the HTML code, followed by the CSS code.

    Also here is a live link : http://www.032design.co.uk/032_2011/

    I have been looking at it for hours trying all sorts of things, but no idea why its not working in IE.

    If anyone can help! it would be great.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title></title>
    	<meta charset="UTF-8"/>
    	<meta name="description" content=""/>
    	<link href="css/style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
    	</head>
    <body>
    	<header>
    		<div class="header"><div class="nav">
    			<nav>
    			<ul>
    			<li class="topics"><a class="primary" href="#"><span>_about</span></a><div class="subnav"><a class="first" href="#"><img alt="" src="images/rgb.png"/><em></em> <span></span></a><a class="last" href="#"><img alt="" src="images/about.jpg"/><em></em> <span class="textsm">New online prescence<br>for Somerville</span></a>
    <dl><dt>about us:</dt>
    <dd class="textsm"><a href="#" class="special">our history</a></dd>
    <dd class="textsm"><a href="#" class="special">our people</a></dd>
    <dd class="textsm"><a href="#" class="special">our expertise</a></dd>
    <dd class="textsm"><a href="#" class="special">our philosophy</a></dd>
    <dd class="textsm"><a href="#" class="special">our mission</a></dd>
    </dl></div></li>
    
    <li class="projects"><a class="primary" href="#"><span>_news</span></a><div class="subnav"><a class="first" href="#"><img alt="" src="images/cmyk.png"/><em></em> <span></span></a><a class="last" href="#"><img alt="" src="images/news.jpg"/><em></em> <span class="textsm">New brand identity for CBHC<br>Chartered Accountants</span></a>
    <dl><dt>news:</dt>
    <dd class="textsm"><a href="#" class="special">latest news</a></dd>
    <dd class="textsm"><a href="#" class="special">news archive</a></dd>
    <dd class="textsm"><a href="#" class="special">what's news</a></dd>
    <dd class="textsm"><a href="#" class="special">Retail &amp; Exhibition</a></dd>
    <dd class="textsm"><a href="#" class="special">032app</a></dd>
    </dl></div></li>
    
    
    <li class="technologies"><a class="primary" href="#"><span>_cmyk</span></a><div class="subnav"><a class="first" href="#"><img alt="" src="images/cmyk.png"/><em></em> <span></span></a><a class="last" href="/technologies/nucleus"><img alt="" src="images/cmyk.jpg"/><em></em> <span class="textsm">New brand identity for CBHC<br>Chartered Accountants</span></a>
    <dl>
    <dt><b>cmyk projects:</b></dt>
    <dd class="textsm"><a href="#" class="special">brand idenitity</a></dd>
    <dd class="textsm"><a href="#" class="special">brand communications</a></dd>
    <dd class="textsm"><a href="#" class="special">packaging</a></dd>
    <dd class="textsm"><a href="#" class="special">retail &amp; exhibition</a></dd>
    <dd class="textsm"><a href="#" class="special">advertising</a></dd>
    </dl></div></li>
    
    
    
    <li class="news"><a class="primary" href="#"><span>_rgb</span></a><div class="subnav"><a class="first" href="#"><img alt="" src="images/rgb.jpg"/><em></em> <span></span></a><a class="last" href="/technologies/nucleus"><img alt="" src="images/rgb.jpg"/><em></em> <span class="textsm">New online prescence<br>for Somerville</span></a>
    <dl>
    <dt><b>rgb projects:</b></dt>
    <dd class="textsm"><a href="#" class="special">online strategists</a></dd>
    <dd class="textsm"><a href="#" class="special">websites</a></dd>
    <dd class="textsm"><a href="#" class="special">web portals</a></dd>
    <dd class="textsm"><a href="#" class="special">multimedia</a></dd>
    <dd class="textsm"><a href="#" class="special">advertising</a></dd>
    </dl></div></li>
    
    
    
    <li class="contact">
    <a class="primary" href="/news/"><span>_Contact</span></a>
    <div class="subnav"><a class="first" href="#"><img alt="" src="images/contact.png"/><em></em> <span></span>
    </a><a class="last" href="#"><img alt="" src="images/rgb.jpg"/><em></em> <span class="textsm">Download some of our<br>latest brochures</span></a>
    
    <dl>
    <dt><b>contact with us</b></dt>
    <dd class="textsm"><a href="#" class="special">our location</a></dd>
    <dd class="textsm"><a href="#" class="special">key contact info</a></dd>
    <dd class="textsm"><a href="#" class="special">downloads</a></dd>
    <dd class="textsm"><a href="#" class="special">032blog</a></dd>
    <dd class="textsm"><a href="#" class="special">032webcam</a></dd>
    </dl></div></li>
    
    </ul>
    </nav>
    </div>
    </div>
    		
    		
    	</header>
    	
    	
    
    		</body>
    </html>



    Code:
    /* reset */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    
     background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
    
    body { background-color: rgb(244,244,244); color: rgb(51,51,51); font: 62.5% Helvetica, Arial, sans-serif; margin: 0 auto; padding-top: 148px; position: relative; width: 980px; -webkit-font-smoothing: antialiased; }
    a { color: rgb(118,185,0); text-decoration: none; }
    a:focus, a:active { outline: 1px dotted rgb(204,204,204); }
    img { border: 1px solid rgb(204,204,204); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
    
    
    /**
     *	@begin Header Layout
     */
    
    /* Primary Navigation */
    .header .nav { position: absolute; right: 10px; top: 4px; }
    .header .nav li { display: inline; position: relative; }
    .header .nav .primary { color: rgb(194,194,194); display: inline-block; font: 500 1.4em/1 'ge-inspira-sc-1', 'ge-inspira-sc-2', georgia; padding: 10px 2px 12px; text-transform: lowercase; }
    .header .nav li:hover .primary { background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.48); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.48); box-shadow: 0 0 5px rgba(0,0,0,0.48); color: rgb(255,255,255); text-decoration: none; }
    
    /* Secondary Navigation */
    .subnav { background: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -webkit-border-top-right-radius: 0; -moz-border-radius: 2px 0 2px 2px; border-radius: 2px; border-top-right-radius: 0; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.48); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.48); box-shadow: 0 0 5px rgba(0,0,0,0.48); left: -9999px; max-width: 586px; opacity: 0; padding: 22px 0; position: absolute; right: 0; white-space: nowrap; z-index: 2; }
    .subnav > a { color: rgb(255,255,255); font: 500 1.1em/1.1818 'ge-inspira-1', 'ge-inspira-2', sans-serif; display: inline-block; padding: 0 15px; text-decoration: none; white-space: normal; width: 140px; vertical-align: top; }
    .subnav > a.first { padding-left: 30px; }
    .subnav > a.last { border-right: 1px solid rgb(89,90,90); padding-right: 30px; }
    .subnav img { border: 0; width: 140px; }
    .subnav em { display: block; font-size: 1.1818em; font-style: normal; font-weight: 500; line-height: 1; margin: 5px 0; width: 140px; }
    .subnav dl { display: inline-block; padding: 0 20px 0 27px; width: 166px; }
    .subnav dt { color: rgb(255,255,255); font: 500 1.2em/1 'ge-inspira-sc-1', 'ge-inspira-sc-2', sans-serif; margin-bottom: 0.8333em; text-transform: lowercase; }
    .news .subnav dt { font: 500 12px/15px 'ge-inspira-1', 'ge-inspira-2', sans-serif; text-transform: none; }
    .subnav dd a { background: transparent url(images/arrow-green.png) no-repeat 0 55%; color: rgb(255,255,255); display: block; font: 500 1.2em/1 'ge-inspira-1', 'ge-inspira-2', sans-serif; padding: 4px 0 3px 12px; white-space: normal; }
    .header .nav li:hover .subnav { left: auto; opacity: 1; }
    
    A.special  {
    	color : #ffffff;
    	font-size : 11px;
    	font-weight : normal;
    	text-decoration : underline;
    }
    
    A.special:Visited  {
    	color : #ffffff;
    	font-size : 11px;
    	font-weight : normal;
    	text-decoration : underline;
    }
    
    A.special:Active  {
    	color : #ffffff;
    	font-size : 11px;
    	font-weight : normal;
    	text-decoration : underline;
    }
    
    A.special:Hover  {
    	color : #f4f4f4;
    	font-size : 11px;
    	font-weight : normal;
    	text-decoration : underline;
    }
    
    .textsm  {
    	font-size : 9px;
    	font-family : Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #fffff;
    	text-decoration : underline;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello shibbytude,
    It looks like your mixing some of the new HTML5 elements in there. Not sure that's why the background doesn't show up, I didn't test to see.

    In your case, <nav> should be <div id="nav"> and <header> should be <div id="header">.
    The corresponding CSS would be #nav and #header.

    Check you code with the validator. See the links about validation in my signature line below.




    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    shibbytude (12-13-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Excavator View Post
    Hello shibbytude,
    It looks like your mixing some of the new HTML5 elements in there. Not sure that's why the background doesn't show up, I didn't test to see.

    In your case, <nav> should be <div id="nav"> and <header> should be <div id="header">.
    The corresponding CSS would be #nav and #header.

    Check you code with the validator. See the links about validation in my signature line below.




    .
    Hi Excavator!

    Thanks very much for your help, have got it working now.

    Looks different now, but as long as it works on all browsers now, is the main thing! and the CSS is now all correct!

    Thanks very much for your help!

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,302
    Thanks
    13
    Thanked 345 Times in 341 Posts
    Quote Originally Posted by Excavator View Post
    Hello shibbytude,
    It looks like your mixing some of the new HTML5 elements in there.
    IE is known for having a problem recognising the new HTML5 elements.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

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