Masih ingatkah anda dengan artikel saya sebelumnya yang menjelaskan pembuatan menu drop down dengan CSS ?. Pada akhir artikel saya sempat menjanjikan akan menjelaskan tentang masalah yang timbul dari drop down menu tersebut. Namun seiring berjalannya waktu, saya tampaknya sedikit melupakannya sampai akhirnya teringat kembali ketika ada pembaca yang menanyakannya. Dan melalui artikel ini saya akan membayar lunas dengan membahas masalah ini secara tuntas.

IE Compatibility Problem

Masalah terbesar dari kode CSS yang membentuk menu drop down tersebut adalah Compatibility. Walaupun sebenarnya masalah ini hanya timbul untuk browser Internet Explorer, namun menjadi cukup serius karena browser ini masih mempunyai cukup banyak penggemar. Anda mungkin akan mencatat bahwa jika menu drop down dilihat pada browser IE akan menghasilkan sesuatu yang berbeda. Why? berikut penjelasannya.

Karena masalah yang timbul pada IE 7 dan IE 6 cukup berbeda, maka kita akan memisahkannya. Kita mulai saja dari yang paling tua, yaitu Internet Explorer 6

Masalah di Internet Explorer 6

Masalah yang timbul pada browser ini akan menjadi jelas jika kita melihat sejarah dari IE 6. Sejak dirilis pada Agustus 2001, browser ini cukup mendapat tempat bagi para pengguna. Selain karena dia disertakan didalam OS Windows, juga karena dukungan terhadap CSS yang sangat bagus. Sedihnya seluruh kesuksesan yang didapatkannya diiringi oleh sebuah keangkuhan. Merasa telah memenangkan browser war, Microsoft memutuskan untuk menghentikan pengembangan IE 6 dan mengalihkan tim pada proyek lain. Seiring dengan tertidurnya IE 6, perkembangan teknologi CSS justru berkembang sangat cepat. Hasilnya pun bisa ditebak, browser ini menjadi cukup kekurangan untuk dukungan CSS yang terkini.

Ok kita tidak perlu berlama-lama dengan pelajaran sejarah, karena yang kita perlukan adalah kalimat terakhir. Sekarang kita menuju ke kode CSS kita. Untuk membentuk menu drop down, kita menggunakan child selector. Berikut salah satu kodenya :

#menu>ul>li {
  display: inline;
  float: left;
  line-height: 40px;
}

Child selector pada kode tersebut ditandai oleh karakter >. Selector jenis ini digunakan untuk menargetkan element html yang secara langsung menjadi anak atau turunan dari element diatasnya. Nah Internet Explorer tidak dapat memahami selector ini, jadi semua kode didalamnya akan diabaikan oleh browser ini.

Kemudian kita lihat kode CSS berikut :

#menu li:hover>ul {display: block;}

Kode CSS diatas merupakan kunci untuk menu drop down kita, dimana kode ini akan memunculkan menu level bawah ketika mouse berada pada menu level atasnya. Atau dengan kata lain kode tersebut berkata "Tampilkan element ul yang berada langsung dibawah element li ketika mouse berada diatas element li. Nah masalah dengan IE 6 disini adalah bahwa IE 6 tidak mendukung pseudo class :hover untuk element selain a atau yang mempunyai attribute href.

Nah sekarang anda sudah tahu masalah yang terjadi pada menu drop down di dalam IE 6. Saatnya anda untuk pergi ke tempat tidur beristirahat dan melupakan semua masalah ini.

Are you kidding?. Tidak saya disini benar-benar serius. Untuk masalah selector mungkin akan bisa diselesaikan, namun untuk masalah pseudo class kita benar-benar tidak bisa berbuat apapun. Yang bisa anda lakukan ketika harus memaksakan suatu menu drop down pada browser IE 6 adalah beralih ke Java Script, dan hal ini diluar jangkauan dari artikel ini. Atau anda dapat juga mempertimbangkan untuk membedakan style menu untuk browser ini dengan hanya menampilkan menu utama saja. OK kita tidak perlu berlama-lama dengan IE 6, karena sesungguhnya perjalanan kita masih cukup panjang.

Masalah di Internet Explorer 7

Berbeda dengan versi sebelumnya, Internet Explorer 7, telah banyak mengalami perbaikan dalam dukungan terhadap kode-kode CSS. Dan kabar gembira bagi kita, browser ini telah mendukung untuk kode CSS yang digunakan untuk membentuk menu drop down yang menjadi masalah di IE 6. Tetapi mungkin anda mencatat bahwa jika menu drop down dilihat pada IE 7 justru tidak terlihat dan hanya akan menampilkan halaman kosong saja. Mengapa bisa demikian? Berikut penjelasannya.

