www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Internet Explorer compatability question

  1. #1
    Join Date
    Aug 2006
    Posts
    6

    CSS Internet Explorer compatability question

    On my blog, I've added a star rating system for each post based on this tutorial. The CSS I've used is as follows:

    Code:
            .star-rating{
    		list-style:none;
    		margin: 0px;
    		padding:0px;
    		width: 100px;
    		height: 20px;
    		position: relative;
    		background: url(star_rating2.gif) top left repeat-x;		
    	}
    	.star-rating li{
    		padding:0px;
    		margin:0px;
    		/*\*/
    		float: left;
    		/* */
    	}
    	.star-rating li a{
    		display:block;
    		width:20px;
    		height: 20px;
    		text-decoration: none;
    		text-indent: -9000px;
    		z-index: 20;
    		position: absolute;
    		padding: 0px;
    	}
    	.star-rating li a:hover{
    		background: url(star_rating2.gif) left center;
    		z-index: 2;
    		left: 0px;
    	}
    	.star-rating a.one-star{
    		left: 0px;
    	}
    	.star-rating a.one-star:hover{
    		width:20px;
    	}
    	.star-rating a.two-stars{
    		left:20px;
    	}
    	.star-rating a.two-stars:hover{
    		width: 40px;
    	}
    	.star-rating a.three-stars{
    		left: 40px;
    	}
    	.star-rating a.three-stars:hover{
    		width: 60px;
    	}
    	.star-rating a.four-stars{
    		left: 60px;
    	}	
    	.star-rating a.four-stars:hover{
    		width: 80px;
    	}
    	.star-rating a.five-stars{
    		left: 80px;
    	}
    	.star-rating a.five-stars:hover{
    		width: 100px;
    	}
    	.star-rating li.current-rating{
    		background: url(star_rating2.gif) left bottom;
    		position: absolute;
    		height: 20px;
    		display: block;
    		text-indent: -9000px;
    		z-index: 1;
                    top: 0px;
                    bottom:0px;
                    overflow: hidden;
    	}
    The HTML I've used is as follows:
    Code:
    <ul class='star-rating'><li class='current-rating' style='width:20px'> Currently 3/5 Stars.</li>
      <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=1' title='****ty' class='one-star'>1</a></li>
      <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=2' title='Not that great' class='two-stars'>2</a></li>
      <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=3' title='Average' class='three-stars'>3</a></li>
      <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=4' title='Good' class='four-stars'>4</a></li>
      <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=5' title='****ing awesome!' class='five-stars'>5</a></li>
    </ul>
    The problem is that the stars looked all screwed up in IE once someone has rated that particular entry. I've tried several things to try to make it work, but to no avail. Any help you guys can offer would be greatly appreciated.

    Thanks.

    -Andy

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    It could be that negative setting in the text-indent. IE doesn't take kindly to negative settings sometimes. Try taking the negative out.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles