Tampilan Blog di Firefox dan Internet Explorer Berbeda
Beberapa postingan terakhir saya selalu membahas tentang tampilan dan tampilan. Tentang tampilan visual yang akan dinikmati pengunjung. Beberapa blogger memilih mengedit template mereka sendiri dan kadang jauh meng-customisasi tampilannya agar benar-benar berbeda. Yang sering terlupakan adalah, tampilan blog bisa benar-benar berbeda jika dibuka pada browser yang berbeda (baca: Cek Tampilan Blog di Berbagai Browser).
Yang paling mengganjal adalah Internet Explorer, terlebih seri-seri lawas seperti IE 6 atau 7. Jangan kaget jika ketika Anda tes dengan Firefox atau Chrome blog Anda baik-baik saja, namun ketika Anda tes gunakan Internet Explorer tampilan blog Anda berantakan. Berikut ini adalah sedikit trik untuk mengurangi dampak tersebut. Kita bisa mengatur agar tampilan blog kita di Firefox dan Internet Explorer 6 berbeda.
Penulisan CSS
Agar tampilan bisa berbeda sesuai yang kita inginkan di Firefox dan IE 6, maka kita akan menggunakan 2 CSS untuk satu objek.
Untuk Internet Explorer, formatnya:
Untuk Firefox dan universal, formatnya:
html > body #uniqueid {property: value;}
Contoh Penggunaan
Yang sering menjadi masalah pada kedua browser tersebut adalah soal jarak yang berbeda. Nah, nanti Anda bisa menggunakan tutorial ini untuk pengaturan margin atau padding yang berbeda. Sekarang saya memberikan contoh yang simple agar mudah dimengerti dengan pengaturan lebar main-wrapper.
#main-wrapper {width: 580px;}
html > body #main-wrapper {width: 280px;}
Silahkan Anda coba pada template percobaan Anda. Kode di atas berarti, lebar main-wrapper blog jika dibuka di IE 6 adalah 580 px, sementara ketika dibuka di Firefox atau browser umum lain, maka lebar blog ditampilkan 280 px.
Tampilan blog dengan Opera
Pada IE menampilkan lebar yang berbeda dengan browser umum, sementara Mozilla Firefox dan Opera menampilkan lebar yang sama seperti browser kebanyakan. BEgitupun dengan Google Chrome. Selamat mencoba.... Semoga bermanfaat.............
Yang paling mengganjal adalah Internet Explorer, terlebih seri-seri lawas seperti IE 6 atau 7. Jangan kaget jika ketika Anda tes dengan Firefox atau Chrome blog Anda baik-baik saja, namun ketika Anda tes gunakan Internet Explorer tampilan blog Anda berantakan. Berikut ini adalah sedikit trik untuk mengurangi dampak tersebut. Kita bisa mengatur agar tampilan blog kita di Firefox dan Internet Explorer 6 berbeda.
Penulisan CSS
Agar tampilan bisa berbeda sesuai yang kita inginkan di Firefox dan IE 6, maka kita akan menggunakan 2 CSS untuk satu objek.
Untuk Internet Explorer, formatnya:
#uniqueid {property: value;}
Untuk Firefox dan universal, formatnya:
html > body #uniqueid {property: value;}
Contoh Penggunaan
Yang sering menjadi masalah pada kedua browser tersebut adalah soal jarak yang berbeda. Nah, nanti Anda bisa menggunakan tutorial ini untuk pengaturan margin atau padding yang berbeda. Sekarang saya memberikan contoh yang simple agar mudah dimengerti dengan pengaturan lebar main-wrapper.
#main-wrapper {width: 580px;}
html > body #main-wrapper {width: 280px;}
Silahkan Anda coba pada template percobaan Anda. Kode di atas berarti, lebar main-wrapper blog jika dibuka di IE 6 adalah 580 px, sementara ketika dibuka di Firefox atau browser umum lain, maka lebar blog ditampilkan 280 px.
Percobaan dengan Minima
Tampilan blog dengan IE
Tampilan blog dengan Firefox
Tampilan blog dengan Opera
Pada IE menampilkan lebar yang berbeda dengan browser umum, sementara Mozilla Firefox dan Opera menampilkan lebar yang sama seperti browser kebanyakan. BEgitupun dengan Google Chrome. Selamat mencoba.... Semoga bermanfaat.............
emang beberapa template tampilan untuk tiap browser memang berbeda mas.... nice info deh
BalasHapuspertamaxxx!
BalasHapus.barusan ane ngecek buka blog ane pake IE, alhamdulillah ternyata sama bagusnya, hehehe
BalasHapusMas Doy, saya mau tanya, kayaknya posting di blogger rada beda yah tampilannya, seperti insert image, dll.....
BalasHapusartikel nya sangat bagus mas doyok...
BalasHapustapi kok punya mas sendiri masih berantakan ya..
aku pakek IE 6, bukannya maksud membantah...
tapi sekadar memberitahu mas
untuk halaman depan blog mas di IE6 tampilannya berantakan mas.
makasih sharingnya
@aan
BalasHapushttp://www.masdoyok.co.cc/2010/05/upload-gambar-di-editor-lama-editor.html
ini mas
pertamaxx ya?
BalasHapuswah perlu ke sana ne mas tuk ngecek...
BalasHapustrims infonya...
@jaya
BalasHapuspunya blogku tiap css sudah tak kustom kustom hjalaman tertentu
nanti utk IE 6 harus dobel
bisa jadi satu objek 6 css
mumet aku hahaha :D
bagi yg mau repot justru lebih baik
sementara ini saya memang belum menyelesaiakan PR utk membenahi blog saya bagus di semua browser...
info semoga anda lebih sregep dan telaten utk mencobanya
dan membuat blog anda lebih ramah terhadap semua browser
@zack
BalasHapuskeren
Blog saya malah tidak bisa dibuka lewat IE (error). Apanya yang salah ya Mas?
BalasHapusSalam ukhuwah
weeh,,bener2 memperhatikan yo,,
BalasHapussek dicoba doeloe
kadang letak banner sering berantakan di IE.
BalasHapusScript tadi itu diletakkan disebelah mana blog kita ych gan..., thx's
BalasHapusJangan kaget jika ketika Anda tes dengan Firefox atau Chrome blog Anda baik-baik saja, namun ketika Anda tes gunakan Firefox tampilan blog Anda berantakan.
BalasHapusYg bener kayak gini kali:
Jangan kaget jika ketika Anda tes dengan Firefox atau Chrome blog Anda baik-baik saja, namun ketika Anda tes gunakan Internet Explorer tampilan blog Anda berantakan.
Tapi, kayaknya pengguna inet rata2 pada pake firefox, jadi rusak di IE pun bagii saya nggak papa, lagian saya antipati sama IE mas...
benar mas . . sungguh jauh berbeda . . akan dicoba ^_^
BalasHapus@9163835567373955600.0
BalasHapusbetul
salah ketik maaf
segera diperbaiki
CSS reset :P
BalasHapusBlog sy tampilannya paling kacau di IE6.
BalasHapus@Andry_Archuleta :
BalasHapusiya, kok buka di IE malah jaraknya kecil bangeeettt..
susah eh mas, gimana caranya?? apa yang harus diubah??
bener gan...
BalasHapussangat berbeda, blog ane kacau jika dibuka di IE dan Firefox tapi oke untuk crom, mohon solusi ya gan..
salam,
Hadi Mafatih
betul skli mas...akan saya coba. Salam kenal dan salam persahabatan.
BalasHapusia mas,,,btul sekali untuk itu saya akn coba utk eksperimen lagi nih. salam kenal.
BalasHapusselamat siang..gimana ya cara mengatur jarak widget untuk tampilan browser IE,soalnya blogku tampilan jarak widget di IE gk bisa sama dengan tampilan browser FF dan Chrome..trims..
BalasHapusiya amas, emang soal IE blogger dibuat pusing, beberapa nganggep IE jadul, karena perbedaan yg terlalu jauh dgn browser lain... tapi beberpa nganggep tantangan tersendiri... saya sendiri yg dibuat KO sama IE hehe... jadinya bikin blog kalau mau aman di IE yang standar tampilannya
BalasHapus