Penyebab utama mengapa kasus di atas dapat terjadi adalah float. Kita menggunakan float dalam membentuk menu drop down agar setiap item menu dapat bersebelahan secara horisontal, berikut kodenya :

#menu>ul>li {
  display: inline;
  float: left;
  line-height: 40px;
}

Pada dasarnya kita telah menjelaskan secara mendalam tentang efek negatif dari float dan bagaimana cara mengatasinya pada artikel styling form part 1. Namun tampaknya solusi tersebut tidak berlaku di dalam IE 7. Sebelumnya telah dijelaskan bahwa kita mengatasi masalah float dengan menggunakan tehnik clearfix. Di dalam class clearfix kita menggunakan pseudo-element :after yang digunakan untuk menambahkan suatu content setelah element class clearfix. Berikut kodenya :

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

Pada situs resmi dari clearfix telah dijelaskan bagaimana cara mengatasi hal tersebut, yaitu dengan menambahkan attribute css zoom.

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;
  }
</style>
<![endif]-->

Dengan perbaikan ini, kini menu utama dapat terlihat pada browser IE 7, namun demikian masih ada masalah untuk submenu-nya. Pada submenu terlihat letaknya terlalu tinggi dan setiap item menu ruangnya terlalu besar. Untuk memperbaikinya tambahkan kode css berikut:

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;
  }
  #menu>ul li { height: 1%; }
  #menu>ul>li ul { top: 40px; }
</style>
<![endif]-->

Pada kode CSS yang pertama digunakan untuk memperkecil ruang pada setiap item submenu. Untuk membentuk ruang pada setiap item submenu, disini kita melakukannya dengan mengubah sifat dari tag a menjadi block kemudian menambahkan padding pada sisi atas dan bawah sebanyak 12px. Di dalam IE 7, browser ini secara misterius menambahkan sedikit ruang di kedua sisi tersebut. Ketika pertama kali mengetahui masalah ini, saya menduga bahwa hal ini disebabkan oleh float. Namun ternyata justru attribute line-height yang menjadi penyebab masalah ini.

Attribute line-height digunakan memperluas ketinggian content dan sekaligus menengahkan content secara vertikal pada menu utama. Satu hal yang penting dari attribute ini adalah bahwa dia akan diturunkan (inherited) ke element turunannya. Nah di dalam IE 7 perilaku attribute line-height menjadi aneh jika element mengandung bukan inline-element atau inline-element yang diganti dengan content bukan teks seperti image dan element form. Dan perilaku aneh ini menghasilkan ruang yang lebih lebar dari seharusnya.

Setelah mengadakan beberapa percobaan, ternyata solusi dari masalah ini cukup sederhana yaitu dengan menentukan ukuran ketinggian terhadap element, dalam hal ini saya menggunakan height: 1%. Attribute ini kemudian akan memicu element untuk menjadi "hasLayout". IE menerapkan mesin render berbeda yang menggunakan internal konsep yang dikenal sebagai "Layout". Konsep Layout ini digunakan oleh IE untuk mengatur ukuran dan posisi dari element. Ketika suatu element dikatakan untuk "have layout" akan bertanggung jawab terhadap ukuran dan posisi dari dirinya dan turunannya. Sedangkan jika tidak maka ukuran dan posisi akan ditentukan oleh element ancestor dengan layout yang terdekat. Untuk lebih jelasnya tentang masalah ini dapat dibaca dalam The Internet Explorer hasLayout Property.

Selanjutnya pada kode perbaikan yang kedua hanya digunakan untuk menurunkan posisi dari submenu agar tepat dibawah menu utama. Dengan adanya masalah ini dapat disimpulkan bahwa di dalam IE suatu element yang diposisikan secara relative akan ditempatkan pada batas teratas dari element ancestor yang diposisikan secara absolute. Hal ini berbeda dengan browser lainnya yang akan menempatkan pada batas terbawah dari element ancestor.

Masalah di Browser lain

Penulis telah melakukan test terhadap menu drop down ini pada beberapa browser selain Internet Explorer seperti Opera 9, Firefox 3.5, Safari 4, Google Chrome 4. Dan hasilnya terlihat sangat sempurna hampir tidak ada masalah apapun. Walaupun demikian penulis tidak menjamin secara penuh menu drop down ini tidak ada masalah pada browser dengan versi di bawah dari browser test tersebut.

Terakhir solusi terhadap masalah di Internet Explorer diatas sepenuhnya hanya diperuntukkan dalam perbaikan menu drop down yang kita buat sebelumnya. Yang lebih penting disini adalah bahwa anda mampu memahami secara mendalam beberapa masalah yang akan sering kali anda temui ketika menyusun kode CSS. Selamat mencoba….