SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot Coastal Web's Avatar
    Join Date
    Jan 2006
    Location
    Oregon, U.S.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    * html .myClass {####} ?

    Greetings folks,

    I've been messing with some other people's CSS just to try and learn some new tricks and l've come across a little snippet within the code of a developer that l highly respect - that l've seen used in a few instances and l wasn't quite sure what purpose it serves and I was hoping someone where would be willing to enlighten me....

    Here's an example:

    Code:
    a.top-ribbon {
    	width:112px;
    	height:112px;
    	background:url(images/top-right-ribbon.png);
    	top:0;
    	right:0;
    	z-index:99;
    	display:block;
    	position:absolute;
    	text-indent: -9999px;
    }
    
    /* this is the style l'm not sure what it does... ? */
    * html a.top-ribbon {
    	right:-1px; 
    	cursor:pointer;
    }
    Now in this instance, the top-right-ribbon.png file is just a little clickable ribbon in the top right corner of the screen.. l understand all that fine and well...

    however:
    what is the purpose of the * html a.topribbon { ### } ? What browser is this fix for, and what/why is it being used? and in what instances should it be used if ever?

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It is the star selector hack. It is for IE 5.5 and 6.

    http://en.wikipedia.org/wiki/CSS_filter#Star_HTML_hack

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,422
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    star html hack

    Three guesses
    Quote Originally Posted by Coastal Web
    What browser is this fix for
    The web designer's favorite browser of course, IE
    This is known as the "star html selector". A "bug" in IE ignores the *, where other browser's see the selector as being "wrong". Therefore the styles in the * html { ### } are applied only to IE
    I don't know if this is still a viable hack (now that IE7 is out), and I think using conditional comments might be the better way.

  4. #4
    SitePoint Zealot Coastal Web's Avatar
    Join Date
    Jan 2006
    Location
    Oregon, U.S.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your assistance Johnny Gulag and Mittineague, l really appreciate your quick help and anwsers...

    Great so l understand completely now what exactly the star html selector hack does.. so my final question; back to my original example:

    why would ie6 (and less) need to have the position of a.top-ribbon pushed out an additional pixel to the right?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, judging from the CSS code, I'd say this appears to be an image substitution technique - a rather inaccessible one at that. Am I right?

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,422
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    position

    I'm not a CSS guru, but you have apparently never tried to get a layout cross-browser "pixel perfect identical". IE has it's own ideas about what padding/margin/border styles are the best "default".

    EDIT: I didn't see the text-indent -9999px before a bit outside the viewport no?

  7. #7
    SitePoint Zealot Coastal Web's Avatar
    Join Date
    Jan 2006
    Location
    Oregon, U.S.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Greetings Dan,

    Thanks for the reply, and yes you're right - would it be a better to do something like this for the image replacement?

    Code:
    a.top-ribbon {
    	width:112px;
    	height:112px;
    	background:url(images/top-right-ribbon.png);
    	top:0;
    	right:0;
    	z-index:99;
    	display:block;
    	position:absolute;
    }
    
    a.top-ribbon span{
    display: none;
    }
    /* this is the style l'm not sure what it does... ? */
    * html a.top-ribbon {
    	right:-1px; 
    	cursor:pointer;
    }
    
    <a href="#" class="myClass"><span>...something special...</span></a>

  8. #8
    SitePoint Zealot Coastal Web's Avatar
    Join Date
    Jan 2006
    Location
    Oregon, U.S.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I'm not a CSS guru, but you have apparently never tried to get a layout "pixel perfect identical". IE has it's own ideas about what padding/margin/border styles are the best "default".
    Your assumption would be incorrect, however l've only started using css exclusively for my layouts within the past year or two... l start all of my style sheets with:

    Code:
    html, body{
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    	height: 100%:
    }
    Perhaps this is why l haven't noticed these bugs as badly as most people do? To be honest, usually when l have a rendering issue with a layout l'm working on, FF is the one that's not playing nice... <shrugs>

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no need to start all your layouts with that, as it can cause more problems than you think they would solve.

    This is a far better way to do it:

    Code:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, tt, var {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    	font: normal 85&#37;/140% tahoma, verdana, arial, helvetica, sans-serif;
    	letter-spacing: 1px;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-family: georgia, garamond, "times new roman", times, serif;
    	font-weight: bold;
    	margin: 0 0 0.5em 0;
    }
    
    h1 {
    	font-size: 1.75em;
    	line-height: 1.8em;
    }
    
    h2 {
    	font-size: 1.5em;
    	line-height: 1.55em;
    }
    
    h3 {
    	font-size: 1.05em;
    	line-height: 1.1em;
    }
    
    h4 {
    	font-size: 0.95em;
    	line-height: 1em;
    }
    
    h5 {
    	font-size: 0.85em;
    	line-height: 0.9em;
    }
    
    h6 {
    	font-size: 0.75em;
    	line-height: 0.8em;
    }
    
    img {
    	border: 0;																/* this squashes a Firefox bug */
    	display: block;
    }
    Just change the background and font declarations in the BODY selector and you'll be good to go. (Note, this reset works best when using EM for your font metric on your containers and text.)

    As for an image substitution technique, the one that I use is pretty close to what Paul O'Brien has on his site as an example. If you're going to use an image substitution technique, use this instead of the one you're using, so that those who have images disabled while still getting the author stylesheet applied can still read the text. You'll also want to replace the EM (and the appropriate selector in the stylesheet) with a SPAN if you could honeslty care less about Mac-IE (since it's a dead browser, like Netscape 4).

    http://www.pmob.co.uk/temp/navimagereplace.htm

  10. #10
    SitePoint Zealot Coastal Web's Avatar
    Join Date
    Jan 2006
    Location
    Oregon, U.S.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •