Website Design Forum

**herbal_ali** · 06:18 PM

I'm currently using DW MX 2004 to create my web pages. when i test them in IE they appear normal, but when i test them in firefox some of the layers are shifted to the bottom or the top. Why does this happen?
Thank you

Edit: here are some screenies:

http://img333.imageshack.us/my.php?i...roblem25gx.png

http://img250.imageshack.us/my.php?i...problem4ku.jpg

As you can see the spacing is different with each browser.

**vangogh** · 01-15-2006, 02:19 AM

Could you post the code for the page?

There could be lot of reasons why the spacing is different. I'm not a Dreamweaver person, but if I could see the code I may be able to figure out what's happening.

**praveen** · 01-15-2006, 06:25 AM

as vangogh said, we cant say much without the code and thats not a dreamweaver issue.

most likely a layer/div issue.

**herbal_ali** · 11:02 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>VigoVitamins.com - Get essential vitamins &amp; nutrients with natural products</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="JavaScript" type="text/JavaScript">
 <!--
 function MM_reloadPage(init) {  //reloads the window if Nav4 resized
   if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
 }
 MM_reloadPage(true);
 //-->
 </script>
 <style type="text/css">
 <!--
 .style18 {font-size: 12px; font-family: Arial;}
 -->
 </style>
 <link rel="stylesheet" href="container.css" type="text/css">
 <style type="text/css">
 <!--
 a:link {
     text-decoration: none;
 }
 a:visited {
     text-decoration: none;
 }
 a:hover {
     text-decoration: none;
 }
 a:active {
     text-decoration: none;
 }
 .style29 {
     color: #FFFFFF;
     font-family: "Blippo Light SF";
     font-weight: bold;
     font-size: 21px;
 }
 .style34 {
     color: #FFFFFF;
     font-size: 16px;
     font-family: Arial;
     font-weight: bold;
 }
 .style36 {
     font-size: 20px;
     font-family: "Blippo Light SF";
     color: #FFFFFF;
     font-weight: bold;
 }
 .style37 {font-size: 21px}
 .style41 {
     font-family: Arial;
     font-weight: bold;
 }
 .style42 {font-size: 36px}
 -->
 </style>
 <!--[if gte IE 5.5000]>
 <script language="JavaScript">
 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
    {
    for(var i=0; i<document.images.length; i++)
       {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
          var imgID = (img.id) ? "id='" + img.id + "' " : ""
          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
          var imgStyle = "display:inline-block;" + img.style.cssText 
          if (img.align == "left") imgStyle = "float:left;" + imgStyle
          if (img.align == "right") imgStyle = "float:right;" + imgStyle
          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle        
          var strNewHTML = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
          img.outerHTML = strNewHTML
          i = i-1
          }
       }
    }
 window.attachEvent("onload", correctPNG);
 </script>
 <![endif]-->
 </head>
 <body bgcolor="#CCFFCC">
 <div id="container">
 <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 5px; top: 2px;"><img src="template5.JPG" width="790" height="1114"></div>
 <div id="Layer2" style="position:absolute; width:785px; height:41px; z-index:2; left: 8px; top: 107px;"><a href="http://www.google.com"><img src="http://www.webmaster-talk.com/images/home.png" width="123" height="39" border="0"></a><img src="http://www.webmaster-talk.com/images/home.png" width="151" height="39"><img src="http://www.webmaster-talk.com/images/home.png" width="176" height="39"><img src="http://www.webmaster-talk.com/images/bannerend.png" width="332" height="39"></div>
 <div id="Layer3" style="position:absolute; left:8px; top:3px; width:786px; height:14px; z-index:3"><img src="http://www.webmaster-talk.com/images/BAR2.jpg" width="784" height="15"></div>
 
 <div id="Layer4" style="position:absolute; left:8px; top:1086px; width:784px; height:31px; z-index:4"><img src="http://www.webmaster-talk.com/images/BAR.jpg" width="784" height="29"></div>
 <div id="Layer12" style="position:absolute; left:13px; top:21px; width:543px; height:86px; z-index:12"><img src="http://www.webmaster-talk.com/images/title.png" width="482" height="86"></div>
 <div id="Layer5" style="position:absolute; left:7px; top:1052px; width:783px; height:32px; z-index:21">
     <div align="center" class="style18"><strong>Home - Products  - Contact Us</strong></div>
 </div>
   <div id="Layer6" style="position:absolute; left:10px; top:1091px; width:783px; height:32px; z-index:22">
 <div align="center"><span class="style18"><strong>Vigovitamins.com &copy; 2006</strong></span></div>
 </div>
   <div id="Layer7" style="position:absolute; width:148px; height:374px; z-index:33; left: 34px; top: 172px;">
     <p class="style34">Product Categories go here </p>
   </div>
   <div id="Layer14" style="position:absolute; width:113px; height:33px; z-index:29; left: 13px; top: 115px;">
     <div align="center"><a href="http://www.google.com" class="style29">Home</a></div>
 </div>
   <div id="Layer15" style="position:absolute; width:140px; height:35px; z-index:30; left: 133px; top: 114px;">
     <div align="center" class="style36 style37">Products</div>
 </div>
 <div id="Layer16" style="position:absolute; width:157px; height:34px; z-index:31; left: 287px; top: 114px; color: #ECE9D8; font-size: 20px; font-family: "cooper Black;>
     <div align="center" class="style29">Contact Us </div>
 </div>
 <div id="Layer17" style="position:absolute; width:183px; height:431px; z-index:32; left: 24px; top: 159px;"><img src="http://www.webmaster-talk.com/images/box.png" width="184" height="407"></div>
 <div id="Layer8" style="position:absolute; width:193px; height:555px; z-index:34; left: 588px; top: 266px; color: #000000; font-size: 16px; font-family: Arial; font-weight: bold;">
     <p>Special offers or recommendations with small pictures go here </p>
     <p>Special offers or recommendations with small pictures go here </p>
     <p>Special offers or recommendations with small pictures go here </p>
     <p>Special offers or recommendations with small pictures go here </p>
     <p>Special offers or recommendations with small pictures go here </p>
     <p>Special offers or recommendations with small pictures go here </p>
     <p>Special offers or recommendations with small pictures go here </p>
 </div>
 <div id="Layer9" style="position:absolute; width:350px; height:197px; z-index:35; left: 230px; top: 272px; font-family: Arial; font-weight: bold;">
     <p>Welcome message with description of site </p>
     <p>Welcome message with description of site </p>
     <p>Welcome message with description of site </p>
     <p>Welcome message with description of site </p>
     <p>Welcome message with description of site </p>
 </div>
 <div id="Layer10" style="position:absolute; width:186px; height:115px; z-index:36; left: 26px; top: 592px;"><img src="http://www.webmaster-talk.com/images/searchbox.png" width="183" height="159"></div>
 <div id="Layer11" style="position:absolute; width:171px; height:139px; z-index:37; left: 36px; top: 605px; font-family: Arial; font-weight: bold; color: #FFFFFF;">Search Box for products </div>
 <div id="Layer13" style="position:absolute; width:347px; height:338px; z-index:38; left: 230px; top: 481px;"><img src="http://www.webmaster-talk.com/images/teasmall.png" width="316" height="338"></div>
 <div id="Layer18" style="position:absolute; width:336px; height:115px; z-index:39; left: 449px; top: 847px; font-family: Arial; font-weight: bold;">
     <p>Pay with Paypal/Moneybookers/Worldpay</p>
     <p>Pay with Paypal/Moneybookers/Worldpay</p>
     <p>Pay with Paypal/Moneybookers/Worldpay</p>
 </div>
 <div id="Layer19" style="position:absolute; width:193px; height:115px; z-index:40; left: 238px; top: 845px; font-family: Arial; font-weight: bold;">
     <p>SSL Secured Payments </p>
     <p>SSL Secured Payments </p>
     <p>SSL Secured Payments </p>
 </div>
   <div id="Layer20" style="position:absolute; width:563px; height:57px; z-index:41; left: 224px; top: 173px;">
     <p align="center" class="style41 style42">Chitika/Clicksor Advertisement</p>
   </div>
 <div id="Layer21" style="position:absolute; width:200px; height:182px; z-index:42; left: 20px; top: 777px; font-family: Arial; font-weight: bold;">
     <p>Delivery time and costs </p>
     <p>Delivery time and costs </p>
     <p>Delivery time and costs </p>
     <p>Delivery time and costs </p>
     <p>Delivery time and costs </p>
 </div>
 <div id="Layer22" style="position:absolute; width:214px; height:573px; z-index:43; left: 575px; top: 259px;"><img src="http://www.webmaster-talk.com/images/whitebox.png" width="211" height="535"></div>
 </body>
 </html>

**vangogh** · 01-15-2006, 01:59 PM

herbal, I've looked through your code and it's very hard to tell what exactly is going on. If the page is online somewhere a link would help.

What I think is going on is that Firefox and IE sometimes treat nested divs with positioning a little different. What I usually do to make things work is position things for Firefox first and get it to look right there. For IE I've discovered a hack that works with all css properties. If you add an underscore to the beginning of the property then all browsers other than IE will ignore it, but IE will treat it as the property without the underscore.

So for your site play around with the 'top' property so it looks how you want it in Firefox and then add _top to modify things for IE.

The _top value will need to come after the top value. IE will use the value for whichever comes last in the order.

So you might have code that looks like:

position:absolute; top 100px; _top:120px

I'm thinking you'll only need to play around with the 'top' values to get things working.

One other word of advice. Try to give your ids and classes more meaningful names. It looks like you're just using the default names in Dreamweaver. For example the div with the clicksor text would be better with an id="clicksor" instead of id="layer 21" Using meaningful names will help tremendously when you have to go back to some code and debug or change it.

**herbal_ali** · 05:04 PM

EDIT: i udnerstand what you mean now van gogh and it works, ty

**vangogh** · 01-15-2006, 07:40 PM

Glad to have helped.