Solusi template blog berantakan pada Internet Explorer

Beberapa waktu yang lalu saya pernah memposting tentang alasan perlunya browser IE dan Firefox, saat itu saya dipusingkan dengan tampilan blog saya yang berbeda pada browser IE. Hal ini juga mungkin sering dialami oleh para blogger yang senang mengutak-atik desain templatenya. Terkadang saya malah menjumpai sebuah blog yang menuliskan "for Firefox only" pada halaman blognya. Setelah beberapa lama mempelajari kembali struktur template akhirnya saya menemukan solusi untuk masalah tersebut. Seperti dibahas sebelumnya bahwa ternyata ada perbedaan margin antara Firefox dan IE, misalkan kita mengatur margin kiri dari main-wrapper sebesar 10px, jika dilihat pada browser IE malah margin kiri dari main-wrapper tersebut jadi 20px sementara pada Firefox dan beberapa browser lainnya normal. Hal ini memang tidak terjadi pada semua template, tapi setidaknya itulah yang terjadi pada template saya waktu itu.

Lalu bagaimana solusinya, ternyata cukup dengan menambahkan sedikit kode pada bagian CSS yang mengatur main-wrapper dan sidebar wrapper yaitu kode display:inline; misal kode awal seperti ini:

#main-wrapper {
Float : left;
Width:450px;
Margin-left : 10px;
…….
…….
…….
Word-wrap:break-word;
Overflow:hidden;
}

Tambahkan kode display:inline; sehingga menjadi seperti ini:

#main-wrapper {
Float : left;
Width : 450px;
Margin-left : 10px;
…….
…….
…….
Display : inline;
Word-wrap:break-word;
Overflow:hidden;
}

Begitu juga dengan bagian sidebar-wrappernya menjadi seperti ini:

#sidebarkiri-wrapper {
Float : left;
Width : 200px;
Margin-left : 10 px;
……
……
……
Display : inline;
Word-wrap : break-word;
Overflow : hidden;

Kode display : inline; tersebut ternyata berfungsi untuk mencegah terjadinya double margin pada Internet Explorer sehingga dengan menambahkan kode tersebut hasil pengaturan margin akan sama baik pada IE maupun Firefox. Anda dapat melihat hasilnya pada template saya, karena sebelumnya saya sedikit mengurangi margin kiri karena saya belum menemukan solusinya, tapi sekarang saya membuat margin kiri maupun kanan dengan nilai sama dan hasilnya sangat memuaskan. Nah untuk para template modder semoga hal ini dapat membantu anda dalam berkreasi tanpa perlu khawatir template anda berantakan. Semoga bermanfaat..

Artikel terkait: