Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    placement issues in IE

    I have been trying to fix a cross-browser problem I have been having for way too long, and need a fresh set of eyes to look over this. so any assistance would be appreciated.

    here is the page: http://www.euclidsfifth.com/artistDataBase.php

    the page properly displays in FF, but in IE6 it is all buggy. the stars underneath the image are what in question.

    I cannot figure out a hack to make the star rating lineup properly in IE like it does in FF. Can anyone help?

    here is the css code for the ratings

    Code:
    /*  styles for the unit rater     */
    .ratingblock {
    	display:block; 
    	margin: 8px 0 0 30px; 
    	padding-top: 2px;
    }
    
    .loading {
    	height: 15px;
    	background: url(../images/working.gif) 50% 50% no-repeat;
    	}
    	
    .unit-rating { /* the UL */
    	list-style:none;
    	margin: 0px;
    	padding:0px;
    	height: 15px;
    	position: relative;
    	background: url(../images/starrating.gif) top left repeat-x;		
    	}
    
    .unit-rating li{
        text-indent: -90000px;
    	padding:0px;
    	margin:0px;
    	/*\*/
    	float: left;
    	/* */
    	}
    	
    .unit-rating li a {
    	outline: none;
    	display: block;
    	width: 15px;
    	height: 15px;
    	text-decoration: none;
    	text-indent: -9000px;
    	z-index: 20;
    	/*\*/
    	position: absolute;
    	/* */
    	}
    	
    .unit-rating li a:hover{
    	background: url(../images/starrating.gif) left center;
    	z-index: 2;
    	left: 0px;
    	}
    
    .unit-rating a.r1-unit{left: 0px;}
    .unit-rating a.r1-unit:hover{width:15px;}
    .unit-rating a.r2-unit{left:15px;}
    .unit-rating a.r2-unit:hover{width: 30px;}
    .unit-rating a.r3-unit{left: 30px;}
    .unit-rating a.r3-unit:hover{width: 45px;}
    .unit-rating a.r4-unit{left: 45px;}	
    .unit-rating a.r4-unit:hover{width: 60px;}
    .unit-rating a.r5-unit{left: 60px;}
    .unit-rating a.r5-unit:hover{width: 75px;}
    .unit-rating a.r6-unit{left: 75px;}
    .unit-rating a.r6-unit:hover{width: 90px;}
    .unit-rating a.r7-unit{left: 90px;}
    .unit-rating a.r7-unit:hover{width: 105px;}
    .unit-rating a.r8-unit{left: 105px;}
    .unit-rating a.r8-unit:hover{width: 120px;}
    .unit-rating a.r9-unit{left: 120px;}
    .unit-rating a.r9-unit:hover{width: 135px;}
    .unit-rating a.r10-unit{left: 135px;}
    .unit-rating a.r10-unit:hover{width: 150px;}
    
    .unit-rating li.current-rating {
    	background: url(../images/starrating.gif) left bottom;
    	position: absolute;
    	height: 15px;
    	display: block;
    	text-indent: -9000px;
    	z-index: 1;
    	}
    
    .voted {color:#999;}
    .thanks {color:#36AA3D;}
    and here is the code for the general html
    Code:
    /* From Layout.css */
    
    #everything{
    	margin: 0 0 6px 0;
    	padding: 0px;
    	background-image: url(../images/background/bgRepeat.gif);
    	color: white; 
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    #titleImage{
    	width: 750px;
    	height: 250px;
    	background-image: url(../images/titleImage.gif);
    	margin: 5px 0 0 10px;
    }
    a {
    	color: #CCCCCC;
    	text-decoration: none;
    }
    a:hover {
    	color: white;
    	text-decoration: underline;
    }
    .footer {
    	font-size: 10px;
    	color: #cccccc; 
    	font-family: Arial, Helvetica, sans-serif; 
    	text-align:left;
    }
    .footer {
    	width: 745px;
    	background-color: #333333;
    	margin: 5px 0 5px 10px;
    	padding: 0 0 1px 5px;
    }
    /*********************/
    
    #StarsMasterColumn{
    	width: 750px;
    	background-color: #333333;
    	margin: 5px 0 0 10px;
    	padding-top: 10px;
    }
    
    .starsSpecial {
    	width: 612px;
    	height: 100%;
    	background-color: #333;
    	margin: 0 0 0 138px;
    	padding: 0 0 0 10px;
    }
    
    .starsContainer {
    	float: left; 
    	width: 135px; 
    	height: 136px; 
    	padding-left: 13px; 
    	padding-top: 4px;
    	background: url(../images/artistRating/background.gif) no-repeat; 
    	background-color: #333333;
    	margin: 10px 0 0 4px;
    }
    
    #starsName {
    	color: white; 
    	font-size: 11px; 
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    #starsArtistImage {
    	width: 108px; 
    	height: 73px; 
    	border: 1px solid white; 
    	margin-top: 3px;
    }
    
    #starsRatingContainer {
    	width: 110px; 
    	height: 20px; 
    	background: url(../images/artistRating/starBackground.gif) no-repeat;
    	vertical-align: bottom;
    	margin-top: 10px;
    }
    much thanks in advance.
    Last edited by smithk24; 12-12-2006 at 04:32 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Don't thank people in advance. It makes us think you take our help for granted. You need to set the left and top values for your links
    Code:
    .unit-rating li a {
    	outline: none;
    	display: block;
    	width: 15px;
    	height: 15px;
    	text-decoration: none;
    	text-indent: -9000px;
    	z-index: 20;
    	/*\*/
    	position: absolute;
    	/* */
    	}
    Make your lis position:relative; as well. This will allow the links to be positioned off of the lis rather than the browser window.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    not taking advantage Im not online all day, I just wanted to express my grattitude for your work. this is a great community, and as soon as I can contribute, I will.


    thanks for the assistance, I will try that fix

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Maybe you can edit that title, while you're at it? Thanks in advance.

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry about the title, fixed!

  • #6
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i understand the position: relative

    but what do you mean by left and top?


    are you talking about left: top:


    margins? padding? im not sure

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    He probably means the left and top position for absolutely positioned elements:

    Code:
    #container {
     position: relative;
    }
    
    #element {
     position: absolute;
     left: 10px;
     top: 15px;
    }
    
    <div id="container">
     <div id="element"><p>element</p></div>
    </div>
    …in this case #element is positioned 15px from the top of, and 10px from the left of, the #container element.

    Hope this helps…


  •  

    Posting Permissions

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