Alex Mauzon

Most important (and complex) problem is to position some container in the vertical center of long page (with scroller) in IE6.

This is an ultimate solution (at least I think so) and I have to say HUGE THANKS to Vadim Makeev aka Pepelsbey for urgent and completely satisfactory help.

This is code fragment from working site and I have no time to simplify it to some model but it should be helpful.
Task: semitransparent layer on whole page and some notification container in the middle of page (fixed width and height):
Whatever.
Continue reading »

Correct CSS:

#someid div {color: blue;}
#someid div:first-child {color: red;}
#someid > div {color: green;}
#someid div div {padding-left: 2em;}
/*
just to show some indend and separate direct children to nested ones
*/


IE6 CSS:

<!--[if IE 6]>
<style type="text/css">
/*
FIRST CHILD AND NESTED CHILDRED:
1st one for :first-child
2nd one for all other directly nested childred
*/
#someid div {
  color: expression(this.previousSibling == null ? 'red' : (this.parentNode.id == 'someid') ? 'green' : '-' )
}
</style>
<![endif]-->


:first-child and nested children (for IE6) working example

Some time ago I used to think this problem can’t be correctly resolved without tables.
Imagine, you have a list of elements (each element’s width is unknown – read: variable) that should be blocks (for example you have to add background on hover or make any other helpful things you can’t handle with inline elements).
This list should be centered for some reason (designer’s fancy, do you know any other reason?)…

I thought it is 1 of short list problems that can’t be correctly resolved with no tables. But, huh, solution is simple enough.

Example of centered floating list

There are 2 examples: with UNORDERED LIST (UL/LI) and without it (just a few A tags). Dotted border is helpful tip to understand the idea.
Works in IE6,IE7, O9, FF2, N8, S3 – more tests are welcome.

Enjoy.

Nothing is wider than usual, absolutely no reason to have scroller?
And IE7 only.
You can spend hours and hours trying to remove blocks (one after another).

I found the reason (reason?! ha! a creater of this crazy behavior).

Tag <br />!

Solution (using IE7 conditional comments):

<!–-[if IE 7]>
  br {left: -1000px;}
<![endif]-->


Why does it work? Ask IE7 creaters WHY.
Don’t forget to let me know their answer.
Thanks.

Regular CSS for FF, IE7, Opera, Safari:


#subnav li {background-color: green;}
#subnav li:first-child {background-color: red;}


CSS for IE 6 (using conditional comments):

<!–-[if IE 6]>
#subnav li {background-color: expression(this.previousSibling==null?'red':'green');}
<![endif]-->

Similar to :last-child
Instead of this.previousSibling==null there should be this.nextSibling==null