Solusi CSS kacau pada IE

14 Januari 10

Pusing karena setelah desain web ternyata ancur saat dibuka di Internet Explorer (IE)? hahaha… Biasanya sih diakalin pake javascript ndak boleh pake IE.. jiah :P . Itu memang cara pintar agar pengunjung bisa ngeliat web kita bener-bener kelihatan seperti apa yg kita desain, tapi bukan satu-satunya solusi loh.. hehehe. Bahkan saya punya 3 solusi sekaligus. Mau tahu solusinya kayak apa? Cekidot…

  1. Solusi Pertamax
    Buat saja dua CSS untuk IE dan untuk non IE. Nah di bagian HTML buat dua link untuk memanggil masing-masing CSS yang kita buat, kayak gini:

    1
2

    <!--[if IE]> <link href="hanya_ie.css" rel="stylesheet" type="text/css"> <![endif]--> 
<link href="stylekamu.css" rel="stylesheet" type="text/css">

    Cara ini belum saya rekomendasikan penuh karena kita harus membuat file dua CSS, sehingga saat pengen mengeditnya maka kudu edit dua file tersebut, so waktunya agak ribet.

  2. Solusi Keduax
    Hehehe, cara kedua ndak perlu untuk membuat dua file CSS sekaligus tetapi untuk setiap pengkhususan bagi IE diawali dengan tanda “_”, karena tanda ini hanya IE yang bisa tahu…
    contohnya kayak gini:

    1
2
3
4

    .class_kamu{
padding:10px;<--! Non IE-->
_padding:8px;<--! For IE-->
}

    Mau coba cara ini? boleh2 aja tetapi menurut W3 tidak valid loh.. so bisa bikinberabe juga ntar diujungnya.

  3. Solusi Ketigax
    Ini solusi paling bener, dan memnag harus gini (maksa banget ya?) pokonya standarnya pake inilah. Yaitu dengan menambahkan komentar !important sebelum tanda titik koma pada value properties CSS kiat yang untuk non IE malahan. Oke sebagai contok kek gini ne:

    1
2
3
4

    .class_kamu{
padding:10px !important;<--! Non IE-->
padding:8px; <--! For IE-->
}

    4. Ok, kelar deh ne artikel, semoga bermanfaat. Mulai dari sekarang jangan sampe ada lagi memaksa pengunjung web kita kudu pake Mozilla Firefox or Google Chrome ya.. :p…

    11 Balasan ke “Solusi CSS kacau pada IE”

    1. ArdianYS Free Prestashop Theme mengatakan:
      23 Februari 2010 pukul 14:23

      assalamu’alaikum Mas, salam kenal. mau tanya2 bug css di ie mas.

      Balas
    2. rochsid tehape mengatakan:
      23 Februari 2010 pukul 14:27

      ya silahkan.. saya mungkin bisa jawab kalo ada kasus.. tapi kalo troublesoting semua bug ndak bisa…

      Balas
    3. Wiwiecks mengatakan:
      30 November 2010 pukul 16:58

      mas bagaimana jika web memang tidak di perbolehkan di buka di IE browser

      Balas
    4. Asep mengatakan:
      1 Desember 2010 pukul 13:38

      Mas itu yang di tambahin !import cuma padding aja ya??
      kog saya gak berubah.tetep sama aja..
      padahal dah saya ubah semua..seperti ini :

      .isi .tampil{
      margin:0px;
      margin-top:10px;
      background-color:#fff;
      min-height:20px;

      margin:0px !important;
      margin-top:10px !important;
      background-color:#fff !important;
      min-height:20px !important;
      }
      #container .footer{
      clear:both ;
      min-height:30px;
      background-color:#CCC;

      clear:both !important;
      min-height:50px !important;
      background-color:#999 !important;
      }
      lihat mas udah saya ubah semua.kog gak bisa juga ya ? tolong bantuannya ya mas :(

      Balas
    5. rochsid tehape mengatakan:
      1 Desember 2010 pukul 13:44

      @Asep…
      Jadi yang pake !important itu untuk CSS Non IE.. Sekarang kamu test dulu di browser IE dan dibrowser lain ada bedanya ndak.. kalo ada bedanya maka kasih aja !important, nah sekarang kami bikin selektor yang sama buat ngatur si IE,,

      Balas
    6. Asep mengatakan:
      1 Desember 2010 pukul 14:17

      saya dah coba .. saya ubah yang BUKAN di tandai !important (untuk-IE) tidak berubah mas.sebagian ada yang berubah tapi kog untuk bagian footernya tetep aja gak berubah..
      jadi tampilan footernya itu kosong mas.sedangkan di browser lain itu ada.aneh mas.hehe.atau saya yang gak bisa yah ??? hehhee..
      maaf ya mas.tolong bantuannya mas :)

      Balas
    7. rochsid tehape mengatakan:
      1 Desember 2010 pukul 14:21

      mungkin selectornya kurang spesifik..
      sebagai contoh:
      kamu punya div di dalam div maka harus pake double selector biar spesifik..
      contoh: untuk mengatur h2 di dalam div:content dan div content berapa dalam div main, maka css jadi kayak gini:
      #main #content h2{
      property:value;}

      Balas
    8. Asep mengatakan:
      2 Desember 2010 pukul 11:40

      tetep gak bisa mass :( (

      Balas
    9. rochsid tehape mengatakan:
      2 Desember 2010 pukul 14:22

      tidak bisanya gimana?

      Balas
    10. Aditya Perdana mengatakan:
      2 September 2011 pukul 20:03

      mantab, thanks mbas bro… sukses di prakekkan

      Balas

    Tinggalkan Balasan