First-child selector doesn't work?

HTML & CSS
1

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

2

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.

3

Good call ralph :slight_smile:

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.

4

k, thanks

5

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

6

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

7

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.

8

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: [COLOR=#0000cd][B]auto[/B][/COLOR];
    margin: 15px 50px;
    text-indent: 3em;
}
9

man. you guys r fast

10

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

11

Good work guys :slight_smile:

Yes if in doubt rt*m :slight_smile:

12

If only I could understand the * manual. :shifty:

13
Off Topic:

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.

14
Off Topic:

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