...

View Full Version : placement issues in IE



smithk24
12-11-2006, 07:09 AM
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


/* 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

/* 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.

_Aerospace_Eng_
12-11-2006, 08:55 AM
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

.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.

smithk24
12-12-2006, 03:34 AM
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

rmedek
12-12-2006, 04:02 AM
Maybe you can edit that title (http://codingforums.com/postguide.htm), while you're at it? Thanks in advance. :)

smithk24
12-12-2006, 05:32 PM
sorry about the title, fixed!

smithk24
12-12-2006, 05:33 PM
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

rmedek
12-12-2006, 06:02 PM
He probably means the left and top position for absolutely positioned elements:



#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…



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum