Hjælp til CSS
Se følgende sidehttp://christian-nielsen.dk/ul.php
på mac safari: her er layeret med gradient farve placeret rigtigt
på ipad safari: her er layerer med gradient farve rykket
Jeg vil gerne have hjælp til at finde ud af hvorfor ipaden safari rykker layeret.
Eller rettere: jeg tror layeret er hvor det skal være, men <UL> der mangler nogle justeringer for at safari på ipad placerer layeret korrekt?
Koden:
<!DOCTYPE html >
<HTML>
<HEAD>
<TITLE>UL</title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style>
.underlag {
position : absolute;
z-index : -1;
width : 200px;
height : 120px;
left : 272px;
top : 35px;
padding : 0px;
margin : 0px;
background : -webkit-linear-gradient(left , red, white,green); /* For Safari 5.1 to 6.0 */
background : -o-linear-gradient(right , red, white,green); /* For Opera 11.1 to 12.0 */
background : -moz-linear-gradient(right , red, white,green); /* For Firefox 3.6 to 15 */
background : linear-gradient(to right , red, white,green); /* Standard syntax (must be last) */
}
.div_vurdering {
position : relative;
width : 640px;
height : 170px;
border : 0px solid gray;
}
.ul_star_block {
position : relative;
margin : 0px;
padding : 5px;
border : 0px solid;
list-style-type : none;
border-top : 1px SOLID #CCCCCC;
}
.ul_star_block:last-child {
border-bottom : 1px SOLID #CCCCCC;
}
.li_star {
display : inline-block;
margin-left : 0px;
margin-right : 0px;
width : 22px;
text-align : left;
}
.li_star1 {
display : inline-block;
margin-left : 0px;
margin-right : 0px;
width : 210px;
border : 0px solid black;
text-align : left;
}
</style>
</HEAD>
<BODY>
<div class="div_vurdering tekst" >
<ul style="position: relative; border:0px solid;" >
<li style="display: inline-block; border:0px solid #CCCCCC;width: 179px;" > </li>
<li style="display: inline-block; width: 62px;" >Udelad</li>
<li style="display: inline-block; width: 22px;" >-3</li>
<li style="display: inline-block; width: 22px;" >-2</li>
<li style="display: inline-block; width: 22px;" >-1</li>
<li style="display: inline-block; width: 22px;" >0</li>
<li style="display: inline-block; width: 22px;" >+1</li>
<li style="display: inline-block; width: 22px;" >+2</li>
<li style="display: inline-block; width: 22px;" >+3</li>
</ul>
<div class="underlag" ></div>
<ul class="ul_star_block" >
<li class="li_star1" >Kundeservice</li>
<li class="li_star" style="width:63px; text-align:center " ><input type="radio" name="form_stars_1" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" checked="checked"></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_1" class="form_stars" ></li>
</ul>
<ul class="ul_star_block" >
<li class="li_star1" >Taksator</li>
<li class="li_star" style="width:63px; text-align:center " ><input type="radio" name="form_stars_2" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" checked="checked"></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_2" class="form_stars" ></li>
</ul>
<ul class="ul_star_block" >
<li class="li_star1" >Skadeudbedring</li>
<li class="li_star" style="width:63px; text-align:center " ><input type="radio" name="form_stars_3" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" checked="checked"></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_3" class="form_stars" ></li>
</ul>
<ul class="ul_star_block" >
<li class="li_star1" >Pris versus produkt</li>
<li class="li_star" style="width:63px; text-align:center " ><input type="radio" name="form_stars_4" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" checked="checked"></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" ></li>
<li class="li_star" ><input type="radio" name="form_stars_4" class="form_stars" ></li>
</ul>
</div>
</BODY>
</HTML>
