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:



21 Komentar:

admin said...

Thx Sob nice, sngt membantu

ritz said...

ok,makasih sob,ternyata IE punya gawe,.

pollow + bookmrk dulu ah,..

kutunggu komeng baliknya sob

gema_gogo said...

Terima kasih Infonya...

terkadang tempalte sya brantakan kalo di buka di IE

Admin said...

ini postingan perlu disimpan diarsipku suatu saat pasti aku memerlukannya, oke sob thank banget

Om Kempul said...

mantap tu infonya...coba ahhh...

sahabat said...

wah oke juga nih. hanya saja saya gak suka IE jadi males utak atik nya...he..he

Anonymous said...

thank's sob,

artikel ini yang saya cari

nice blog

MbahDoyok said...

wah kebeneran nih... mantep banget mas

Dek Yusron said...

bagus222

Lala said...

Penting nich, kek blog aku yang kadang tampilannya beda beda jika dibuka dengan IE atau opera.
Thanks, bisa aku praktekkan nich

ruri said...

info yang sangat diperlukan.. memang perbedaan web browser terkadang membuat tampilan blog berantakan. misalnya di firefox oke, eh.. malah berantakan di IE. good solution.

lina@happy family said...

Terima kasih ya, ternyata ada solusinya. Saya masih pake IE, karena kalo pake Firefox, saya ngga bisa posting komentar (huruf verifikasi tidak muncul). Kenapa ya?

Ronaldo Rozalino, S.Sn.,M.Pd said...

Trik yang bagus nih sobat!!!

satria said...

sory banget sob mengenai back linknya bukan maksudku, btw thank's atas kritiknya

wandhe said...

ok dech mksh infonya,,

biyan™ said...

Rasanya hanya IE6 yang melakukan double margin. Saya rasa cukup dengan menambahkan karakter undercross ( _ ) didepan property width.

Junior Blogger said...

Para Blogger Linknya Sudah Dipasang Di Blog Saya Mohon Pasang Link Saya Ya Maklum Saya Ini Baru Di Blog Termasuk Awam,Yah Biar Blog Saya Ada Dimana - Mana He..He,,,

fazribook said...

owh gitu toh. tapi saya pake FF u buntu kenapa gambarnya beda ya dengan FF yang biasa

POJOK CYBER BERBAGI said...

Tampilan situsnya rapi. menarik untuk dilihat. Templanya bawaan blogspot yang dimodif atau template gratis dari pihak ketiga yang dimodif. Terima kasih.

CDBA said...

wah mantaap nih artikelnya boleh di coba

Java Harmony said...

udah saya coba kutak-kutik tetep nggak goal,,,tetep nggak work utk template yg saya pake. Tapi gak pp...emang gunanya IE tu cuman tuk dunlut browser lain hehe..

Post a Comment

Silahkan tinggalkan komentar anda, setiap komentar yang anda tulis akan menambah jumlah backlink anda.
Sebaiknya gunakan Name/URL pada saat menuliskan komentar.

Template Design by Eris Agustian - Digital Life | Professional Blogger Template