CSS w Firefox, Opera, IE i Chrome

0

Cześć.

Ostatnio pracuję z kontrolkami Ext.NET i Sencha JS (obie występują pod nazwą Ext.NET).
Problem polega na tym, że poniższy kod jest wyświetlany poprawnie tylko w przeglądarce Chrome:

  .kolor1 .x-grid-cell  //.x-grid-cell to komórka w grid panelu
         {

    background-color:   lime; // tutaj zgodnie z zaleceniami jakiejś strony zmieniłem wartość "#" na nazwę
          }                                                
    
    
       .kolor2 .x-grid-cell 
    {
        background-color: #D8E26C;  
                                                     
    }

Co ciekawe, kiedy w pozostałych przeglądarkach wchodzę do "Narzędzia deweloperskie" to widzę, że mój plik "Style.css" jest załączony i każdy element tj. kolor1 ma zaznaczony "checkbox" czyli, że jest załączony.
Słyszałem, że istnieją narzędzia do konwertowania CSS, ale żadnych oficjalnych nie udało mi się znaleźć. Czy są w ogóle jakieś?
Kiedy sprawdzałem poprawność CSS to wyszło, że jest ok. Może potrzeba jakoś inaczej to napisać?

0

Jeszcze nie napisałeś co jest niepoprawnie. Kolor nie pasuje? Kolor zawsze najlepiej podawać jako heksy/rgb/rgba, nie wiem skąd zalecenie stosowania nazw zamiast kodu koloru.
I pytanie: co marzy Ci się konwertować, że jakichś konwerterów szukasz?

2

Zbadaj jakimś narzędziem, np. firebug pod firefoksa, co się dzieje. Pewnie jakiś inny selektor definiujący taką samą właściwość nadpisuje Twój styl.
CSS się nie konwertuje, co najwyżej możesz go zminimalizować, ale to akurat bajka inna, niż Twoja.
Naprzemienne kolory tabeli można banalnie łatwo zrobić w CSS3, np.

tr:nth-child(even) td { background-color: #f5f5f5; }
tr:nth-child(odd) td { background-color: #ccc; }

I takie dwie uwagi na koniec - nie stosuj polskich nazw, a jeśli już musisz, to nie mieszaj polskich z angielskimi; - FORMATUJ każdy kod i nie wrzucaj nam takiego śmietnika z losowymi spacjami i znakami nowej linii, bo trafisz do piekła i będziesz musiał debugować taki kod aż do dnia Sądu Ostatecznego.

0

Wygląda na to, że style są załadowane w Firebug. Może chodzi o to, żeby użyć składni specjalnej dla Firefox?

0

pokaż jakiś kod, po którym można sobie poklikać (tj wrzuć jakieś demo problemu online)

0

@matpamat w css jedynym specjalnym kodem może być dodanie specjalnych przedrostków aczkolwiek musisz wiedzieć, że większość nie potrzebuje tego i użycie przedrostka spowoduje, błąd i zero stylizacji. Przedrostki chodzą tylko we właściwościach które są w wersji dev w danej przeglądarce. Co więcej to, że styl ci sie ładuje w firebugu nie znaczy, że inny go nie nadpisuje. Zaznacz element który chcesz stylizować i sprawdź czy dana właściwość, nie jest przekreślona jak jest znaczy, że wcześniej w kodzie coś masz co jest ważniejsze niż ta właściwość. Poprawny kod chodzi w każdej nowej przeglądarce, jeżeli coś nie halo znaczy, że coś masz źle.

0

Plik style.css

.kolor1 .x-grid-cell
{
    background-color: lime;
}
.kolor2 .x-grid-cell
{
    background-color: #D8E26C;
    color: #900;
}
itd.

Załączam go

<link href="style.css" rel="Stylesheet" type="text/css" />

Koloruje kodem:

var getRowClass = function (record, rowIndex, store )
          {
          if(record.data.STATUS_PL=="DELETED") return "strike";

    
      
          if(record.data.KOLOR==1) return "kolor1";
          if(record.data.KOLOR==2) return "kolor2";

          }
itd.

W Firebugu wybieram plik style.css w zakładce CSS. Kiedy najadę kursorem na kod koloru to go wyświetla w podglądzie.
To jest na zielono: "background-color", a to na niebiesko: "#00FF00;"

0
matpamat napisał(a):

W Firebugu wybieram plik style.css w zakładce CSS. Kiedy najadę kursorem na kod koloru to go wyświetla w podglądzie.

WTF? Poświęciłeś chociaż chwilę na zapoznanie się z firebugiem?

FF -> Firebug -> Drugi przycisk od lewej ("Wskaż element...") -> klikasz na element, który wygląda inaczej, niż wg Ciebie powinien -> zakładka HTML -> a w niej zakładka Styl. Tam zobaczysz jakie style zostały nadane klikniętemu przed chwilą elementowi.
Dlaczego nie korzystasz z css, który Ci podałem?
Wkleiłeś kilka linijek kodu, a ja już widzę, że sam sobie podstawiasz nogę. Poświęć trochę czasu na FORMATOWANIE kodu. Jeśli nie wiesz co to -> google.

Untitled.png

0

Rzeczywiście styl jest nadpisany. Kliknąłem na wiersz i na pewno coś nadpisuje mój styl, ponieważ, jeśli w tej linii:

<body id="ext-gen1018" class="x-body x-gecko" style="font-weight: 700; text-align: center; overflow: hidden; margin: 0px; padding: 0px; border: 0px none; height: 100%;">

zmienię class="x-body x-gecko" na "kolor1" to mam swój kolor, tylko, że na całym gridpanelu. Co mam zrobić w takim wypadku?

0

Zobacz w której konkretnie linii jest nadpisywany styl i zastanów się co go tam dodało.

0

Temat rozwiązany. Problemem była ta sekcja znaczników:

                        <ViewConfig>
                            <Listeners>
                                <CellClick>
                                </CellClick>
                            </Listeners>
                        </ViewConfig>

Co prawda nie było błędu kompilacji, są to puste śmieci po próbowaniu Intellisense i Chrome to chwytał, ale to właśnie one blokowały wyświetalnie CSS w IE, Firefox i Operze. Po usunięciu wszystkie style ładują się.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.