Hov. Du er ikke logget ind.
DU SKAL VÆRE LOGGET IND, FOR AT INTERAGERE PÅ DENNE SIDE

Sprites vises i IE men ikke i firefox?

Side 1 ud af 2 (13 indlæg)
Fra Silkeborg
Tilmeldt 4. Jan 07
Indlæg ialt: 461
Skrevet kl. 08:24
Hvor mange stjerner giver du? :

Hej allesammen

Jeg har lavet et sprite billede, som af en eller anden grund gerne vil vises i IE men ikke i firefox? 

sprites.css

.service-1,
.twitte_box {
    background: url(/templates/eshop/images/sprite/sprites-1.png) no-repeat;}

  .service-1 {
    background-position: 0 0;
    width: 84px;
    height: 84px;
  .twitte_box {
    background-position: -152px -398px;
    width: 19px;
    height: 20px;
  }

Og så har jeg indsat den flg. kode på min side

<div class="twitte_box">&nbsp;</div>

Er der en venlig amino der kan hjælpe med hvilken den af min kode som IE godtager, men firefox ikke gør? Normalt så plejer det at være omvendt ;)

Fra Silkeborg
Tilmeldt 4. Jan 07
Indlæg ialt: 461
Skrevet kl. 10:47
Hvor mange stjerner giver du? :

Jeg kan læse mig til at det er denne her "Background-position:" som åbenbart er noget IE har opfundet, og det derfor ikke er alle browsere der har taget den til sig.(I kan godt høre at jeg er modstander af IE og deres mulighed for at gøre som det passer dem)


Er der nogen der ved hvordan jeg kan skrive denne kode korrekt så den vises i alle browsere?

Fra Aalborg
Tilmeldt 28. Jan 09
Indlæg ialt: 27
Skrevet kl. 18:41
Hvor mange stjerner giver du? :
Gennemsnit 5,0 stjerner givet af 1 person

Du mangler et } lige før .twitte_box - måske det kan afhjælpe det. 

Fra Aalborg
Tilmeldt 28. Jan 09
Indlæg ialt: 27
Skrevet kl. 18:52
Hvor mange stjerner giver du? :
Tilmeldt 28. Feb 14
Indlæg ialt: 21
Skrevet kl. 19:15
Hvor mange stjerner giver du? :

Denne kode bliver vist i alle browsere: <style> 

.twitte_box {

    background: url(http://www.amino.dk/filestorage/CommunityServer.Components.Avatars/00/00/00/75/24/4TDMHSL5HGS0.jpg-80x80.jpg) no-repeat;}

    background-position: -152px -398px;

    width: 19px;

    height: 20px;

  }

  </style>

<div class="twitte_box">&nbsp;</div>

Såvel gør din kode.. 

Jeg er på Mac OS X 10.9 med Firefox 27.0.1

Tilmeldt 28. Feb 14
Indlæg ialt: 21
Skrevet kl. 19:29
Hvor mange stjerner giver du? :

Denne kode bliver vist i alle browsere: <style> 

.twitte_box {

    background: url(http://www.amino.dk/filestorage/CommunityServer.Components.Avatars/00/00/00/75/24/4TDMHSL5HGS0.jpg-80x80.jpg) no-repeat;}

    background-position: -152px -398px;

    width: 19px;

    height: 20px;

  }

  </style>

<div class="twitte_box">&nbsp;</div>

Såvel gør din kode.. 

Jeg er på Mac OS X 10.9 med Firefox 27.0.1

Fra Silkeborg
Tilmeldt 4. Jan 07
Indlæg ialt: 461
Skrevet kl. 19:54
Hvor mange stjerner giver du? :

Hej Ole

Der mangler ikke et }

Det er fordi at billedet både skal gælde for .service-1, og twitte_box. De bliver adskilt af et komma

Jeg kan se dit eksempel i både IE og firefox. Jeg forstår dog ikke, for alle steder jeg har læst, så understøtter firefox ikke     background-position: X Y eftersom at det ikke er den officielle standard, men istedet noget IE har fundet på.

Jeg vil meget gerne høre hvordan du har lavet dit eksempel som virker både i IE og firefox.

Du kan kontakte mig her med PM eller Skype : mortenbirkelund

Jeg håber at høre fra dig.

Fra Aalborg
Tilmeldt 28. Jan 09
Indlæg ialt: 27
Skrevet kl. 22:57
Hvor mange stjerner giver du? :

Hej Morten,

Det er her det mangler:

  .service-1 {
    background-position: 0 0;
    width: 84px;
    height: 84px;[HER]
  .twitte_box {
    background-position: -152px -398px;
    width: 19px;
    height: 20px;
  }

Du kan bare højreklikke og vælge vis kildekode så kan du se hvordan jeg har lavet det, ellers er CSS'en her:

.twitte_box {
background-image: url('/images/logo.png');
background-repeat: no-repeat;
background-color: #b94a48;
display: block;
background-position: -152px -25px;
width: 500px;
height: 200px;
}
Fra Aalborg
Tilmeldt 28. Jan 09
Indlæg ialt: 27
Skrevet kl. 23:01
Hvor mange stjerner giver du? :

ps. tilføj et display:block eller inline-block, så slipper du for &nbsp; i div'en :)

Fra Silkeborg
Tilmeldt 4. Jan 07
Indlæg ialt: 461
Skrevet kl. 04:32
Hvor mange stjerner giver du? :

Jeg kan simpelthen ikke forstå hvordan du har fået det til at lykkes.... min kode er nu rettet til

.twitte_box{
    background-image: url('../images/sprite/sprites-1.png');
    background-repeat: no-repeat;
    background-position: -152px -398px ;
    width: 19px;
    height: 20px;
    display: block;

}

<div class="twitte_box">&nbsp;</div>

Men det virker stadig ikke.

Jeg fatter heller ikke helt at en side som GTmetrix benytter firefox men stadig skriver som et tip at man bør benytte sprite.. SÅ må det jo kunne lade sig gøre.

http://gtmetrix.com/reports/www.eshop-logistics.dk/pRaIPV9M

Side 1 ud af 2 (13 indlæg)