Hello,
(Note: My browser versions are Firefox 1.5 and Internet Explorer 6.)
I started learning CSS a few weeks ago for a school project and I think I
understand the basics, but IE's weird behaviour keeps bugging me.
I've managed to solve all the important issues (well, some went away
automatically, which is okay too), except for this one. (Can't give a link,
since it's still on the intra-net.)
My site layout has a header and footer spanning the browser, height defined
in pixels, with a div I called 'main' in between. This 'main' div contains a
div called 'left' with the navigation and a div called 'content'. All of
these divs are positioned absolutely. (I used * html hacks for IE.)
Now, this is where it becomes interesting. (I think.)
I want my main division to have an image as background, resized to make it
fill the height (using height: 100%; width: auto;).
I now have two divs (background and content) in my 'main' div, both
positioned absolutely, stacked right on top of eachother.
This works, provided I nest my two divs in another div (direct sub-div of
and basically identical to 'main') to ensure that IE will handle the
percentages correctly.
The html code (summary):
<div id="main">
<div id="content-container">
<div id="background">
<img>
</div>
<div id="content">
<p></p>
</div>
</div>
</div>
That is, it works for the height. Strange things happen to the width in IE:
- when loading (anything except refreshing, so address bar or links, even
resizing), everything is or becomes fine
- when refreshing, the image is 'squared', that is, it is distorted to form
a square with height: 100%
The home page is a special version of this setup, without a background div
but with a 'homemade' image map consisting of several images forming one
picture. The heights are set to 55% for the first row and 45% for the
second: these images are also 'squared' on refreshing.
Apparently, the number of divs stacked on top of each other in main has
nothing to do with it (I also have a version with a back-background, which
has three stacked divs).
I seem to remember I read something about refreshing changing which div IE
uses as a parent, but I can't find the page. Also, it seems as if that can't
be the problem, since auto doesn't depend on a parent. Well, it depends on
height which depends on the parent, but that does not change...
I did find a few reports of (similar but not identical) issues *solved* by
refreshing: I seem to have it the other way around.
Any help would be greatly appreciated. I hope I included all the information
you need.
Bye,
Peter
P.S. So far, I've managed to get everything working using normal CSS and the
* html hack: I prefer not to use javascript and/or any of the slash hacks
since the latter make the code look so weird. I'll use them if I need them,
I greatly respect the genius of the people who invented them, but I'd rather
avoid them. As for javascript: I try not to use scripts, since some people
disable them for security reasons.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
