Fixed position and css problem in IE6

Panos
Panos used Ask the Experts™
on
Hello experts.
I'm trying to use the tutorial from this page:
http://www.cssplay.co.uk/layouts/fixed.html
but unfortunately it has a conflict in IE6 with a css code i have to make divs with rounded corners
Maybe the problem is with the position:relative; of the .textPanelMiddleRight of css.
(the fixed position from div fixme is working but the rounded css code has now problem)
The code is below.Can anyone helpme?
<!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=iso-8859-7" />
<title>Untitled Document</title>
<style type="text/css">
body {height:100%; overflow-y:auto;}
#page {display:block; margin-top:50px;}
#fixme {display:block; width:154px; position:fixed; top:468px; left:816px}
* html #fixme {position:absolute;
}
 
.divcontainer {
	width:100%;
	text-align:left;
	margin-top: 10px;
	background-color: #FFF;
}
.textPanelTop {
	background-image:url(resources/fb25GreyNSmall.gif);
	height:10px;
}
.textPanelMiddleLeft {
	clear:both;
	width:100%;
	background-image:url(resources/fb32.gif);
	background-position:right;
	background-repeat:repeat-y;
}
.textPanelMiddleRight {
	clear:both;
	width:100%;
	background-image:url(resources/fb31.gif);
	background-position:left;
	background-repeat:repeat-y;
	padding:0;
	position:relative;
}
.textPanelBottom {
	background-image:url(resources/fb28.gif);
	height:15px;
	clear:both;
}
</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</head>
 
<body>
<div id="page">
<div class="divcontainer">   
          <div class="textPanelTop">
            <img alt="" 
				src="resources/fb24GreyNSmall.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="resources/fb26GreyNSmall.gif" hspace=0 vspace=0 style="float:right;">
          </div>
          
   <div class="textPanelMiddleLeft">
           <div class="textPanelMiddleRight">
           
           <table height="800px">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
           
           </div>
	      <div class="textPanelBottom"><img alt=""
				src="resources/fb27.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="resources/fb29.gif" hspace=0 vspace=0 style="float:right;"> 
	      </div>
		  
        </div>
	    </div> 
 
 
</div>       
 <div id="fixme">
 content of div fixme
 </div> 
 
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
It would help if you could tell me your domain where the resources folder is so I can see your images in action and help you with the CSS. Or if you could attach a zip of the resources folder.

Author

Commented:
Ok
here are the images
resources.zip

Commented:
panosms, can you describe the exact problem you are having. I want to make sure I address your main concerns.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I have changed a little the cfm so that i can send you three screenshots.
The first two are from IE6.
The second after scroling down the table does not move.
The third is from firefox how it should work.
<!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=iso-8859-7" />
<title>Untitled Document</title>
<style type="text/css">
body {height:100%; overflow-y:auto;}
#page {display:block; margin-top:100px; width:200px;}
#fixme {display:block; 
        width:154px; 
		position:fixed; 
		top:468px; 
		left:300px}
* html #fixme {position:absolute;
}
 
.divcontainer {
	width:100%;
	text-align:left;
	margin-top: 10px;
	background-color: #FFF;
}
.textPanelTop {
	background-image:url(resources/fb25GreyNSmall.gif);
	height:10px;
}
.textPanelMiddleLeft {
	clear:both;
	width:100%;
	background-image:url(resources/fb32.gif);
	background-position:right;
	background-repeat:repeat-y;
}
.textPanelMiddleRight {
	clear:both;
	width:100%;
	background-image:url(resources/fb31.gif);
	background-position:left;
	background-repeat:repeat-y;
	padding:0;
	position:relative;
}
.textPanelBottom {
	background-image:url(resources/fb28.gif);
	height:15px;
	clear:both;
}
</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</head>
 
