Solved

IE6 Absolute positioning bug

Posted on 2007-11-14
6
1,660 Views
Last Modified: 2011-09-20
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
Comment
Question by:roscoeh23
  • 3
  • 2
6 Comments
 
LVL 12

Expert Comment

by:oceanbeach
ID: 20280445
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
 

Author Comment

by:roscoeh23
ID: 20280620
It has nothing to do with that. The central column totally disapears.
0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 20280907
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
Highfive Gives IT Their Time Back

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!

 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 20281953
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
 
LVL 28

Expert Comment

by:TName
ID: 20281983
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
 
LVL 12

Expert Comment

by:oceanbeach
ID: 20283307
@TName...After rereading my post, I realize I did a poor job of explaining myself.  Your explanation is much better :)
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 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

15 Experts available now in Live!

Get 1:1 Help Now