Pengikut

10 April 2006

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.