SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to understand first-child rule for IE hack

    In a menu where you want the top link to also have a border above it you should use following my book says for IE

    #nav li:first-child {border-top:2px dotted #069;}

    * html #nav ul {border-top:2px dotted #069;}


    I am trying to figure out how the: * html #nav ul {border-top:2px dotted #069;}

    affects this: #nav li:first-child {border-top:2px dotted #069;}

    why does it work?

  2. #2
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The pseudo-class :first-child matches the first list item contained inside the UL element. This pseudo-class isn't supported by IE.
    So, standards compliant browsers see and apply the CSS rule.

    Only IE understand the contextual selector * html ul (here * is a 'ghost element' that is the parent of the HTML. Who is it? Only IE knows.)
    So, IE see and apply the CSS rule.
    Mauricio Samy Silva
    http://www.maujor.com/

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something you need to know about * html though.

    It will not be supported in Internet Explorer 7. Since IE7 will be distributed to Windows users via automatic updates, and will not run on Windows 98SE or 2000 (where almost all copies of IE6 will be found as of the end of the year), you will have to use conditional comments to hide your CSS hacks from Internet Explorer 7 and real browsers (in which case you're better off just using the comments and delivering the style rules to IE 5, 5.5 and 6 directly).

    In the absense of :first-child I use a class to apply an effect to an element.

    However, I do this rarely because the sites I create hardly have a need for it. In fact, only one site I have even has a need for this.

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why if IE is the most used browser make CSS easier for all and follow Mozillas way?

    Also is this code right?

    Code:
    #footer li {display:inline;
    			color:#FFF;
    			border-left:1px solid;
    			color:#AFF;
    			padding:0 5px 0 9px;
    			}
    			
    div#footer li:first-child {border-left:0;}
    
    * html div#footer ul {border-left:0;}
    I have a footer navigation menu with a 1px border to the left of each li item.
    I don't want it on the first item so I used the above but the line is still there on the first item?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have to declare a border color as well.
    Code:
     #footer li {
     	display: inline;
     	border-left: 1px solid #AAFFFF;
     	color: #FFFFFF;
     	padding: 0 5px 0 8px;
     }
    Also, instead of using :first-child, I would apply a class of .clearBorder to the list item, and then reference that through the stylesheet.
    Code:
     #footer .clearBorder {border-left: 0;}
    I did this on a drop-down menu where I wanted the first child of a nested unordered list to not have a border. It created a very intersting effect. If you like, I can send you a PM with a link to the page I mentioned.

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    you have to declare a border color as well.
    No, it is optional, and if it is omitted then the border color is the same as the text color.
    Simon Pieters

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks it worked well.

    #footer .clearBorder {border-left: 0;}


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
  •