Dreamweaver Divs Shifting in IE6

I have designed a site using Dreamweaver CS3 divs.  It looks perfect in IE7, however when viewed in IE 6 the divs shift positions.  Divs affected seem to be div#maintext and #divpagetext.  Any help would be greatly appreciated!!
@charset "utf-8";
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #000000;
	background-repeat: repeat-y;
	background-image: url(SiteImages/tableborder.jpg);
	background-position: center center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: absolute;
}
#footer {
	width: 780px;
	background-image: url(SiteImages/footer.gif);
	height: 65px;
	padding-top: 6px;
	padding-bottom: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	vertical-align: middle;
}
 
#footer a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
#footer a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF9900;
	text-decoration: none;
}
 
 
#header {
	margin: auto;
	padding: 0px;
	width: 780px;
}
#center {
	height: 400px;
	width: 780px;
	border: 1px solid #000000;
	background-color: #999999;
	bottom: auto;
}
 
#leftnav {
	margin: 6px;
	height: 380px;
	width: 15%;
	border: 1px solid #000000;
	float: left;
	background-color: #DADADA;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#maintext {
	background-color: #DADADA;
	width: 425px;
	margin-right: 10px;
	margin-left: 100px;
	position: relative;
	margin-top: 6px;
	height: 380px;
	padding-top: 6px;
	border: 1px solid #000000;
}
 
#rightnav {
	background-color: #DADADA;
	float: right;
	height: 374px;
	width: 25%;
	border: 1px solid #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: justify;
	padding: 6px;
	margin-top: 6px;
	margin-right: 6px;
	margin-bottom: 6px;
	margin-left: 6px;
}
#center iframe {
	border: 1px solid #000000;
	margin: 6px;
	height: 330px;
	background-color: #FFFFFF;
}
#rightnav iframe {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	height: 160px;
	padding: 0px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 8px;
	margin-left: 0px;
}
#pagetext {
	background-color: #DADADA;
	width: 635px;
	margin-right: 10px;
	margin-left: 100px;
	position: relative;
	margin-top: 6px;
	height: 380px;
	padding-top: 6px;
	border: 1px solid #000000;
}

Open in new window

ie6.jpg
ie7.jpg
cindyredoAsked:
Who is Participating?
 
yessirnosirConnect With a Mentor Commented:
...and the stylesheet,  styles.css
@charset "utf-8";
body {
        text-align: center;
        margin: 0px;
        padding: 0px;
        background-color: #000000;
        background-repeat: repeat-y;
        background-image: url(SiteImages/tableborder.jpg);
        background-position: center center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
}
#container {
		width:782px;
		margin: 0 auto;
		}
#header {
        width:782px;		
		height:125px;
}
#center {
        height: 400px;
        width: 780px;
        border: 1px solid #000000;
        background-color: #999999;
        bottom: auto;
		position:relative;
}
#leftnav {
        position:absolute;
		top:0px;
		left:0px;
		margin: 6px;
        height: 380px;
        width: 117px;
        border: 1px solid #000000;
        background-color: #DADADA;
        padding-top: 6px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
		z-index:10;
}
#pagetext {
        position: absolute;
		top:0px;
		left:131px;
		background-color: #DADADA;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 6px;
        height: 380px;
		width:426px;
        padding-top: 6px;
        border: 1px solid #000000;
		overflow:hidden;
}
#rightnav {
        position:absolute;
		top:0px;
		right:0px;
		background-color: #DADADA;
        height: 374px;
        width: 195px;
        border: 1px solid #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-align: justify;
        padding: 6px;
        margin-top: 6px;
        margin-right: 6px;
        margin-bottom: 6px;
        margin-left: 6px;
}
#pagetext iframe {
        border: 1px solid #000000;
        margin: 6px;
        height: 330px;
        background-color: #FFFFFF;
}
#rightnav iframe {
        background-color: #FFFFFF;
        border: 1px solid #000000;
        height: 160px;
        padding: 0px;
        margin-top: 10px;
        margin-right: 5px;
        margin-bottom: 8px;
        margin-left: 0px;
}
#footer {
        width: 782px;
		background-image: url(SiteImages/footer.gif);
        height: 65px;
        padding-top: 6px;
        padding-bottom: 6px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        text-decoration: none;
        vertical-align: middle;
}
 
