Hi Everyone, I've recently built a simple website using dreamweaver cs4. Everything is fine in firefox, IE7 and IE8, but for some reason IE6 doesn´t want to play along . IE6 is not centering the footer under the content, but is aligning it left in the container div. Furthermore, the maincontent background image is invading the footer area. already tried align="center" and clearing floats in the footer div can someone help me out. This is my site's URL: parainglesler.com.br (page in portuguese) and here are the html and css: <!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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta name="verify-v1" content="7Frm+yQG+UQ3e4K1+9MuhtGipwwaAe339Lxo7PHnu/Q=" /> <META NAME="Keywords" CONTENT="ingles, textos profissionais em ingles, textos para website, escritor free-lance, textos corporativos, english, aula de ingles, holandes, traduçoes, traduçao"> <meta name="description" content="Textos e traduções profissionais em inglês ou holandês. Para Inglês Ler oferece textos corporativos, textos para eventos, textos para websites, ghost writer e muito mais" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>PARA INGLES LER, TEXTOS PROFISSIONAIS EM INGLES</title> <!-- InstanceEndEditable --> <link href="twoColLiqRtHdr.css" rel="stylesheet" type="text/css" /><!--[if IE]> <style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */ .twoColLiqRtHdr #sidebar1 { padding-top: 30px; } .twoColLiqRtHdr #mainContent { zoom: 1; padding-top: 15px; } /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ </style> <![endif]--> <script type="text/javascript"> <!-- 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_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_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; } } } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; } } } //--> </script> <!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable --> <style type="text/css"> <!-- body { background-color: #666; } --> </style></head> <body class="twoColLiqRtHdr" onload="MM_preloadImages('images/home2.gif','images/comofunciona2.gif','images/quemsou2.gif','images/portfolio2.gif','images/contato2.gif')"> <div id="container"> <div id="header" align="center"> <h1><img src="images/inglesheader.gif" width="835" height="123" alt="PARA INGLÊS LER, TEXTOS PROFISSIONAIS EM INGLÊS" /><br /> </h1> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://parainglesler.com.br" target="_top" onclick="MM_nbGroup('down','group1','HOME','',1)" onmouseover="MM_nbGroup('over','HOME','images/home2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/home1.gif" alt="HOME" name="HOME" width="152" height="24" border="0" id="HOME" onload="" /></a></td> <td><a href="http://parainglesler.com.br/como_funciona.html" target="_top" onclick="MM_nbGroup('down','group1','COMOFUNCIONA','',1)" onmouseover="MM_nbGroup('over','COMOFUNCIONA','images/comofunciona2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/comofunciona1.gif" alt="COMO FUNCIONA" name="COMOFUNCIONA" width="152" height="24" border="0" id="COMOFUNCIONA" onload="" /></a></td> <td><a href="http://parainglesler.com.br/quem_sou.html" target="_top" onclick="MM_nbGroup('down','group1','QUEMSOU','',1)" onmouseover="MM_nbGroup('over','QUEMSOU','images/quemsou2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Quemsou1.gif" alt="QUEM SOU" name="QUEMSOU" width="152" height="24" border="0" id="QUEMSOU" onload="" /></a></td> <td><a href="http://parainglesler.com.br/portfolio.html" target="_top" onclick="MM_nbGroup('down','group1','PORTFOLIO','',1)" onmouseover="MM_nbGroup('over','PORTFOLIO','images/portfolio2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/portfolio1.gif" alt="PORTFOLIO" name="PORTFOLIO" width="152" height="24" border="0" id="PORTFOLIO" onload="" /></a></td> <td><a href="http://parainglesler.com.br/contato.html" target="_top" onclick="MM_nbGroup('down','group1','CONTATO','',1)" onmouseover="MM_nbGroup('over','CONTATO','images/contato2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/contato1.gif" alt="CONTATO" name="CONTATO" width="152" height="24" border="0" id="CONTATO" onload="" /></a></td> </tr> </table> <br /> <p><script type="text/javascript"><!-- google_ad_client = "******************"; /* 728x15, created 4/10/09 */ google_ad_slot = "******************"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><br /> <!-- end #header --> </p> </div> <!-- InstanceBeginEditable name="sidebar" --> <div id="sidebar1"><br /> <script type="text/javascript"><!-- google_ad_client = "***************"; /* 250x250, created 4/10/09 */ google_ad_slot = "***********"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <br /> </div> <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="maincontent" --> <div id="mainContent"><br /> Escrever é uma arte e é preciso ter conhecimento profundo da lÃngua em que se escreve. Cada lÃngua tem um rÃtmo diferente, gÃrias especificas e expressões distintas. Um texto escrito por alguém que não domina essas nuances, soa estranho, não transmite confiança e não dá vontade de ler. Por isso use os serviços de: <em>PARA INGLÊS LER.</em> <p>* ELABORAÇÃO DE TEXTOS PROFISSIONAIS EM INGLÊS.<br /> * TRADUÇÕES DE PORTUGUÊS PARA INGLÊS.<br /> * TEXTOS ESPECIALIZADOS PARA WEBSITES.<br /> * TEXTOS CORPORATIVOS.<br /> * TEXTOS PARA EVENTOS.<br /> <br /> Quer contratar os serviços de <em>PARA INGLÊS LER?<br /> É fácil, clique <a href="http://parainglesler.com.br/como_funciona.html">aqui</a></em>.<br /> </p> <!-- end #mainContent --> </div> <!-- InstanceEndEditable --> <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" /> <div id="footer" align="center"> <h6><a href="http://parainglesler.com.br"><span class="footer">HOME</span></a> | <a href="http://parainglesler.com.br/como_funciona.html"><span class="footer">COMO FUNCIONA</span></a> | <a href="http://parainglesler.com.br/quem_sou.html"><span class="footer">QUEM SOU</span></a>| <a href="http://parainglesler.com.br/portfolio.html"><span class="footer">PORTFOLIO</span></a> | <a href="http://parainglesler.com.br/contato.html"><span class="footer">CONTATO</span></a><br /> <span class="footer">Copyright Américo Lucena Lage 2009</span></h6> <p> </p> </div> </div> <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"> try { var pageTracker = _gat._getTracker("UA-9340983-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> <!-- InstanceEnd --></html> Code (markup): body { font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; background-color: #600; } .twoColLiqRtHdr #container { width: 80%; /* the auto margins (in conjunction with a width) center the page */ border: 0px none #000000; text-align: center; max-width: 835px; min-width: 835px; background-color: #FFFFFF; background-image: url(images/mainbackground.gif); background-repeat: repeat-y; margin-top: 5; margin-right: auto; float: none; margin-left: auto; clip: rect(0px,0px,0px,0px); } .twoColLiqRtHdr #header { padding: 0; background-image: url(images/headerbackground.gif); background-repeat: repeat; background-position: left top; min-width: 835px; font-size: 9px; line-height: normal; display: compact; margin: auto; } .twoColLiqRtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 2px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColLiqRtHdr #sidebar1 { float: right; /* since this element is floated, a width must be given */ width: 35%; /* top and bottom padding create visual space within this div */ margin-top: 0px; margin-right: 0px; text-align: center; font-size: 0.9em; font-family: Verdana, Geneva, sans-serif; padding-top: 15px; padding-right: 40px; } .twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p { margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */ margin-right: 10px; } .twoColLiqRtHdr #mainContent { margin-right: 40%; margin-left: 40px; padding-left: 5px; text-align: left; border: 0px none #000; padding-top: 0px; font-size: 0.9em; float: none; clear: none; font-family: Verdana, Geneva, sans-serif; } .twoColLiqRtHdr #footer { padding-top: 0; padding-bottom: 0; background-color: #666; background-image: url(images/footer.gif); background-repeat: no-repeat; background-position: center top; border: 0px 0 #600; margin: 0px; clear: both; } .twoColLiqRtHdr #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } /* Miscellaneous classes for reuse */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } .footer { color: #8F1503; } Code (markup): A big thank you to anyone prepared to dedicate some time to my problem
I couldn't find any style applied to the footer element except the color and align which will not work in this situation anyway. Please post the url so i can see how it looks in the different browsers
1) if your min-width and max-width are being set the same, why are you using them? 2) Lose all that silly mm_ nonsense, you've got javascript doing CSS' job. 3) You've got bigger problems than footer placement. Invalid markup, improper heading orders, images for text with no image replacement techniques, h6 where there should probably be a UL, double breaks instead of paragraphs with paragraphs used in a nonsensical manner.... In other words all the tells of using dreamweaver as a WYSIWYG.