Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old April 18th, 2006, 12:09 AM
Gerry Vandermaesen
Guest
 
Posts: n/a
Default Disappearing layers

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.

  #2  
Old April 18th, 2006, 02:05 AM
axlq
Guest
 
Posts: n/a
Default Re: Disappearing layers

In article <1145314222.703774.189350@e56g2000cwe.googlegroups .com>,
Gerry Vandermaesen <gerry.vandermaesen@gmail.com> wrote:[color=blue]
>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.[/color]

It works fine for me in IE.
-A
  #3  
Old April 18th, 2006, 07:15 AM
Jim Moe
Guest
 
Posts: n/a
Default Re: Disappearing layers

Gerry Vandermaesen wrote:[color=blue]
>
> 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.
>[/color]
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)
  #4  
Old April 18th, 2006, 09:15 AM
Gerry Vandermaesen
Guest
 
Posts: n/a
Default Re: Disappearing layers

axlq wrote:[color=blue]
> It works fine for me in IE.
> -A[/color]

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:[color=blue]
> 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.[/color]

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.

  #5  
Old April 18th, 2006, 12:45 PM
Gerry Vandermaesen
Guest
 
Posts: n/a
Default Re: Disappearing layers

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

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


Gerry Vandermaesen wrote:[color=blue]
> 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.[/color]

  #6  
Old April 18th, 2006, 09:25 PM
Jim Moe
Guest
 
Posts: n/a
Default Re: Disappearing layers

Gerry Vandermaesen wrote:[color=blue][color=green]
>> 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.[/color]
>
> 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.
>[/color]
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)
  #7  
Old April 19th, 2006, 05:05 AM
frederick@southernskies.co.uk
Guest
 
Posts: n/a
Default Re: Disappearing layers

Jim Moe wrote:[color=blue]
> Tip: Use colored borders and backgrounds to see what a browser is doing.[/color]

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/defaul...orerDevToolbar


--
AGw.

  #8  
Old April 19th, 2006, 05:25 AM
kchayka
Guest
 
Posts: n/a
Default Re: Disappearing layers

Gerry Vandermaesen wrote:[color=blue]
>
> 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[/color]

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.
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles