Hi, I'm a graphic designer who is trying to learn Dreamweaver. I'm
attempting
to build a site using WYSIWYG and my knowledge of the coding side of
things is
sadly limited. I've got the homepage looking pretty much correct, and it
tests
well in Firefox, Camino, and Safari. However the sub menu in my spry menu
bar
does not work in IE. I have also had this error message come up when I
check
the browser compatability:
121 Expanding box problem
Any content that does not fit in a fixed-width or -height box causes the
box
to expand to fit the content rather than letting the content overflow.
Affects: Internet Explorer 6.0
Likelihood: Likely
If there is anyone out there who could help me and let me know where I'm
going
wrong, as I suspect there are a lot of other things going on in my code
that
are incorrect. I apologise for my ignorance in advance!
Thanks
<!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" />
<title>HaT Homepage</title>
<style type="text/css">
<!--
body,td,th {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #AE5E27;
border-right-color: #AE5E27;
border-bottom-color: #AE5E27;
border-left-color: #AE5E27;
}
body {
background-color: #FFFFFF;
}
a {
font-size: 9px;
color: #333333;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #CC6633;
}
.horimenu {
margin: auto;
left: auto;
top: 10px;
right: auto;
bottom: auto;
background-color: #000000;
}
##banner {
background-color: #FFFFFF;
padding: 0px;
position: relative;
width: 760px;
height: 102px;
top: 0;
left: 0;
margin: auto;
}
.sky {
background-image: url(sky.jpg);
margin: auto;
height: 246px;
width: 700px;
left: auto;
top: auto;
right: auto;
bottom: auto;
}
.footer {
margin: auto;
height: 20px;
width: 760px;
background-image: url(footer.jpg);
bottom: auto;
}
.container {
background-image: url(wrapper_background.jpg);
margin: auto;
height: 610px;
width: 760px;
padding-top: 15px;
}
.wrapper {
margin: auto;
height: 530px;
width: 760px;
border: 1px solid #AE5E27;
top: 0px;
background-image: url(footer.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<link href="untitled.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper" id="wrapper">
<div id="#wrapper">
<div align="center" id="#banner"> <img src="banner.jpg" width="760"
height="108" /></div>
<p align="center"> </p>
<div class="horimenu" id="horimenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="left"><a href="#" class="style1">About us</a>
</div>
</li>
<li>
<div align="left"><a href="#" class="MenuBarItemSubmenu">What
we
do</a>
<ul>
<li>
<div align="left"><a href="#">Design for
print</a></div>
</li>
<li>
<div align="left"><a href="#">Cor****ate
identity</a></div>
</li>
<li>
<div align="left"><a href="#">Advertising</a></div>
</li>
<li>
<div align="left"><a href="#">Exhibitions</a></div>
</li>
<li>
<div align="left"><a href="#">Multimedia</a></div>
</li>
</ul>
</div>
</li>
<li>
<div align="left"><a href="#">Contact</a> </div>
</li>
</ul>
</div>
<p align="center"> </p>
<p align="center"> </p>
<div class="sky" id="#sky"></div>
<p align="center"> </p>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
|
