Solved

IE6 Absolute positioning bug

Posted on 2007-11-14
6
1,662 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Capture logon name 13 70
manage footer size 4 51
Problem to refer to value 8 45
Changing Color of Page Section 4 21
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 is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

805 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