<body>
<div id="page">
<div class="divcontainer">   
          <div class="textPanelTop">
            <img alt="" 
				src="resources/fb24GreyNSmall.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="resources/fb26GreyNSmall.gif" hspace=0 vspace=0 style="float:right;">
          </div>
          
   <div class="textPanelMiddleLeft">
           <div class="textPanelMiddleRight">
           
           <table height="800px" border="2"  align="center" cellpadding="1" cellspacing="1" bordercolor="#0099CC">
  <tr>
    <td>blabla</td>
    <td>blabla</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
           
           </div>
	      <div class="textPanelBottom"><img alt=""
				src="resources/fb27.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="resources/fb29.gif" hspace=0 vspace=0 style="float:right;"> 
	      </div>
		  
        </div>
	    </div>
 
 
</div>       
 <div id="fixme">
 content of div fixme
 </div> 
 
</body>
</html>

Open in new window

Author

Commented:
Sorry but i will be able to answer in a new question in about 2 hours
screenExplorer1.gif
screenExplorer2.gif
screenfirefox1.gif
screenfirefox2.gif
Commented:
Here you go. Tested in IE6 and FF 3.5
<!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=iso-8859-7" />
    <title>Untitled Document</title>
    <style type="text/css">
body {height:100%; overflow-y:auto;}
#page {display:block; margin-top:100px; width:200px;}
#fixme {display:block; 
        width:154px; 
		position:fixed; 
		top:468px; 
		left:300px}
* html #fixme {position:absolute;
}
 
.divcontainer {
	width:100%;
	text-align:left;
	margin-top: 10px;
	background-color: #FFF;
}
.textPanelTop {
	background-image:url(resources/fb25GreyNSmall.gif);
	height:10px;
}
.textPanelMiddleLeft {
	clear:both;
	width:100%;
	background-image:url(resources/fb31.gif);
	background-position:left;
	background-repeat:repeat-y;
}
.textPanelMiddleRight {
	clear:both;
	width:100%;
	float:right;
	background-image:url(resources/fb32.gif);
	background-position:right;
	background-repeat:repeat-y;
	padding:0;
 
}
.textPanelBottom {
	background-image:url(resources/fb28.gif);
	height:15px;
	clear:both;
}
</style>
<!--[if lte IE 6]>
   <style type="text/css">
       /*<![CDATA[*/ 
        html
        {
            overflow-y: hidden; padding-top:-50px;
        }
        html body {padding:10px; margin:0;}
       /*]]>*/
   </style>
<![endif]-->
</head>
<body>
    <div id="page">
        <div class="divcontainer">
            <div class="textPanelTop">
                <img alt="" src="resources/fb24GreyNSmall.gif" hspace="0" vspace="0" style="float: left;"/>
                <img alt="" src="resources/fb26GreyNSmall.gif" hspace="0" vspace="0" style="float: right;"/>
            </div>
            <div class="textPanelMiddleLeft">
                <div class="textPanelMiddleRight">
                     <table height="800px" border="2"  align="center" cellpadding="1" cellspacing="1" bordercolor="#0099CC">
                      <tr>
                        <td>blabla</td>
                        <td>blabla</td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                      </tr>
                    </table>
                </div>
                <div class="textPanelBottom">
                    <img alt="" src="resources/fb27.gif" hspace="0" vspace="0" style="float: left;"/>
                    <img alt="" src="resources/fb29.gif" hspace="0" vspace="0" style="float: right;"/>
                </div>
            </div>
        </div>
    </div>
    <br clear="all" />
    <div id="fixme">
        content of div fixme
    </div>
</body>
</html>

Open in new window

Commented:
You can remove the negative padding from line 55. That is an artifact from testing and is inneffectual anyway.

Author

Commented:
Hi Teggert.
The code is working.On my original page i use the accordian code from jquery(http://www.jqueryui.com/demos/accordion/).Unfortunately the new problem is that the div with the accordian is not moving when i scroll down.(In IE6).This will be a new question.
Thank you for your help.

Author

Commented:
Thank you again for your help.
I will post you here the url of the new question.If you want you can help me there too as it will be a part of your solution.
regards
panos

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial