Solved

Dreamweaver Divs Shifting in IE6

Posted on 2008-10-09
8
1,230 Views
Last Modified: 2012-05-05
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
Comment
Question by:cindyredo
  • 3
  • 3
  • 2
8 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 22681537
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
 

Author Comment

by:cindyredo
ID: 22715472
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
 
LVL 17

Expert Comment

by:nanharbison
ID: 22715781
you reversed the letters on line17:
<!--[if lte EI 6]>

should be <!--[if lte IE 6]>
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22718429
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:cindyredo
ID: 22721315
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
 

Author Comment

by:cindyredo
ID: 22722119
nanharbison:
I fixed the typo and it is still not working.  No matter what width I put in, it does not move.  
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22722188
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
 
LVL 14

Accepted Solution

by:
yessirnosir earned 500 total points
ID: 22722198
...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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now