?
Solved

IE6 Absolute positioning bug

Posted on 2007-11-14
6
Medium Priority
?
1,666 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 28

Accepted Solution

by:
TName earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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.…
Suggested Courses
Course of the Month14 days, 22 hours left to enroll

771 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