#footer a:visited {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        text-decoration: none;
}
#footer a:link {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        text-decoration: none;
}
#footer a:active {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
}
#footer a:hover {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FF9900;
        text-decoration: none;
}

Open in new window

0
 
nanharbisonCommented:
in the place where you link to the style sheet, add this line AFTER the other style sheet link(s):
<!--[if lte IE 6]><link href="styles-ie6.css" rel="stylesheet" type="text/css"><![endif]-->

this is a conditional call to the style sheet which will only be seen if the browser is lte (less than or equal to) IE 6.

then create a new style sheet called styles-ie6.css or whatever you choose (and change the reference to it above) and add:

#maintext {
                width: 425px;
}
and keep making the width smaller until it stops being pushed down by IE 6.
0
 
cindyredoAuthor Commented:
this does not appear to be working.  i keep reducing the width on the ie6.css but it does not move.  I am attaching the ie6.css file and the transnews.cfm file -- maybe I am putting your line of code in the wrong place in the cfm file??  Thanks again for your help!!
ie6.css file:
 
@charset "utf-8";
#pagetext {
	width: 550px;
}
 
*******************************
transNews.cfm file
 
<!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>Transition News</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lte EI 6]><link href="ie6.css" rel="stylesheet" type="text/css"><![endif]-->
<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
-->
</style>
</head>
 
<body>
 
 
<div id="header"> 
  <div align="left"><img src="SiteImages/banner.jpg" alt="Banner" width="782" height="125" /></div>
</div>
 
<div id="center">
  <div id="leftnav">
    <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />
    </p>
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="index.cfm" title="Home">Home</a></li>
      <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>
      <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>
          <ul>
            <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>
            <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>
            <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>
            <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>
            <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>
            <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>
            <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>
        </ul>
      </li>
      <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>
      <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>
      <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>
    </ul>
   
  <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/vol2no3.jpg" alt="Current Rendezvous Issue" width="100" height="140" border="1" /></a>
    
<a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />
    </p>
  </div>
  <div id="pagetext">
    <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>
    
<iframe src="incTransNews.html" name="MainFrame" width="620" frameborder="0" allowtransparency="yes" scrolling="auto" marginheight="6"></iframe>
 </p>
    </div>
      
      
</a></div>
 
<cfinclude template="sitefooterInclude.cfm">
 
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
nanharbisonCommented:
you reversed the letters on line17:
<!--[if lte EI 6]>

should be <!--[if lte IE 6]>
0
 
yessirnosirCommented:
You may want to think about changing the structure of your page to avoid the IE compatibility issues entirely.  i.e. if you switch away from floats for leftnav and rightnav and use absolute positioning for those three columns then you can avoid IE6 getting confused.

I can make some suggestions about modifications, but first, I'm a bit confused too:  the screenshot makes it look like there are three divs across the center part of the page, but in the code I just see #leftnav and #pagetext.  How does the column headed "Current News" show up on the page? Is it #rightnav?

Also, are you planning the overall layout to have a fixed width of 780px, or do you want it to be able to expand?  The leftnav and rightnav 15% and 25% width specs suggest you want them to be expandable, but the <center> div is fixed at 780, so leftnav and rightnav will be fixed at 117 and 195px..  And if there are three columns, the sum of 117 + 195 + #pagetext at 635px is too big to fit in 780px, which may be the main reason IE decides to drop the middle div down.  If you can explain a bit more of what you want, I can suggest some mods to get everything where you want it.
0
 
cindyredoAuthor Commented:
yessirnosir...
Thank you for your comments.  Yes, my goal is to have all three divs on the home page in a fixed position.  They are #leftnav, #pagetext and #rightnav.  Any suggestion you have on making this cleaner would be greatly appreciated.  Also, on other pages in the site I may need the leftnav and center div to grow -- so I don't have to put all content in iframes.

Thanks so much!!
0
 
