Solved

IE6 Absolute positioning bug

Posted on 2007-11-14
6
1,661 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Box Model and Styling 12 34
Phone Dialer 5 60
(URGENT) Help HTML and CSS Resizing Images 2 39
slider is moved too far too the right...how to move back left? 4 36
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

912 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

16 Experts available now in Live!

Get 1:1 Help Now