[SOLVED] A float is turning up blank in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

[SOLVED] A float is turning up blank in IE

Post by Ambush Commander »

http://www.taijiclub.org/en/Main_Page , in Internet Explorer, has a huge blank on the right side of the screen. As if someone put visibility=none on it. Mozilla Firefox displays the page fine. The page's CSS validates, and the XHTML validates (except for a missing alt="" attribute which I will add later). Hmm...
Last edited by Ambush Commander on Tue Apr 04, 2006 8:03 pm, edited 1 time in total.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Now that's a weird thing 8O. And i've seen many weird things. What have you tried already? The layout is definately not too complicated, so that shouldn't be a problem. And what's with the z-index:-2 on the menu. Are you sure a negative value is allowed? (don't use it too much myself so I wouldn't know). I'll take a closer look tomorrow morning. If anybody finds the problem in the meantime I sure want to see it.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Eek. The z-index may be it, actually. Negative z-indexes are allowed... but what about a positive one... hmm...
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Nope. It's the position hack I used to get the tabs to look like they flow into the content area. Apparently, in IE, a float in a relatively positioned area must be declared position:relative as well. #content * {position:relative;} seems to fix things and has no other adverse effects (I hope)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ok, nice you solved the problem. Floats and positioning can act funny in IE. From this article at satzansatz:
Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content.
But what were the original stylerules? I just found out that without the position:relative on content and content *, the sidebar does not dissapear. So this seems to work as well:

Code: Select all

#content {
 padding:0 4%;
 background:#FFF;
 border-top:1px solid #000;
 /*position:relative;*/
}
#content * {
 /*position:relative;*/
}
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

The only problem with that is then the tabs look funny. And that doesn't affect Firefox. Just I.E. ;-)

::off to read the article::
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

The only problem with that is then the tabs look funny. And that doesn't affect Firefox. Just I.E.
It shouldn't be too easy, shouldn't it? :? :)
My mom will be glad this keeps us from the streets, messing around, robbing old ladies etc.
Post Reply