PDA

View Full Version : div layout ok in IE7 and FF but not working properly in IE6



kingdomweb
Dec 17th, 2008, 03:36 PM
I am having an issue with a new website www.metalogic.ie viewing in IE6.

Can anyone advise a fix for this?

kingdomweb
Dec 17th, 2008, 09:56 PM
Sorry,

I should have posted the CSS and the HTML used for the site!

Here is HTML:


<!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><title>Metalogic, Galway, Ireland | IT Services | Database Managed Service | Oracle &amp; Microsoft Software Development | Goldmine | Microsoft Small Business Server</title>
<link href="css/style.css" type="text/css" rel="stylesheet"></link>
<link href="css/lightbox.css" type="text/css" rel="stylesheet"></link>
<script src="js/prototype.lite.js" type="text/javascript"></script>
<script src="js/moo.fx.js" type="text/javascript"></script>
<script src="js/litebox-1.0.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
</head>
<body>
<center>
<div style="WIDTH: 925px">
<div id="header" style="CLEAR: both;">
<script type="text/javascript">
//<![CDATA[
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0] = ["images/logo.jpg", "#", ""];fadeimages[1] = ["images/logo1.jpg", "#", ""];fadeimages[2] = ["images/logo2.jpg", "#", ""];fadeimages[3] = ["images/logo3.jpg", "#", ""];fadeimages[4] = ["images/logo4.jpg", "#", ""];fadeimages[5] = ["images/logo5.jpg", "#", ""]; fadeimages[6] = ["images/logo6.jpg", "#", ""]; fadeimages[7] = ["images/logo7.jpg", "#", ""]; fadeimages[8] = ["images/logo8.jpg", "#", ""]; fadeimages[9] = ["images/logo9.jpg", "#", ""];fadeimages[10] = ["images/logo10.jpg", "#", ""];fadeimages[11] = ["images/logo11.jpg", "#", ""];fadeimages[12] = ["images/logo12.jpg", "#", ""];fadeimages[13] = ["images/logo13.jpg", "#", ""];fadeimages[14] = ["images/logo14.jpg", "#", ""];fadeimages[15] = ["images/logo15.jpg", "#", ""];fadeimages[16] = ["images/logo16.jpg", "#", ""];fadeimages[17] = ["images/logo17.jpg", "#", ""];
var fadebgcolor="white";

////NO need to edit beyond here/////////////

var fadearray=new Array(); //array to cache fadeshow instances
var fadeclear=new Array(); //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all;

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause;
this.mouseovercheck=0;
this.delay=delay;
this.degree=10; //initial opacity degree (10%)
this.curimageindex=0;
this.nextimageindex=1;
fadearray[fadearray.length]=this;
this.slideshowid=fadearray.length-1;
this.canvasbase="canvas"+this.slideshowid;
this.curcanvas=this.canvasbase+"_0";
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages;
this.imageborder=parseInt(borderwidth);
this.postimages=new Array(); //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image();
this.postimages[p].src=theimages[p][0];
}

var fadewidth=fadewidth+this.imageborder*2;
var fadeheight=fadeheight+this.imageborder*2;

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>');

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++;
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay);
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 920, 160, 0, 1000, 0);
//]]>
</script>
<div id="flashcontent"></div>

<div style="CLEAR: both; FONT-SIZE: 6px; HEIGHT: 4px"></div>
<div style="CLEAR: both" align="center">
<div class="border_top"></div>
<div id="body">
<div class="left">
<!-- sub nav -->
<div>
<ul class="sublinks">
<li><a title="Metalogic homepage" href="index.html">Home</a> </li>
<li><a title="About Metalogic" href="metalogic/company_profile.html">Metalogic</a>
<ul>
<li><a title="About Metalogic - Company Profile" href="metalogic/company_profile.html">Profile</a></li>
<li><a title="About Metalogic - Why Metalogic" href="metalogic/why_metalogic.html">Why Metalogic</a></li>
<li><a title="About Metalogic - Recruitment" href="metalogic/recruitment_at_metalogic.html">Recruitment</a></li>
<li><a title="About Metalogic - News" href="metalogic/latest_news.html">News</a></li>
</ul></li>
<li><a title="Metalogic's Services" href="services/index.html">Services</a>
<ul>
<li><a title="Metalogic's Oracle Managed Services" href="services/oracle_managed_services.html">Oracle Managed Services</a></li>
<li><a title="Metalogic's Oracle Consulting Services" href="services/oracle_consulting.html">Oracle Consulting</a></li>
<li><a title="Metalogic's Resourcing Services" href="services/resourcing.html">Resourcing</a></li>
<li><a title="Metalogic's Solution Design and Delivery Services" href="services/solution_design_and_delivery.html">Solution Design and Delivery</a></li>
</ul></li>
<li><a title="Oracle Licensed Products from Metalogic" href="oracle_licensed_products/index.html">Oracle Licensed Products</a>
<ul>
<li><a title="Oracle Licensed Products from Metalogic - Oracle Database 11g" href="oracle_licensed_products/oracle_database_11g.html">Oracle Database 11g</a></li>
<li><a title="Oracle Licensed Products from Metalogic - Oracle Fusion Middleware" href="oracle_licensed_products/oracle_fusion_middleware.html">Oracle Fusion Middleware</a></li>
<li><a title="Oracle Licensed Products from Metalogic - Oracle Application Express" href="oracle_licensed_products/oracle_application_express.html">Oracle Application Express</a></li>
</ul></li>
<li><a title="Contacting Metalogic" href="metalogic/contact_metalogic.html">Contact</a> </li>
</ul></div>
<!-- end sub nav -->
<div style="CLEAR: both; HEIGHT: 10px"></div>
<div class="news">
<div class="news_head">News</div>
<div style="CLEAR: both; FONT-SIZE: 15px">&nbsp;</div>
<div class="hometext_">
<iframe id="ifr" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px" src="news.html" frameborder="0" width="175" scrolling="no" height="190"></iframe></div></div>
</div>
<div style="FLOAT: left; WIDTH: 670px">
<div class="body_home">
<h1>Metalogic - Oracle IT Services</h1>
<p>Established in Ireland in 2000, Metalogic provides Oracle based IT services to clients nationwide. As an Oracle Certified Partner, we deliver <b>cost effective and professional solutions</b> to companies across a number of sectors including Financial Services, Healthcare and Government.</p>
<table>
<tbody>
<tr>
<td><a id="home_oracle" href="services/oracle_managed_services.html" title=""><span>oracle</span></a></td>
<td><a id="home_consulting" href="services/oracle_consulting.html" title=""><span>consulting</span></a></td>
<td><a id="home_resourcing" href="services/resourcing.html" title=""><span>resourcing</span></a></td>
<td><a id="home_solutions" href="services/solution_design_and_delivery.html" title=""><span>solutions</span></a></td>
</tr></tbody></table>
<p>At Metalogic, our certified team provides the highest levels of expertise and support. We are motivated to deliver value-for-money solutions and to develop long term relationships with our clients.<br />
<br />
</p>
<p><font color="#ab1212"><b>Contact us today to see how we can help !</b></font></p>
<p><b><img src="images/phone.jpg" alt="telephone number" width="19" height="32" align="middle" border="0" /></b>: +353 91 745567<br />
<b><img src="images/email.jpg" alt="email address" width="19" height="26" align="middle" border="0" /></b>: <a href="metalogic/contact_metalogic.html">[email protected]</a></p>
<div align="right">
</div>
</div></div>
<div style="CLEAR: both">&nbsp;</div></div>
<div class="border_footer"></div></div>
<div style="PADDING-TOP: 6px">
<div class="border_top_1"></div>
<div class="background">
<div class="div_link"><a class="link" title="Metalogic homepage" href="index.html">Home</a>| <a class="link" title="About Metalogic" href="metalogic/company_profile.html">Metalogic</a> | <a class="link" title="Metalogic's Services" href="services/index.html">Services</a> | <a class="link" title="Oracle Licensed Products from Metalogic" href="oracle_licensed_products/index.html">Products</a> | <a class="link" title="Contacting Metalogic" href="metalogic/contact_metalogic.html">Contact</a> | <a class="link" title="Metalogic website sitemap" href="sitemap.html">Sitemap</a></div>
<div class="copy">
2008 Metalogic Ltd. Galway Technology Centre, Mervue Business Park, Galway, Ireland</div>
</div>
<div class="border_footer_1"></div><div class="copy">
</div>
</div></div></div>
</center><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-743135-44");
pageTracker._trackPageview();
</script></body></html>


and I have attached the CSS.

I believe the issue is the possibility of double margining between the navigation .left and the body text .body_home.

If anyone can point me in the right direction on this I would appreciate it.