Pengikut

WEB : My sidebar blogger content drops to page bottom on IE

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.

6 komentar:

  1. Terima kasih penjelasannya mas. Sedang saya coba ini, mudah2an berhasil.

    BalasHapus
  2. Bila 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.

    Untuk mendapati hasil yang semestinya untuk kedua bagian itu, bisa ditempatkan diluar Sidebar,artinya di bagian footer pun akan masih menarik.Semoga membantu.

    BalasHapus
  3. aduh kok di blog saya beda yah...?

    BalasHapus
  4. ada baiknya menggunakan wrap agar teks di bagian konten tetap pada posisinya :

    http://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.

    BalasHapus
  5. Hiks, gak brani nyoba ditemplateku blogku..
    Hiks, susah bener Kang..

    kl template yg dari blogger yg biasa, gampang smua koq..
    acuannya bisa sama persis :(

    padahal, blogku SBnya msh mlorot di IE..:(

    BalasHapus
  6. 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.

    harus berani berisiko, terutama utk pengguna template non official blogger :)

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.

Postingan Populer