Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem in IE6

Status
Not open for further replies.

jshurst

Programmer
Oct 27, 2004
1,158
US
Can someone tell me why this isn't working in IE6? It works perfectly in IE7 and Firefox, but for IE6 it doesn't allow scrolling of the content div.

Code:
body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background-color:Black;
  font-family:verdana, sans-serif; 
  font-size:10px;
  overflow: hidden; 
  color:Gray;
  }
  hr 
  {
    color:Black;
    width:100%;
    text-align:left;
  }
a:link {
    color: blue; 
}
a:visited {
    color: green; 
} 
a:hover {
    color: blue; 
}
  #header {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:46px; 
  overflow:hidden;
  background:Black url(../images/blockback.jpg) repeat-x;
  color:White;
  vertical-align:bottom;
  text-align:right;
  }
  #footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  height:30px; 
  overflow:hidden; 
  text-align:right; 
  background:Green url(../images/BlackGlassFooter.gif) repeat-x;
  color:White;
  }
  #contents {
  position:fixed; 
  top:46px;
  left:25%;
  bottom:30px; 
  right:0; 
  overflow:auto; 
  background-color:Black;
  border-left:solid 1px Gray;
  border-top:solid 1px Green;
  border-bottom:solid 1px Green;
  padding-left:5px;
  }
  #left {
  position:fixed;
  float:left;
  top:46px;
  text-align:right;
  overflow:hidden;
  background-color:Black;
  bottom:46px;
  height:100%;
  width:24%
  }
  .HeaderBackground 
  {
    background:Green url(../images/blockback.jpg) repeat-x;
  }
   .HeaderBackground2 
  {
    background:Green url(../images/blockbackgreen.jpg) repeat-x;
  }
  /* for internet explorer */

* html body {
  padding:46px 0 30px 0;
  }

* html #contents {
  height:100%; 
  width:100%;
  position:fixed; 
  top:46px;
  left:25%;
  bottom:30px; 
  right:0; 
  overflow:auto; 
  background-color:Black;
  border-left:solid 1px Gray;
  padding-left:5px; 
  }
 * p {width:250px;}
 
Could you post a link to the actual page so we can see what the HTML is doing?

- George
 
Sure. This is just my personal site and I'm using asp.net to create it. If you hold Ctrl and use the scroll wheel you can see that there is more information than what is displaying on the page...


Also on the main page ( why doesn't the the right side (main window) extend down the page?

If you compare it in Firefox then it displays how I want it to.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
Thanks for the help with this.
 
Anyone see anything wrong with this?

Basically I just want to have a header, a left side, a main content div, and a footer. I only want the main content div to scroll and I want the header and footer always to be at the top and bottom of the viewable page.

Any help would be appreciated.
 
It is hard to say, but I would start with easier things. For example, IE6 (not sure about 7) does not support position: fixed. I don't know exactly what it does if it is used, but you can be sure not to expect expected results. And looking at the page design, I see no need for the position: fixed to begin with, or I should say, it won't ever come to play the way the page is laid out.

Second is the problem with the size and position of your contents box. You position it via left, right, top, bottom. IE has had problems with that in the past, ignoring right and bottom when left and top were specified. So that could be one of the reasons. Second is in the inherent behaviour of this kind of positioning. Say my screen is 1024 pixels wide. When you specify your box as 100%, that will means the box will be 1024px wide on my screen. And then you specify that this box should be shifted 25% to the left (so 256px). Now the browser renders this box starting from pixel 257 and ends 1024px to the right at 1281px. Which means your box is ending outside my screen size. Same goes with height. In FF you're not explicitly specifying any width or height, so the box adjusts to fit. In IE however you have the width and height and the box flies off the screen.

Lastly, I would say that your layout of the page is pretty simple but your css behind is overly complicated. Why not just have two floated columns, a header and a footer and all just flowing nicely on the page.
 
If I could simplify it that would be great. I'm not very experienced with CSS so I found this example online a tweaked it a little bit. I will try your suggestions, especially the last one...
Why not just have two floated columns, a header and a footer and all just flowing nicely on the page.

If you have time could you give me an example, otherwise I will just google it.

Thanks for your help.

J
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top