CSS woes (IE6 crashes)

[pinup57]

Hi

This took me 4 hours of headscratching but I finally tracked it down:

I want to have the room-names text change color when I hover the mouse over the tabs (to have a consistent look with the rest of my site), but if I do this:

Code: Select all

}
ul#pfc_channels_list li > div:hover {
color: #990000;
}

it crashes IE6: it takes a 5 minutes to load, takes up all the memory on the client PC, than eats the whole pagefile, and IE6 poofs, causing lots of other apps to crash as well including AVG anti-virus.

This does not happen at all in Firefox, where the same code works perfectly.

Took me a while to find out where this behaviour came from!!!

Any suggestions??

Edit: I would like to add that I feel the tabs are extremely complicated, and as soon as we try to style them somewhat different than the default style (especially important if your site style is based on a dark background) the results are highly unpredictible between different browsers, and it's really realy hard to figure out what goes where, there are soooo many divs and layers in such a tiny space.... I just wanted to have the tabs look like the other buttons on my site, well I can tell you I'm having a hard time achieving such a simple goal!!

Dirk

[phpfreechat]

I have had the same problem with IE6 ...
I plan to add a documentation page with a list of CSS rules that crashes IE6.
I think the '>' operator is guilty, could you try with :

Code: Select all

ul#pfc_channels_list li div:hover {
color: #990000;
}

Moreover, from my own experience, I can tell your that using ',' to separate rules will crash IE6 too.
Ex that crash IE6 :

Code: Select all

p, div { color: red; }

Maybe there is other bad rules, the list is to do...

[pinup57]

Hmm, all I can say is that IE6 doesn't crash anymore, but hovering over the tab doesn't change the text color either.....

Dirk

[phpfreechat]

Try something like that :

Code: Select all

ul#pfc_channels_list li div:hover a {
color: #990000;
}

Tip: use firebug to understand quickly the HTML structure.

[pinup57]

Doesn't work either although no IE6 crash. Yes, of course, firebug is my fav tool for webdevelopment, as well as webdeveloper.

I really have a hard time with the tabs!! IE7 does weird things too: I wanted to have the tabclose image moved upwards, so I did:

Code: Select all

ul#pfc_channels_list li a.pfc_tabclose img {
  padding-bottom: 20px;
  }

which works in IE6 and FF, but in IE7 this moves the background image of the tab 20px up as well!!

Also, I can't seem to add fixed width to tabs, and neither can I re-position the prompt dialog background:

Code: Select all

div#pfc_promptbgbox {
position: absolute;
top: 284px;
left: 192px;
}

has no effect whatsoever in any browser.

Dirk