first-child selector doesn't work?

[lukeurtnowski]

why is my first <p> broken up into 2 column"? why is it not seeing my p:first-child rule?
http://fixmysite.us/salon_deville/about.php

[ralph.m]

The first <p> isn't the "first child" of the #main div, because there are two children before it—a heading and an image. You may just have to give it a special class, or wrap an inner div around the <p>s so that the first one will actually be the first child of that inner div.

[Rayzur]

Good call ralph

Since the multi-column module is only supported in Gecko & Webkit at the moment you may as well go ahead and use CSS3 to target that first <p>

What you are looking for is :first-of-type

#main p:first-of-type {
    -moz-column-count: 1;
    margin: 15px 50px;
    text-indent: 3em;
}

I would also wrap that html image in a floated block container (<p> or <div>) with a right margin on it.

[lukeurtnowski]

k, thanks

[Rayzur]

In regards to that <img>, it has been known to cause problems running inline elements adjacent to blocks.
I'd wrap it in a <div> in this case so it wouldn't conflict with your p:first-of-type

k,welcome

[lukeurtnowski]

made those changes, but am having trouble wrapping the text around the image (do I just style the image to display: inline or how should it be done?\

Thanksss

[ralph.m]

It looks like column-count prevents a <p> from wrapping normally, instead holding it to a column layout. A simple way I can see around this is to get rid of the div around the image and place the image inside the first <p>, like so:

<p><img style="float:left" alt="Welcome" src="images/staff.jpg"> Pellentesque habitant morbi tristique ... </p>

Of course, in the real world I wouldn't use an inline style like that.

[Rayzur]

It looks like column-count prevents a <p> from wrapping normally, instead holding it to a column layout.

I agree, it looks like it creates a new block formatting context. It behaves similar to an overflow:hidden element next to a float.

I believe I would just do away with the multi-column layout altogether on that first <p> if you don't want the columns and you want the text to warp under the float.

You can kill the multi-column with the auto value and then the text will wrap

#main p:first-of-type {
    -moz-column-count: auto;
    margin: 15px 50px;
    text-indent: 3em;
}

[lukeurtnowski]

man. you guys r fast

[ralph.m]

You can kill the multi-column with the auto value and then the text will wrap
-moz-column-count: auto;

Hah, nice one Ray. I tried everything except "auto" before giving up. I guess I should start to look at the specs.

[Paul O'B]

Good work guys

Hah, nice one Ray. I tried everything except "auto" before giving up. I guess I should start to look at the specs.

Yes if in doubt rt*m

[ralph.m]

if in doubt rt*m

If only I could understand the * manual.

[Paul O'B]

Off Topic:

If only I could understand the * manual.

lol - I know what you mean. I still have trouble comprehending some of the finer details - that's why I teamed up with Tommy when writing the reference as he speaks that language fluently.

[ralph.m]

Off Topic:

that's why I teamed up with Tommy when writing the reference as he speaks that language fluently.

Ah, so they're in Swedish. No wonder I find them hard to understand.