cindyredoAuthor Commented:
nanharbison:
I fixed the typo and it is still not working.  No matter what width I put in, it does not move.  
0
 
yessirnosirCommented:
OK, since I don't have all your other code I've just created a close facsimile of your page to show one way the layout could be structured.   I'll do two posts, first with the html page, then with the css.  I've surrounded everything by a centered #container, and switched the three central columns to absolute positioning.  I took a shot at setting widths roughly where you had them, but you will probably want to tweak.  Note that when you do the width math, you have to add up all the margins and padding; if I did this right I think you'll find the width of the three center columns together = (6+1+117+1+6)+(1+426+1)+(6+1+6+195+6+1+6)=780px.  Then the container, footer and header are all 782px, to account for a 1 px border on left and right of the #center div.

If you get this working, you could move to variable widths with some more work.  Two columns with variable width is easy.  Three is harder and more apt to run into browser compatibility issues.  
<!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>Transition News</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 -->
</style>
</head>
<body>
 
<div id="container">
 
    <div id="header"> 
        <div align="left"><img src="SiteImages/banner.jpg" alt="Banner" width="782" height="125" /></div>
    </div>
 
    <div id="center">
         <div id="leftnav">
            <p align="center"><img src="SiteImages/links.jpg" alt="Links" width="102" height="30" /><br />
            </p>
            <ul id="MenuBar1" class="MenuBarVertical">
              <li><a href="index.cfm" title="Home">Home</a></li>
              <li><a href="transNews.cfm" title="Transition News">Transition News</a></li>
              <li><a href="#" title="Useful Links" class="MenuBarItemSubmenu">Useful Links</a>
                  <ul>
                    <li><a href="http://transition.jsc.nasa.gov" title="JSC Transition" target="_blank">JSC Transition</a></li>
                    <li><a href="http://ksctransition.ksc.nasa.gov/index.asp" title="KSC Transition" target="_blank">KSC Transition</a></li>
                    <li><a href="https://shuttleportal.msfc.nasa.gov/msfctr/default.aspx" title="Marshall Transition" target="_blank">Marshall Transition</a></li>
                    <li><a href="http://www.nasa.gov/transition" title="Nasa Headquarters" target="_blank">Nasa Headquarters Transition</a></li>
                    <li><a href="https://sspweb.jsc.nasa.gov/tmo/" title="Space Shuttle Transition" target="_blank">Space Shuttle Transition</a></li>
                    <li><a href="https://sspweb.jsc.nasa.gov/" title="Space Shuttle Program" target="_blank">Space Shuttle Program</a></li>
                    <li><a href="https://ice2.exploration.nasa.gov/ice/site/nasa/cx/" title="Constellation Program" target="_blank">Constellation Program</a></li>
                </ul>
              </li>
              <li><a href="https://inwiki.nasa.gov/cm/blog/Rendezvous" title="Leadership Blog" target="_blank">Leadership Blog</a></li>
              <li><a href="rendindex.cfm" title="Current Issue" target="_blank">Current Issue</a></li>
              <li><a href="Archives.cfm" title="Past Issues" target="_blank">Past Issues</a></li>
            </ul>
           
          <p align="center"><a href="rendindex.cfm" target="_blank"><img src="SiteImages/vol2no3.jpg" alt="Current Rendezvous Issue" width="100" height="140" border="1" /></a>
            
                <a href="subscribe.cfm" target="_blank"> <img src="SiteImages/subscribea.jpg" alt="Subscribe" name="subscribe" width="73" height="54" border="0" id="subscribe" /></a><br />
            </p>
            </div>
          
          <div id="pagetext">
            <p><img src="SiteImages/transnews.jpg" alt="Transition News" width="620" height="30" border="0"/>
            <iframe src="incTransNews.html" name="MainFrame" width="620" frameborder="0" allowtransparency="yes" scrolling="auto" marginheight="6"></iframe></p>
          </div>  
              
         <div id="rightnav"></div>    
   </div>   <!-- close center div -->
        
    <div id="footer"><img src="SiteImages/banner.jpg" alt="dummy footer" width="782" height="50" /></div>
 
</div>   <!-- close container div -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
 
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.