...
PDA

CSS Dropdown menu not working in IE

shibbytude
12-13-2010, 10:56 AM
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.



<!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>








/* 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;
}
Excavator
12-13-2010, 11:06 AM
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.




.
shibbytude
12-13-2010, 11:47 AM
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!
Dormilich
12-14-2010, 09:59 AM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum