• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1250
  • Last Modified:

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
0
cindyredo
Asked:
cindyredo
  • 3
  • 3
  • 2
1 Solution
 
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
 
nanharbisonCommented:
you reversed the letters on line17:
<!--[if lte EI 6]>

should be <!--[if lte IE 6]>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
yessirnosirCommented:
...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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now