ivor1
06-20-2009, 03:54 PM
I have an accordion menu which I got from
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm
which works in all browsers except IE.
I think it may be something to do with the divs.
My html is-<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="ceramic, sculptures" />
<meta name="description" content="contact kirsty doig" />
<title>Contact Kirsty Doig </title>
<link href="tissywudeux.css" rel="stylesheet" type="text/css" />
<script src="Accordion.js" type="text/javascript"></script>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #0F0;
font-size: 12pt;
font-family: "Myriad Web Pro";
}
a:active {
text-decoration: none;
}
a {
font-size: 12pt;
color: #FFF;
font-family: "Myriad Web Pro";
}
body {
background-image: url();
background-color: #000;
}
-->
</style></head>
<body>
<div id="container">
<div id="main">
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="index.html">Home</a></div>
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="#">Collections</a></div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<a href="masks.html">Life Masks I</a>
<br />
<a href="masks2.html">Life Masks II</a>I<br />
<a href="framed.html">Life Masks III</a><br />
<a href="healinghands.html">Healing Hands</a><br />
<a href="sprites.html">Sprite Reliefs</a>
<br />
<a href="littlepeople.html">Little People</a><br />
<a href="amphorae.html">Amphorae</a><br />
<img src="thumb.png" style="margin: 10px 5px" />
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="exhibitions.html">Exhibitions</a></div>
</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
Contact</div>
</div>
<div onclick="runAccordion(6);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="links.html">Links</a></div>
<div onclick="runAccordion(6);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="sitemap.html">Sitemap</a></div>
</div>
</div>
</div>
<div id=body><a href="http://get.adobe.com/flashplayer/">You need a Flash player to view this page. Get it here.</a></div>
<script type="text/javascript">
var so = new SWFObject("contact.swf", "contact", "800", "500", "8", "#000000");
so.write("body");
</script>
</div>
</div>
</body>
</html>
and my css file is-@charset "utf-8";
/* CSS Document */
#container {
position: absolute;
height: 100%;
width: 100%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#main {
height: 505px;
width: 960px;
position: relative;
margin-right: auto;
margin-left: auto;
background-color: #000;
top: 22px;
border: 1px solid #333;
}
#container #main #body {
font-family: "Myriad Web Pro";
font-size: 12pt;
color: #0F0;
text-decoration: none;
background-color: #000;
width: 800px;
height: 500px;
position: relative;
top: -150px;
left: 160px;
overflow: hidden;
background-image: none;
font-weight: bold;
}
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position:relative;
width:150px;
height: 100px;
}
.AccordionTitle
{
height:15px;
overflow:visible;
cursor:pointer;
font-family:"Myriad Web Pro";
font-size:12pt;
font-weight:bold;
vertical-align:middle;
text-align:left;
background-repeat:no-repeat;
display:table-cell;
background-image:none;
-moz-user-select:none;
text-decoration: none;
color: #FFF;
background-color: #000;
top: 50px;
}
.AccordionContent
{
height:0px;
overflow:visible;
display:none;
background-color: #000;
}
.AccordionContainer
{
width: 150px;
background-color: #000;
height: 150px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 5px;
position: relative;
overflow: visible;
top: 75px;
visibility: visible;
}
Can anyone help?
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm
which works in all browsers except IE.
I think it may be something to do with the divs.
My html is-<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="ceramic, sculptures" />
<meta name="description" content="contact kirsty doig" />
<title>Contact Kirsty Doig </title>
<link href="tissywudeux.css" rel="stylesheet" type="text/css" />
<script src="Accordion.js" type="text/javascript"></script>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #0F0;
font-size: 12pt;
font-family: "Myriad Web Pro";
}
a:active {
text-decoration: none;
}
a {
font-size: 12pt;
color: #FFF;
font-family: "Myriad Web Pro";
}
body {
background-image: url();
background-color: #000;
}
-->
</style></head>
<body>
<div id="container">
<div id="main">
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="index.html">Home</a></div>
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="#">Collections</a></div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<a href="masks.html">Life Masks I</a>
<br />
<a href="masks2.html">Life Masks II</a>I<br />
<a href="framed.html">Life Masks III</a><br />
<a href="healinghands.html">Healing Hands</a><br />
<a href="sprites.html">Sprite Reliefs</a>
<br />
<a href="littlepeople.html">Little People</a><br />
<a href="amphorae.html">Amphorae</a><br />
<img src="thumb.png" style="margin: 10px 5px" />
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="exhibitions.html">Exhibitions</a></div>
</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle" onselectstart="return false;">
Contact</div>
</div>
<div onclick="runAccordion(6);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="links.html">Links</a></div>
<div onclick="runAccordion(6);">
<div class="AccordionTitle" onselectstart="return false;">
<a href="sitemap.html">Sitemap</a></div>
</div>
</div>
</div>
<div id=body><a href="http://get.adobe.com/flashplayer/">You need a Flash player to view this page. Get it here.</a></div>
<script type="text/javascript">
var so = new SWFObject("contact.swf", "contact", "800", "500", "8", "#000000");
so.write("body");
</script>
</div>
</div>
</body>
</html>
and my css file is-@charset "utf-8";
/* CSS Document */
#container {
position: absolute;
height: 100%;
width: 100%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#main {
height: 505px;
width: 960px;
position: relative;
margin-right: auto;
margin-left: auto;
background-color: #000;
top: 22px;
border: 1px solid #333;
}
#container #main #body {
font-family: "Myriad Web Pro";
font-size: 12pt;
color: #0F0;
text-decoration: none;
background-color: #000;
width: 800px;
height: 500px;
position: relative;
top: -150px;
left: 160px;
overflow: hidden;
background-image: none;
font-weight: bold;
}
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position:relative;
width:150px;
height: 100px;
}
.AccordionTitle
{
height:15px;
overflow:visible;
cursor:pointer;
font-family:"Myriad Web Pro";
font-size:12pt;
font-weight:bold;
vertical-align:middle;
text-align:left;
background-repeat:no-repeat;
display:table-cell;
background-image:none;
-moz-user-select:none;
text-decoration: none;
color: #FFF;
background-color: #000;
top: 50px;
}
.AccordionContent
{
height:0px;
overflow:visible;
display:none;
background-color: #000;
}
.AccordionContainer
{
width: 150px;
background-color: #000;
height: 150px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 5px;
position: relative;
overflow: visible;
top: 75px;
visibility: visible;
}
Can anyone help?