This is my first time posting so please forgive for any impropriety.
I have redesigned an existing website using CSS which works in Mozilla
except the drop-down menus don't disappear when you remove the cursor
and unfortunately, it does not work well in IE. Can anyone give me some
advice, starting with my sidebar. I validated all my code and it all
checks out. The website is: www.artasightproductions.com/new/main.html
and the code is listed below for this page.
Any help would be greatly appreciated.
Peggy Bart
body {
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
background: #000080;
color: #9CBDEF;
text-align: center;
}
h1 {font-size: 250%;
text-align: center;
}
h2 {font-size: 200%;}
h3 {font-size: 150%;}
h4 {font-size: 133%;}
h5 {font-size: 100%;}
div.maincontent {
position: relative;
top: 2em;
margin: 0 0 0 300px;
padding: 0;
height: 500px;
}
div.smeye{
top: 1px;
width: 150px;
text-align: center;
}
.smeye a img{
border: none;
}
div.banner {
margin: 0 0 2em 0;
text-align: center;
}
div.genrepics {
text-align: center;
}
div#counter {
text-align: center;
}
div#mainlogo {
margin: 5em; padding: 0;
text-align: center;
}
/* begin footer */
div.footercontainer {
margin: 0 0 0 300px;
padding: 0;
}
div.footer {
font-family: Arial, Verdana, Helvetica, sans-serif;
display: inline;
text-align: center;
}
.footer a:link {
font-family: verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #9CBDEF;
text-decoration : none;
}
.footer a:visited {
font-family: verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #9CBDEF;
text-decoration : none;
}
.footer a:active {
font-family: verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #9CA5F7;
text-decoration : none;
}
.footer a:hover{
font-family: verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #FFF;
text-decoration : none;
}
/* begin calendar */
div.caltable {
width: 100%;
margin-left:auto;
margin-right: auto;
}
table#calendar a {
text-decoration: none;
}
tr#days th {
width: 14%;
}
table#calendar tr#days th {
color: white;
background-color: #224;
font-weight: bold;
text-align: center;
padding: 1px 0.33em;
}
table#calendar tr#title th {
background: #0099ff;
color: navy;
border: 1px solid #242;
font-size: 120%;
}
table#calendar td {
background: white;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: navy;
vertical-align: top;
padding: 0;
border: 0px solid gray;
border-width: 0 0 1px 1px;
border-right: 1px solid gray;
}
table#calendar a {
font-weight: bold;
font-size: 10px;
display: block;
margin: 0;
}
table#calendar a:link {
color: #6600ff;
font-size: 10px;
}
table#calendar a:visited {
color: purple;
}
table#calendar a:hover {
color: #00C;
}
table#calendar td.may, table#calendar td.jul, table#calendar td.aug {
background: #fffff0;
color: navy;
}
table#calendar tr#lastweek td {
border-bottom: 2px solid #AAB;
}
table#calendar td.holiday {
background: #9CF;
border-color: #BBB #FCC #FCC #BBB;
}
div.event {
margin: 0.5em;
}
div.event span {
display: block;
}
div.holiday {
font-style: italic;
}
span.time {
color: #ff0000;
font-weight: bold;
}
div.date {
float: right;
text-align: center;
border: 1px solid gray;
border-width: 0 0 1px 1px;
padding: 0.125em 0.25em 0 0.25em;
margin: 0;
background: #F3F3F3;}
span.loc {
color: #0099ff;
font-style: italic;
}
td.may div.date, td.jul div.date div.date td.aug {
border-width: 0;
color: gray;
background: transparent;}
div#artistban {
width: 231px;
height: 89px;
margin: 0 0 0 0;
padding: 0;
text-align: center;
border: 1px dotted white;
}
/* begin artist tables */
div.arttable1 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
table#artist1 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
table#artist1 td {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-weight: bold;
margin: 0 0 0 1px;
text-align: center;
background: #000080;
}
table#artist1 td img{
border: none;
}
div.arttable2 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
table#artist2 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
table#artist2 td {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-weight: bold;
margin: 0 0 0 1px;
text-align: center;
background: #000080;
}
table#artist2 td img{
border: none;
}
div.tablinks1 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
table#links1 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
table#links1 td {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-weight: bold;
margin: 0 0 0 1px;
text-align: center;
background: #000080;
}
table#links1 td img{
border: none;
}
/*links2 */
div.tablinks2 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
table#links2 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
table#links2 td {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-weight: bold;
margin: 0 0 0 1px;
text-align: center;
background: #000080;
}
table#links2 td img{
border: none;
}
/* links3 */
div.arttable3 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
table#links3 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
table#links3 td {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-weight: bold;
margin: 0 0 0 1px;
text-align: center;
background: #000080;
}
table#links3 td img{
border: none;
}
div#aboutgman {
font-family: Arial, Verdana, sans-serif;
background: #9CBDEF;
color: #000080;
width: 80%;
text-align: center;
}
.roundcont {
width: 500px;
background-color: #9CBDEF;
color: #000080;
text-align: center;
display: block;
border: 1px solid red;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 25px;
height: 25px;
border: none;
display: block !important;
}
#aboutgman h1{font-size: 400%; text-align: center;}
div#aboutaas {
font-family: Arial, Verdana, sans-serif;
}
#aboutaas h1 {font-size: 400%;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Art A Sight Productions</title>
<style type="text/css">
body {
background: #000080;
padding:0;
margin:0;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #9CBDEF;
text-align: center;
}
div.maincontent {
position: relative;
top: 2em;
margin: 0 0 0 300px;
padding: 0;
}
div.sidebar {
float: left;
margin: 11em 0 0 0;
text-align: left;
width: 300px;
padding: 0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width: 150px;
}
#menu {
float: left;
top: 11em;
left: 1em;
width: 10em;
}
#menu dt {
cursor: pointer;
background: #000080 url(dk.gif) repeat-x;
color: #9CBDEF;
height: 25px;
line-height: 20px;
margin: 2px 0;
text-align: center;
font-size: 12px;
font-weight: bold;
}
#menu dd {
position: absolute;
z-index: 100;
left: 150px;
margin-top: -1.4em;
width: 150px;
background: #000080;
}
#menu ul {
padding: 2px;
}
#menu li {
width: 150px;
text-align: center;
font-size: 12px;
height: 25px;
line-height: 25px;
font-weight: bold;
}
#menu li a, #menu dt a {
color: #9CBDEF;
text-decoration: none;
display: block;
background: #000080 url(dk.gif) repeat-x;
}
#menu dt a:active, #menu dt a:visited{
color: #9CBDEF;
text-decoration: none;
display: block;
background: #000080 url(dk.gif) repeat-x;
}
div#menu li, div#menu li:hover{
position:relative;
}
div#menu li ul{
position:absolute;
top:0;
left:100.1%;
display:none;
}
div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu
ul li:hover ul ul ul
{display:none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul
li:hover ul
{display:block;
}
#menu li a:hover {
text-decoration: none;
color: #000080;
background: #000080 url(lt.gif) repeat-x;
}
#menu dt a:hover {
text-decoration: none;
color: #000080;
background: #000080 url(lt.gif) repeat-x;
}
h2 {
font-size: 150%;
text-align: center;
}
h3 {
font-size: 125%;
text-align: center;
}
h4 {
font-size: 100%;
text-align: center;
}
div#gregbutton {
background: #000080 url(gregdk.gif) repeat-x;
width: 175px;
text-align: center;
height: 30px;
margin-right: auto;
margin-left: auto;
line-height: 20px;
}
div#gregbutton a {
background: #000080 url(gregdk.gif) repeat-x;
width: 175px;
height: 30px;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #9CBDEF;
}
div#gregbutton a:hover {
background: #000080 url(greglt.gif) repeat-x;
color: #000080;
width: 175px;
height: 30px;
text-decoration: none;
display: block;
}
</style>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div class="sidebar">
<dl id="menu">
<dt><a href="main.html">Home</a></dt>
<dt><a href="artists.php">Artists</a></dt>
<dt><a href="feature.php">Featured Artist</a></dt>
<dt onmouseover="javascript:montre('smenu1');">Music</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');"
onmouseout="javascript:montre();">
<ul>
<li><a href="rock.php">Rock</a></li>
<li><a href="hiphop.php">Hip Hop</a</li>
<li><a href="country.php">Country</a></li>
<li><a href="instrum.php">Instrumental</a></li>
<li><a href="rap.php">Rap</a></li>
<li><a href="jazz.php">Jazz</a></li>
<li><a href="rb">R & B</a></li>
<li><a href="acoustic.php">Acoustic</a></li>
<li><a href="video.php">Video</a></li>
</ul>
</dd>
<dt><a href="dj.php">DJ's/Spinners</a></dt>
<dt><a href="comedy.php">Comedy</a></dt>
<dt onmouseover="javascript:montre('smenu2');">Events</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">
<ul>
<li><a href="july2005.php">Events Calendar</a></li>
<li><a href="past.pbp">Past Events</a></li>
</ul>
</dd>
<dt><a href="photos.php">Photo Gallery</a></dt>
<dt><a href="news.php">News</a></dt>
<dt onmouseover="javascript:montre('smenu3');">About</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');"
onmouseout="javascript:montre();">
<ul>
<li><a href="aas.php">Art A Sight</a></li>
<li><a href="gman.php">G-Man</a></li>
<li><a href="webmaster.php">Webmaster</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu4');">Vanessa's
Corner</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');"
onmouseout="javascript:montre();">
<ul>
<li><a href="vanessa/index.html">Articles</a></li>
<li><a href="vanessa/photos.html">Photo Gallery</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu5');">Contact</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');"
onmouseout="javascript:montre();">
<ul>
<li><a
href="mailto:[EMAIL PROTECTED]">G-Man</a></li>
<li><a
href="mailto:[EMAIL PROTECTED]">Webmaster</a></li>
</ul>
</dd>
<dt><a href="affiliates.php">Links</a></dt>
</dl>
</div>
<div class="maincontent">
<div id="mainlogo">
<img src="images/maineye.jpg" alt="Eye">
</div>
<h2>Artist Management, Promotion, Production, & Development</h2>
<div id="gregbutton">
<a href="mailto:[EMAIL PROTECTED]">Greg "G-Man"
Raupp</a>
</div>
<h3>Las Vegas, NV</h3>
<h3>(702) 596-9274</h3>
<h3>Please excuse our dust, the website is going through some changes
<br>and there
are always a few bugs to work out.</h3>
<div id="counter"
<applet code='counter'
codebase='http://artasightproductions.com/v-web/counter'
width='90' height='20'>
<param name='counter' value='aascouner'>
<param name='style' value='V'>
<param name='minsize' value='6'>
<param name='bgcolor' value='#FFFFFF'>
<param name='twoclicks' value='http://artasightproductions.com'>
</applet>
</div>
<div class="mainfooter">
<?
include "footer.php";
?>
</div>
</div>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
