discrepancy in template.css on online Demo-Page and Downloadable archive about oocss HOT 8 CLOSED

I've committed a fix: http://github.com/levito/oocss/commit/0dd8c3edff9b3e44140eb2b9344d0cd52a58fdd0

from oocss.

Hi levito,

your fix is working. Could you explain why you and stubbornella using the body:after and main:after selector?

thank you tanila

from oocss.

Hi tanila,

the main area should always take the room between the sidebars. And should not float around them. In earlier revisions this was done by applying overflow:hidden. But this cuts content like css drop shadows or layers. Second try was overflow:auto. This caused scroll bars. Next try: display:table-cell for modern browsers, zoom:1 for IE6+7. No scroll bars, no cut content. But table-cell does not stretch automatically to the available width. The main col would be too narrow if it doesn't contain enough content. So the stretching is done by the line of dots in the :after class. It also doubles as a clearfix.

The problem with opera was that it does not do line-breaks with ". . ". I could fix that for Opera 10.sth with overflow:hidden for the :after class and Nicole used that solution. However, it didn't turn out to be the best solution. Someone pointed out that replacing the dot by a different character "x x " would work. So I'm using that now. It also works in the latest Opera 10.5 pre-alpha (". . " does not).

Happy coding!
levito

from oocss.

Great thanks,

now I understand. Do You think it would be a good idea to write such explanations down somewhere for other developers (wiki or FAQ) ?
I think in case of template.css it is not simple to understand.

kind regards
tanila

from oocss.

closing issue ... I see no problems in template.css any more :)
thx

from oocss.

...

from oocss.

levito's changes are now in stubbornella/oocss.

from oocss.

Levito,

Could you be convinced to add your explanation of the "x x x x" technique in an FAQ question? It was very clear and well written.

Nicole

from oocss.