I've got the start of a site i'm working on to look how I want in IE7 and Firefox on the PC. Problem is viewing it on any browser on a mac and in IE6 on the PC. The links don't pad properly! It's really frustrating me now.
Hopefully someone on here can give me a hand?
Link:
http://www.footprintcreative.com/Aspects Temp/New Site/nigel testing new menu.html
HTML:
CSS:
Hopefully someone on here can give me a hand?
Link:
http://www.footprintcreative.com/Aspects Temp/New Site/nigel testing new menu.html
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="nigeltestingnewmenu.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v6.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
if (theValue == true || theValue == false)
eval("obj."+theProp+"="+theValue);
else eval("obj."+theProp+"='"+theValue+"'");
}
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn">
<div id="aspectslogo"></div><!--Aspects logo image-->
<div id="leftmenu">
<ul>
<li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">About Us</a></li>
<li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','visible','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Extensions</a></li>
<li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','visible','LAYER')">New Builds</a></li>
<li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Services</a></li>
<li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Contact Us</a></li>
</ul>
</div>
<!--leftmenu-->
<div id="extensionmenu">
<ul>
<li><a href="#">Extension 1</a></li>
<li><a href="#">Extension 2</a></li>
<li><a href="#">Extension 3</a></li>
<li><a href="#">Extension 4</a></li>
<li><a href="#">Extension 5</a></li>
<li><a href="#">Extension 6</a></li>
</ul>
</div><!--extension menu-->
<div id="newbuildmenu">
<ul>
<li><a href="#">New Build 1</a></li>
<li><a href="#">New Build 2</a></li>
<li><a href="#">New Build 3</a></li>
</ul>
</div><!--newbuild menu-->
<div id="address">
<ul>
<li>Aspects Building</li>
<li>Company Limited.</li>
<li>Barry Smith,</li>
<li>Fairview,</li>
<li>Madeley Road,</li>
<li>Belbroughton.</li>
<li>DY9 9XL</li>
<li>Office: 01562 711289</li>
<li>Mobile: 07786 998089</li>
</ul>
</div><!--address-->
<div id="leftredcolumn"></div><!--left red strip below menu-->
<div class="style2" id="aspectslogotext">Building Company Ltd.</div><!--Aspects logo image-->
</div><!--left column-->
<div id="content"></div><!--<content-->
<div id="rightcolumn">
<div id="webaddress">www.aspectsbuilding.co.uk</div><!--web address-->
<div id="nhbc"></div><!--Aspects logo image-->
<div id="rightredcolumn"></div><!--left red strip below menu-->
</div><!--right column-->
</div><!--wrapper-->
</body>
</html>
CSS:
Code:
/* CSS Document */
.style1 {
color:#999999;
}
.style2 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:18px;
color:#000000;
}
body {
margin: 0 auto 0 auto;
padding: 0px;
background-color:#FFFFFF;
background-position: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
}
#wrapper {
width: 680px;
height: 800px;
background-color:#FFFFFF;
text-align: center;
margin: 0px auto 0px auto;
padding: 0 0 0 0;
position: relative;
}
#leftcolumn {
background-image: url(Images/Common/TL-Background.gif);
background-position: Top Left;
width: 315px;
height: 359px;
text-align: left;
margin: 0px;
padding: 0px;
position: relative;
float: left;
}
#aspectslogo {
background-image: url(Images/Common/Aspects-Man-Logo-New.gif);
background-position: Top Left;
width: 169px;
height: 87px;
text-align: left;
margin: 0px;
padding: 0px;
position: relative;
left: 11px;
top: 11px;
float: left;
}
#aspectslogotext {
text-align: left;
margin: 0px;
padding: 0px;
top: 95px;
left: 11px;
position: absolute;
float: left;
}
#leftmenu {
width:200;
height: auto;
margin: 0;
padding: 0;
top: 134px;
left: -158px;
position: relative;
float: left;
}
#leftmenu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
#leftmenu ul li {
font-size: 150%;
margin: 0 0 11px 0;
padding: 0;
}
#leftmenu ul li a {
padding: 5px;
margin: 0;
display:block;
text-decoration: none;
}
#leftmenu ul li a:link {color: #000000}
#leftmenu ul li a:visited {color: #000000}
#leftmenu ul li a:hover {color: #FFFFFF}
#leftmenu ul li a:active {color: #000000}
#extensionmenu {
background-image:url(Images/Common/lightpink1x1.gif);
background-repeat:repeat;
visibility: hidden;
position: absolute;
top: 174px;
left: 175px;
}
#extensionmenu ul {
list-style-type: none;
padding: 0px;
margin: 0;
text-align: left;
}
#extensionmenu ul li a {
padding: 5px;
display:block;
margin: 0;
text-decoration: none;
}
#extensionmenu ul li a:link {color: #000000}
#extensionmenu ul li a:visited {color: #000000}
#extensionmenu ul li a:hover {color: #FFFFFF}
#extensionmenu ul li a:active {color: #000000}
#newbuildmenu {
background-image:url(Images/Common/lightpink1x1.gif);
background-repeat:repeat;
visibility: hidden;
position: absolute;
top: 213px;
left: 163px;
}
#newbuildmenu ul {
list-style-type: none;
padding: 0px;
margin: 0;
text-align: left;
}
#newbuildmenu ul li a {
padding: 5px;
display:block;
margin: 0;
text-decoration: none;
}
#newbuildmenu ul li a:link {color: #000000}
#newbuildmenu ul li a:visited {color: #000000}
#newbuildmenu ul li a:hover {color: #FFFFFF}
#newbuildmenu ul li a:active {color: #000000}
#address {
background-image:url(Images/Common/pink1x1.gif);
z-index: 10;
width:auto;
background-repeat:repeat;
padding:5px 20px 5px 8px;
margin:0px;
position: absolute;
left: 11px;
bottom: -416px;
}
#address ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
}
#leftredcolumn {
background-color:#CC0000;
padding:0px 0px 0px 0px;
margin:0px;
position: absolute;
width: 144px;
height: 441px;
left: 0px;
bottom: -441px;
}
#rightcolumn {
background-image: url(Images/Common/BR-Background.gif);
bottom: 0px;
right: 0px;
width: 200px;
height: 351px;
text-align: right;
margin: 0px;
padding: 0px;
position: absolute;
float: right;
}
#webaddress {
text-align: right;
margin: 0px;
padding: 0px;
bottom: 3px;
right: 3px;
position: absolute;
float: right;
}
#rightredcolumn {
background-color:#CC0000;
padding:0px 0px 0px 0px;
margin:0px;
position: absolute;
width: 29px;
height: 449px;
right: 0px;
bottom: 351px;
}
#nhbc {
background-image: url(Images/Common/NHBC-Logo.gif);
background-position: Bottom right;
width: 69px;
height: 24px;
text-align: right;
margin: 0px;
padding: 0px;
position: absolute;
right: 25px;
bottom: 25px;
float: right;
}