Avatar billede htx98i17 Professor
27. maj 2016 - 12:11 Der er 1 løsning

Hjælp til CSS

Se følgende side
http://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>


Avatar billede htx98i17 Professor
01. juni 2016 - 13:48 #1
Jeg fandt en anden omvej der fik designet til at passe.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester