No replies
asnorth
asnorth's picture
Offline
newbie
Last seen: 10 years 33 weeks ago
Timezone: GMT+1
Joined: 2010-04-14
Posts: 1
Points: 2

Hi
I created a new css layout for a simple website with a "sliding door" menu I created with the aid of a tutorial. All appears to works fine in FF, Chrome, Safari and as far as I can tell from IETester IE6 & IE8, but IE7 pushes the menu over to the right and doesn't display correctly. How can I fix this please? The test site for this is http://www.norkey.com/pov/test
This is my first attempt at a css layout.

<!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>Untitled Document</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="menu">
  <div class="nav-center">
<div id="navigation"> 
        <ul>
                <li class="home"><a href="index.html">Home</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
                <li class="demo"><a href="demo.html">Demo</a></li>
                <li class="clients"><a href="clients.html">Clients</a></li>
                <li class="about"><a href="about.html">About</a></li>
        </ul>
        </div></div>
  </div>
  <div id="content">
<table cellpadding="4px">
<tr valign="top">
<td><div align="center"><script type='text/javascript' src='swfobject.js'></script>
 
<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','400','249','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','Untitled2.mp4');
  so.addVariable('image','images/video-bg.jpg');
  so.addVariable('backcolor','917a50');
  so.addVariable('bufferlength','3');
  so.addVariable('autostart','true');
  so.write('mediaspace');
</script></div> </td><td><h3>Bringing Video Technology To Property Marketing...</h3>
Property On Video provide an innovative solution for estate agents to benefit from videos to enhance their property listings, at a price all your vendors can afford. Reports suggest that around 80% of new property searches currently begin online, and with the recent explosion in popularity of video websites there has never been a better time to utilise video technology to increase your property listing numbers.
<p>Our "Easy Video Creation" software has been developed purely with estate agents in mind. With ease of use being a top priority right from the start, we have developed a solution that allows agents to enhance their listings with the minimum effort and in the fastest time possible. We take care of liasing with your website developer to enable them to include videos on your website with the minimum of fuss. We create the video from your standard property images meaning your staff don't need to revisit your vendors property or learn the ins and outs of using a video camera. We host all videos on our servers and take all the hard work out of video creation - the process from start to finish takes your staff just minutes.</p>                                        
 
</td>
</tr>
</table>  
  </div>
 
  <div id="footer"><p>Copyright &copy; 2010 ---. All Rights Reserved.</p></div>
  </div>
</body>
</html>

#wrapper {
	width: 100%;
}
 
#menu {
	height: 34px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
body {
	background-color: #FFF;
	margin: 0px;
}
#header {
	background-image: url(../images/Header.jpg);
	background-repeat: no-repeat;
	height: 250px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#content {
	width: 880px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
}
#footer {
	height: 40px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	text-align: center;
}
 
/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	color: #7DBE26;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	color: #7DBE26;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #7DBE26;
}
h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #927B52;
}
h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #927B52;
}
h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #927B52;
}
.imgLeft {
	float: left;
}
.imgRight {
	float: right;
}
/* own menu */
.nav-center
{
	position:relative;
	float:right; 
	right:50%;
	}
 
#navigation ul {
        width: 900px; 
        height: 34px; 
        position: relative;
        top: 0px;
        float: left; 
        left: 50%; 
        background: url(../images/menu.jpg) no-repeat 0 0;
        list-style: none;
        margin: 0; padding: 0;
}
#navigation li {
        display: inline;
}
#navigation li a:link, #navigation li a:visited {
        border: none;
        width: 150px; 
        height: 34px; 
        display: block; 
        position: absolute; 
        top: 0; 
        text-indent: -7000px;
        outline: none;
}
 
#navigation li.home a:link, #navigation li.home a:visited { 
        left: 0;
}
#navigation li.services a:link, #navigation li.services a:visited { 
        left: 150px 
}
#navigation li.contact a:link, #navigation li.contact a:visited { 
        left: 300px  
}
#navigation li.demo a:link, #navigation li.demo a:visited { 
        left: 450px  
}
#navigation li.clients a:link, #navigation li.clients a:visited { 
        left: 600px  
}
#navigation li.about a:link, #navigation li.about a:visited { 
        left: 750px  
}
 
#navigation li.home a:hover {
        background: url(../images/menu.jpg) no-repeat 0px -34px; 
}
#navigation li.services a:hover {
        background: url(../images/menu.jpg) no-repeat -150px -34px; 
}
#navigation li.contact a:hover {
        background: url(../images/menu.jpg) no-repeat -300px -34px; 
}
#navigation li.demo a:hover {
        background: url(../images/menu.jpg) no-repeat -450px -34px;
}
#navigation li.clients a:hover {
        background: url(../images/menu.jpg) no-repeat -600px -34px;
}
 
#navigation li.about a:hover {
        background: url(../images/menu.jpg) no-repeat -750px -34px;
}
 
 
/* end own menu */
img
{
border:0;
}
ul {
	background-image: url(../images/PostBullets.png);
	background-repeat: no-repeat;
	background-position: left top;
}
/* begin PostBullets */
/* Start Content list */
ol, ul
{
	color: #000000;
	margin:1em 0 1em 2em;
	padding:0;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
 
li ol, li ul
{
	margin:0.5em 0 0.5em 2em;
	padding:0;
}
 
li 
{
	margin:0.2em 0;
	padding:0;
}
 
ul
{
	list-style-type: none;
}
 
ol
{
	list-style-position:inside;
 
}
 
 
 
.list li
{
	padding:0 0 2px 25px;
	line-height:1.2em;
}
 
.list ol li, .list ul ol li
{
	background: none;
	padding-left:0;
}
 
.list ul li, .list ol ul li 
{
	background-image: url('../images/PostBullets.png');
	background-position: left top;
	background-repeat:no-repeat;
	padding-left:25px;
}
 
 
/* Finish Content list */
/* end PostBullets */

Would appreciate some help.
Thanks
Tony