Hello!
I uploaded my completed website and realized that it only works in Chrome and Safari. In IE and Firefox, the vertical spry menu does not function and the css styling on my logo isn't working properly either. I have tried to put in multiple hacks but i can't seem to get it to work because I am playing a guessing game at this point. I posted the code below and hopefully someone can help me resolve this issue.
Thanks a lot!
-Anna
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anna Sirota Photography</title>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
body,td,th {
font-family:Verdana, Geneva, sans-serif;
color:#000;
font-size:12px;
margin: auto;
}
body {
background-color:#FFF;
width: 1000px;
margin: auto;
}
a:link {
color: #000;
text-decoration: none;
background-color: transparent;
}
a:visited {
text-decoration: none;
color:#666;
}
a:hover {
text-decoration: none;
color: #F00;
}
a:active {
text-decoration: none;
color:#F00;
}
p {
font-size: 10px;
font-weight: normal;
color: #000;
}
#logo {
height: 126px;
width: 264px;
padding:0px;
float: left;
margin-left:-100px;
margin-top: 10px;
position:fixed;
z-index: 1;
border:0px;
}
#content {
position:fixed;
margin-left:auto;
margin-right:auto;
width: 1000px;
height:700px;
font-size: 24px;
font-weight: bold;
background-color: transparent;
margin-top: 50px;
border-color: #999;
border-style: solid;
padding-bottom: 15px;
border-right: 2px;
border-left: 2px;
}
#imageWrapper {
position:relative;
height:600px;
width:600px;
margin-right:auto;
margin-left:auto;
margin-top:60px;
background-color:#FFF;
float: right;
}
#bottomImage{
position:absolute;
bottom:5px;
}
#copyright {
width:250px;
height:25px;
margin-right:0 auto;
margin-left:0 auto;
font-size: 9px;
font-weight: normal;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
margin-top: 750px;
position: fixed;
}
</style>
<body>
<div id="logo"> <a href="index.html"><img src="../assets/images/site/photography_2.gif" width="264" height="126" alt="logo" /></a>
</div>
<div id="content">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">PHOTO</a>
<ul>
<li><a href="photo/portraits/portraits_1.html">Portraits</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Personal</a>
<ul>
<li><a href="photo/personal/like_walking_away/walking_away_site_1.html">Like Walking Away</a></li>
<li><a href="photo/personal/comfortable_chaos/comf_chaos_1.html">Comfortable Chaos</a></li>
<li><a href="photo/personal/identity/identity_1.html">Identity</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="motion/film_1.html" class="MenuBarItemSubmenu">MOTION</a>
<ul>
<li><a href="motion/film_1.html">Over</a></li>
<li><a href="motion/film_2.html">Breathing Water</a></li>
<li><a href="motion/film_3.html">Schism</a></li>
</ul>
</li>
<li><a href="contact/contact.html">CONTACT</a> </li>
<li><a href="links/links.html">LINKS</a></li>
</ul>
<div id="imageWrapper"><img src="../assets/images/site/daydreamer.jpg" width="400" height="600" border="0"/></div>
</div>
</div>
<div id="copyright">
© Anna Sirota 2007-2012. All rights reserved.
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
