Mengapa Sidebar pada blogger bisa jauh turun ke bawah di browser IE?
Bila kita mendapati sidebar yang bermasalah di IE, ada baiknya kita perlu memaklumi browser yang satu ini.IE memberlakukan cara yang berbeda untuk mengatasi obyek yang terlalu lebar melebihi isinya.Biasanya ini melibatkan form, table, gambar dll.
Sedangkan browser seperti mozilla akan "mengijinkan" gambar untuk menimpanya tanpa perlu
memaksanya memperlebar bagian ini.Bisa dibilang semua kolom akan "diam" sesuai semestinya.
Karena masalah ini, :ada dua hal yang perlu dilibatkan, yakni gambar yang akan diupload harus disesuaikan dengan lebar kolom isi, atau tambahkan lebarnya beberapa pixel di bagian isi.
Agak repot tentunya agar kedua aturan ini diberlakukan selama kita ingin mempertahankan template ataupun karena alasan kita memiliki banyak gambar untuk disertakan dalam postingan.
Berikut ada cara yang lebih mudah
masukan tag CSS berikut :
max-width:410px;
width: expression(this.width > 410 ? 410: true);
letakan dibagian /* Content, jadi secara keseluruhan tag yang sebelumnya:
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
menjadi :
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
width: expression(this.width > 410 ? 410: true);
float:left;
}
Lalu dibagian /* Posts, cari tag berikut :
.post img {
padding:4px;
border:1px solid #ddd;
}
dan edit hingga menjadi :
.post img {
padding:4px;
border:1px solid #ddd;
max-width:410px;
width: expression(this.width > 410 ? 410: true);
}
Lalu di bagian /* Sidebar Content bila kita perhatikan kebanyakan template tidak menggunakan sidebar image css,untuk itu tambahkan menjadi :
#sidebar img{
max-width:220px;
width: expression(this.width > 220 ? 220: true);
}
Tambahan :
Kasus untuk http://iptek-indonesia.blogspot.com/, di kolom sidebar menggunakan layanan konten dari TheFreeDictionary.com dengan lebar kolom 350 px, untuk itu perlu disesuaikan dengan lebar template milik Minima yang menggunakan lebar kolom samping 220px, hingga tag HTMLnya akan menjadi :
div style="padding: 4px; width: 220px; position: relative;"
Semoga membantu.
Notes : Setelah blog http://iptek-indonesia.blogspot.com/ di view source-nya kemudian diedit seperti disebut diatas, bagian sidebar menempati bagiannya dengan semestinya.Saya gunakan browser IE versi 6.0, Netscape 7.2 dan Mozilla Firefox 1.0.7.
Tag : kenapa sidebar mlorot, sidebar drops to the bottom blogger, sidebar melorot.
Terima kasih penjelasannya mas. Sedang saya coba ini, mudah2an berhasil.
BalasHapusBila hasilnya mendapati Feedburner dan Counter mendadak didapati hasil yang berbeda, baik mengecil maupun membesar, ini karena pengaruh tag CSS di bagian Sidebar.Otomatis semua konten yang ada di bagian ini akan distretch / dipaksa masuk ke 220.Untuk Feedburner yang asalnya memmbutuhkan 300px menjadi lebih kecil, begitu juga counter hasilnya akan dipaksa selebar 220px.
BalasHapusUntuk mendapati hasil yang semestinya untuk kedua bagian itu, bisa ditempatkan diluar Sidebar,artinya di bagian footer pun akan masih menarik.Semoga membantu.
aduh kok di blog saya beda yah...?
BalasHapusada baiknya menggunakan wrap agar teks di bagian konten tetap pada posisinya :
BalasHapushttp://edittag.blogspot.com/2006/04/css-word-wrap-for-ie.html
kalo memiliki HTML editor bisa dicoba edit file HTMLnya di local agar hasilnya lebih pasti.
Hiks, gak brani nyoba ditemplateku blogku..
BalasHapusHiks, susah bener Kang..
kl template yg dari blogger yg biasa, gampang smua koq..
acuannya bisa sama persis :(
padahal, blogku SBnya msh mlorot di IE..:(
salah satu keuntungan menggunakan template bawaan dari blogger adalah semua variabel dan tag CSS nya sudah baku dan teruji di semua perambah, seperti IE, FF dll.Jadi sangat mudah bila menambahkan kode-kode yang biasa digunakan blogger lainnya.
BalasHapusharus berani berisiko, terutama utk pengguna template non official blogger :)