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:



22 Komentar:

prafangga permana 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

Kang Marno 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

blog Html said...

thank's sob,

artikel ini yang saya cari

nice blog

Mas Doyok said...

wah kebeneran nih... mantep banget mas

YUSRON BLOG 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, Teluk Kuantan, Kabupaten Kuantan Singingi 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.

Ricky firmansyah said...

wah mantaap nih artikelnya boleh di coba

sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
http://asianbet77.com/

Heru Notodirjo 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