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.............
0 komentar:
Posting Komentar