Nov 5th, 2007, 10:33
|
|
Junior Member
|
|
Join Date: Oct 2007
Location: London
Age: 24
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
|
[SOLVED] Cross browser alignment
Having some problems getting my page to align properly in firefox and IE 6.0. Here is my code, any suggestions on improvement and getting the alignment right will be greatly appreciated:
- Code: Select all
<!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>Buy a business</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#container {
width: 996px; /*your container div width*/
margin: 0 auto; /*this is the magic word to center your div in the center(horizontal) of your screen*/
}
#header {
width: auto;
height: 140px;
}
#left_container {
float: left;
width: 195px;
height: 800px;
margin: 5px 0px 5px 0;
}
#centre_container {
margin: 5px 200px;
width: auto;
height: 800px; /*set this to auto if you want the height depends on the content*/
}
#right_container {
margin: 5px 0 5px 5px;
float: right;
width: 195px;
height: 800px;
}
#footer {
height: 170px;
width: auto;
clear: both;
}
#buy_but {
position: relative;
width :auto;
height :auto;
left :0px;
top :50px;
}
#logo {
position:relative;
height : auto;
width : auto;
left :343px;
top :-40px;
}
#subnav {
position:relative;
height :auto;
width :auto;
top :0px;
left :-1px;
}
-->
</style>
<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_preloadImages() { //v3.0
var d=document;
if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Images/Franchise_nav_but_mouseover.gif','Images/Broker_nav_mouseover.gif','Images/myaccount_nav_mouseover.gif','Images/faq_nav_but_mouseover.gif','Images/about_nav_but_mousover.gif','Images/Contact_nav_but_mouseover.gif')">
<div id="container">
<div id="header">
<div id="buy_but">
<img src="Images/buy_nav_but3.gif" alt="Buy a business" width="117" height="47" longdesc="Images/buy_nav_but3.gif"/><a href="seller_home_test.html" onmouseover "MM_swapImage ('Sell_but','','Images/Sell_nav_but_mouseover.gif',1)"><img src="Images/Sell_nav_but.gif" alt="Sell my business" name= "Sell_but" width="117" height="47" border="0" id="Sel_but" /></a><a href="Franchise_home.html" onmouseout="MM_swapImgRestore()" onmouseover= "MM_swapImage('franchise_but','','Images/Franchise_nav_but_mouseover.gif',1)"><img src="Images/franchise_nav_but.gif" alt="Buy a franchise" name= "franchise_but" width="117" height="47" border="0" id="franchise_but" /></a><a href="broker_home.html" onmouseout="MM_swapImgRestore()" onmouseover= "MM_swapImage('broker_but','','Images/Broker_nav_mouseover.gif',1)"><img src="Images/broker_nav_but.gif" alt="Buy and Sell businesses" name="broker_but" width="118" height="47" border="0" id="broker_but" /></a><img src="Images/nav_middle_spacer.gif"/><a href="My_account.html" onmouseout "MM_swapImgRestore()" onmouseover="MM_swapImage('My_Account_but','','Images/myaccount_nav_mouseover.gif',1)"><img src="Images/myaccount_nav_but.gif" alt= "Login to access your account " name="My_Account_but" width="118" height="47" border="0" id="My_Account_but" /></a><a href="FAQ_home.html" onmouseout= "MM_swapImgRestore()" onmouseover="MM_swapImage('FAQ_but','','Images/faq_nav_but_mouseover.gif',1)"><img src="Images/faq_nav_but.gif" alt="Frequently asked Questions" name="FAQ_but" width="117" height="47" border="0" id="FAQ_but" /></a><a href="About_home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About_but','','Images/about_nav_but_mousover.gif',1)"><img src="Images/about_nav_but.gif" alt="A little bit about us" name ="About_but" width="117" height="47" border="0" id="About_but" /></a><a href="Contact_home.html" onmouseout="MM_swapImgRestore()" onmouseover= "MM_swapImage('Contact_but','','Images/Contact_nav_but_mouseover.gif',1)"><img src="Images/contact_nav_but.gif" alt="Get in touch with us!" name= "Contact_but" width="116" height="47" border="0" id="Contact_but" /></a> </div>
<div id="logo"><img src="Images/logo_transparent background copy.gif" /></div>
<div id="subnav"><img src="Images/buy_nav_panel2.gif"/>
</div>
</div>
<div id="left_container"></div>
<div id="right_container"></div>
<div id="centre_container">
</div>
<div id="footer" >Footer</div>
</div>
</body>
</html>
|
[SOLVED] Cross browser alignment
Similar Threads
