SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    first-child selector doesn't work?

    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
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    #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. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    k, thanks
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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
    "Oh, and Jenkins--apparently your mother died this morning."

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <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. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    #main p:first-of-type {
        -moz-column-count: auto;
        margin: 15px 50px;
        text-indent: 3em;
    }

  9. #9
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    man. you guys r fast
    "Oh, and Jenkins--apparently your mother died this morning."

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good work guys

    Quote Originally Posted by ralph.m View Post
    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

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    if in doubt rt*m
    If only I could understand the * manual.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by ralph.m View Post
    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.


  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •