Stylesheets - Disappearing layers

Author

Disappearing layers

Gerry Vandermaesen

2006-04-17, 6:53 pm

Hi,

I cannot find an explanation for the problem I have encountered. As far
as I can tell, Internet Explorer does not display a layer with absolute
positioning which is followed by a floating layer. It just disappears,
and reappears when I remove the float.

Have a look at http://users.skynet.be/fa800152

You'll see that the navigation displays fine in Firefox on the top of
the screen, but it's not visible at all in Internet Explorer.

Any explanation for this problem? As I try to understand the bug to be
able to find a solution.

Regards,

Gerry.

axlq

2006-04-17, 10:49 pm

In article <1145314222.703774.189350@e56g2000cwe.googlegroups.com>,
Gerry Vandermaesen <gerry.vandermaesen@XXXXXXXXXX> wrote:
>Have a look at http://users.skynet.be/fa800152
>
>You'll see that the navigation displays fine in Firefox on the top of
>the screen, but it's not visible at all in Internet Explorer.

It works fine for me in IE.
-A

Jim Moe

2006-04-18, 6:49 am

Gerry Vandermaesen wrote:
>
> I cannot find an explanation for the problem I have encountered. As far
> as I can tell, Internet Explorer does not display a layer with absolute
> positioning which is followed by a floating layer. It just disappears,
> and reappears when I remove the float.
>
I do not have an explanation beyond that IE does positioning poorly. In
your case it positions the navigation <ul> in East Jesus somewhere.
Remove all the position:absolute rules. There is no need for it in your
layout. Floating and padding is sufficient.
A simple rule I have found that works is to never use more than one
position:absolute on a page, else IE behaves badly in some annoying way.
Also it is difficult to get the layout to adapt smoothly to viewport and
font size changes.

Tip: Use colored borders and backgrounds to see what a browser is doing.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Gerry Vandermaesen

2006-04-18, 6:49 am

axlq wrote:
> It works fine for me in IE.
> -A

That's strange, which version of IE are you using then? Doesn't show up
in IE 6 on two different machines.

Jim Moe wrote:
> I do not have an explanation beyond that IE does positioning poorly. In
> your case it positions the navigation <ul> in East Jesus somewhere.
> Remove all the position:absolute rules. There is no need for it in your
> layout. Floating and padding is sufficient.
> A simple rule I have found that works is to never use more than one
> position:absolute on a page, else IE behaves badly in some annoying way.
> Also it is difficult to get the layout to adapt smoothly to viewport and
> font size changes.

Thanks Jim. I have already tried removing the UL inside #navigation,
and putting some plain text inside the DIV, but even then it completely
disappears, which is strange cause afterall I'm just positioning it on
the top left corner. Raising the z-index was no help either, the layer
has vanished.

When I remove the float on the two layers that follow (a left column
#content and a right one #sidebar), the #navigation reappears. This is
the strangest CSS bug I have encountered in IE to date.

Gerry Vandermaesen

2006-04-18, 6:58 pm

I set up a very simple page, which shows the exact same problem:

http://users.skynet.be/fa800152/test.htm

Gerry Vandermaesen wrote:
> Hi,
>
> I cannot find an explanation for the problem I have encountered. As far
> as I can tell, Internet Explorer does not display a layer with absolute
> positioning which is followed by a floating layer. It just disappears,
> and reappears when I remove the float.
>
> Have a look at http://users.skynet.be/fa800152
>
> You'll see that the navigation displays fine in Firefox on the top of
> the screen, but it's not visible at all in Internet Explorer.
>
> Any explanation for this problem? As I try to understand the bug to be
> able to find a solution.
>
> Regards,
>
> Gerry.

Jim Moe

2006-04-18, 6:58 pm

Gerry Vandermaesen wrote:
>
> Thanks Jim. I have already tried removing the UL inside #navigation,
> and putting some plain text inside the DIV, but even then it completely
> disappears, which is strange cause afterall I'm just positioning it on
> the top left corner. Raising the z-index was no help either, the layer
> has vanished.
>
Well, I meant do not use position:absolute at all.
This site has a variety of info about IE problems:
- <http://positioniseverything.net/>
- <http://positioniseverything.net/articles.html>

Also see <http://css.maxdesign.com.au/>.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

frederick@southernskies.co.uk

2006-04-19, 3:43 am

Jim Moe wrote:
> Tip: Use colored borders and backgrounds to see what a browser is doing.

The OP also might find the Internet Explorer Developer Toolbar of use,
although it's not a patch on Chris Pederick's Web Developer extension
for Firefox:
http://channel9.msdn.com/wiki/defau...lorerDevToolbar

--
AGw.

kchayka

2006-04-19, 3:43 am

Gerry Vandermaesen wrote:
>
> Internet Explorer does not display a layer with absolute
> positioning which is followed by a floating layer. It just disappears,
> and reappears when I remove the float.
>
> http://users.skynet.be/fa800152

I'm not convinced the float is really the source of your trouble. It may
be just coincidence. IE has many problems with floats and positioning in
general, but I can't tell which one(s) you've triggered.

One thing that sticks out is setting an absolute width on the body. This
is just asking for trouble, and not just from IE. I doubt you need
exactly 710px width for the body element, but if you insist on a fixed
width design, put everything in another container and set the width on
it, instead. Much less trouble all around. But a better solution is:
<URL:http://www.allmyfaqs.net/faq.pl?AnySizeDesign>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.