[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1674
  • Last Modified:

IE6 Absolute positioning bug

I have a problem with my #middleColum totally disapearing in IE6. Any ideas why? Thanks.



The CSS

@charset "utf-8";
/* CSS Document */

body {
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
/*background-image:url(../images/bodyBg.gif);*/

}

#container {
width:100%;
height:200px;
float:left;
position:relative;

}




#leftSide{
position:absolute;
left:0px;
top:0px;
width:135px;
height:800px;
padding-left:35px;
padding-top:100px;
background-image:url(../images/leftSide.gif);


}

#rightSide{
position:absolute;
width:300px;
height:800px;
background:url(../images/rightSide.gif) no-repeat;
left:690px;
padding-left:20px;
padding-top:240px;
}
#rightSide ul{
padding:0;
margin:0;
list-style:none;
font-size:11px;
color:#FFFFFF;
}

#rightSide ul a{
text-decoration:none;
color:#FFF;
}



#home #middleColumn, #history #middleColumn, #philosophy #middleColumn, #contact #middleColumn{
position:absolute;
top:0px;
left:170px;
width:520px;
height:600px;
background-color:#00CCCC;
background-image:url(../images/mainMiddle.jpg);
display:block;
}

#courses #middleColumn, #ptCourses #middleColumn, #ftCourses #middleColumn, #shortCourses #middleColumn, #postgradCourses #middleColumn{
position:absolute;
left:170px;
float:left;
width:520px;
height:600px;
background-image:url(../images/courseMiddle.jpg);
}



<!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>Mary Reid School of Beauty</title>
<link rel="stylesheet" type="text/css" href="css/maryReid.css">
</head>
<body>
<div id="container">
      <div id="leftSide">
   
    <ul id="mainMenu">
    <li class="schoolButton"><a href="#"></a></li>
    <li class="coursesButton"><a href="#"></a></li>
    <li class="opportunitiesButton"><a href="#"></a></li>
    <li class="newsButton"><a href="#"></a></li>
    </ul>
    </div>
      
      
      
   
   
</div>
   
   
   
  <div id="middleColumn">
          <div id="content">
       
              <h1>Intro Text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vehicula justo sed enim. Maecenas tempus laoreet leo. Vestibulum sit amet est vitae pede consequat convallis.</h1>
       
        <h2>Lorum Ipsom</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur porttitor sapien sollicitudin lorem. Cras lacinia blandit felis. Aliquam erat volutpat. Nullam viverra aliquam neque. Nunc neque ante, tincidunt sit amet, feugiat ac, aliquet sit amet, arcu. Vestibulum iaculis, lorem at nonummy lobortis, nisl massa pulvinar odio, ut fermentum enim lacus id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus eu lacus. Maecenas nisl. Suspendisse massa. Nam turpis quam, pulvinar vel, adipiscing eget, vulputate in, urna. Donec vehicula quam quis pede.</p>
       
0
roscoeh23
Asked:
roscoeh23
  • 3
  • 2
1 Solution
 
oceanbeachCommented:
Hello roscoeh23,

Does this happen in other browsers?  One thing that I noticed is that some of the text is set to be white on a white background (basically invisible)...

color:#FFFFFF;

You could try changing this style to a different color.

I hope this helps!

oceanbeach
0
 
roscoeh23Author Commented:
It has nothing to do with that. The central column totally disapears.
0
 
oceanbeachCommented:
Hi roscoeh23,

That is strange, when I change the font color in the body, the center column becomes visible.  Also, without changing the font color, if I hit 'ctrl' + 'A', I see text from the center column.

This is setting all font color to white...

body {
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
/*background-image:url(../images/bodyBg.gif);*/
}

And, none of these styles are being applied...

#home #middleColumn, #history #middleColumn, #philosophy #middleColumn, #contact #middleColumn{
position:absolute;
top:0px;
left:170px;
width:520px;
height:600px;
background-color:#00CCCC;
background-image:url(../images/mainMiddle.jpg);
display:block;
}
#courses #middleColumn, #ptCourses #middleColumn, #ftCourses #middleColumn, #shortCourses #middleColumn, #postgradCourses #middleColumn{
position:absolute;
left:170px;
float:left;
width:520px;
height:600px;
background-image:url(../images/courseMiddle.jpg);
}

I wish I could have been of more help.

-OB
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.

 
TNameCommented:
Hi, you're not accessing #middleColumn at all - judging by your markup, #middleColumn is a direct child of the body element, so none of these rulesets will apply:
   #home #middleColumn,
or
   #courses #middleColumn,



These rulesets would only apply if #middleColumn was contained inside an element with the id
  #home or #history or #philosophy or #courses etc...

 

None of these is the case, so no style will apply.
If you define e.g. just #middleColumn, it should work:

#middleColumn {
position:absolute;
top:0px;
left:170px;
width:520px;
height:600px;
background-color:#00CCCC;
background-image:url(../images/mainMiddle.jpg);
display:block;
}
0
 
TNameCommented:
BTW, I guess that's what oceanbeach meant by stating:

>And, none of these styles are being applied...

If yes, then sorry, maybe I was just explaining the obvious...
0
 
oceanbeachCommented:
@TName...After rereading my post, I realize I did a poor job of explaining myself.  Your explanation is much better :)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now