OOCSS GRIDS

[kebstein]

Hi Nicole,

Why this line css below? i was going over grids then I saw the
following but I don't understand why.

.lastUnit:after {
clear: both;
content:
" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
";
display: block;
height: 0 !important;
line-height: 0;
visibility: hidden;
}

please can you explain what the following rules are doing in the code
above?

content: "...";
height: 0 !important; why the important

secondly if you say:
.line:after {
...
}
are we saying after that block apply this styles?

Thnx

[Walter Ebert]

Hi,

That used to be a fix, but that has been removed:
https://github.com/stubbornella/oocss/commit/5037bfdc8c9a2b6be419e0286cbe84b0650f7c1a

Indeed :after is applied after the block. See also:
https://developer.mozilla.org/en/CSS/%3aafter

Cheers,
Walter

[Abd Al-Ala Camara]

Thanks Walter,

I got that, but still I don't know what the following css rules are doing. I play with them in firebug but nothing changes

*zoom:1;

height:0 !important;

cheers

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

--

Address:
P.O.Box 2397 Serrekunda,
The Gambia.

Tel:   
P:    +220 3777578 / +220 6677578

Online @:

W:    http://www.kebstein.com

S:      abddev

T:     https://twitter.com/abddev

[wendee]

Hello,

The CSS you are referencing is a fix to force an element to clear it's floated children . 

The CSS property "zoom:1" is for IE and it is used to to trigger "hasLayout" (http://www.satzansatz.de/cssd/onhavinglayout.html). 

Since we are adding content to the layout with "lastUnit:after {}" as a fix to theclearing float layout issue, the "height:0 !important;" is so the element does not impact or change the desired layout.

Hope that helps,

Wendee

[Ghodmode]

On Sun, Apr 22, 2012 at 5:50 PM, kebstein <yira...@gmail.com> wrote:
>
> Hi Nicole,
>
> Why this line css below? i was going over grids then I saw the
> following but I don't understand why.
>
> .lastUnit:after {
>    clear: both;
>    content:
> " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> ";
>    display: block;
>    height: 0 !important;
>    line-height: 0;
>    visibility: hidden;
> }
>
> please can you explain what the following rules are doing in the code
> above?

Generally speaking, this looks like a variation on a "clearfix" solution.

The problem this solves is explained well in this very old article:
http://www.positioniseverything.net/easyclearing.html

> content: "...";
> height: 0 !important; why the important
>
> secondly if you say:
> .line:after {
> ...
> }
> are we saying after that block apply this styles?

That CSS actually *creates* a block after the .line, just as if it were in the
HTML, and applies the style to that. This is something that wasn't always clear
to me even after reading the documentation. So, applying the above style rules
to the .line:after is similar to applying them to the .after-the-line element
below.

<div class="line">
<p>Hey Buddy! I'm a line... don't mess with me!</p>
</div>
<span class="after-the-line"></span>

ref: (mentioned first by Walter Ebert)
https://developer.mozilla.org/en/CSS/%3aafter

Usually the content property is only used with :before and :after
pseudo-elements. It allows you to put something inside of the created element.
I don't know why there are so many dots in this particular example, but I don't
think that matters because they aren't visible.

ref:
https://developer.mozilla.org/en/CSS/content

You also asked ...

> I got that, but still I don't know what the following css rules are doing. I
> play with them in firebug but nothing changes
>
> *zoom:1;
> height:0 !important;

The zoom property is an Internet Explorer thing, but I've read that Safari and
Chrome also support it.

Since the zoom property isn't supported by Firefox, it wouldn't do anything in
Firebug. Even if it was supported, it might not seem to do anything because it
sets the zoom level of the element to 1x.

ref:
http://help.dottoro.com/lcevfstp.php
http://msdn.microsoft.com/en-us/library/ms535169(VS.85).aspx
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/zoom

On using zoom as part of a clearfix:
http://perishablepress.com/new-clearfix-hack/

Setting height:0 should work in Firefox/Firebug. It might make the element
disappear, but you also have to take into account things like overflow, padding,
and border.

I don't know why the !important. That's used when you want to prevent something
further along in the CSS cascade from happening. I avoid using it because it
breaks how I expect CSS to work. However, their CSS-fu is far greater than my
own and I suspect the masters who work on OOCSS probably have a good reason to
use it.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com

> Thnx

[Abd Al-Ala Camara]

@wendee and @Ghodmode, Thanks a lot 

cheers 

> Thnx

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.