Dealing with CSS, Top Bottom Frame with CSS

Membangun suatu website saat ini bisa dilakukan dengan berbagai pilihan. Bila pilihan konvensional untuk desain database adalah menggunakan tabel, maka cara yang lebih populer saat ini adalah menggunakan CSS. CSS mengakomodir konsep pemrograman OOP. Salah satu sisi yang menguntungkan dengan menggunakan CSS adalah desain seluruh halaman web bisa seragam dengan hanya meng-include file CSS, tanpa harus menuliskan desain code di tiap file pada suatu website, dan masih banyak kelebihan lainnya.

Tapi, dimana ada kelebihan disitu pula ada kelemahan. Yap, kelemahan CSS adalah ke-compatible-an code untuk setiap browser. Seperti kita ketahui, tiap browser memiliki engine (dengan ciri khas tersendiri) untuk menerjemahkan code program suatu website dari server. Begitupun standar pixel yang digunakan di tiap browser berbeda. Itulah yang memberikan seni dalam menyusun code CSS, karena setiap perubahan yang dibuat di CSS harus di tes di browser yang berbeda2, seperti browser2 yang populer digunakan para web-er, yaitu IE6, IE7, Firefox, Opera.

Itulah yang saya alami, ketika mendapat kesempatan untuk membuat frame atas dan frame bawah dengan CSS, yang pada masa lalu ( jalan konvensional) biasanya dilakukan dengan meletakkan file berbeda pada blok frame di halaman website yang ingin ditampilkan dengan tag HTML <frame> … </frame>. Tapi dengan CSS hal itu dilakukan dengan tetap diletakkan di file yang sama dengan tag <div>..</div>. Masalah yang saya alami muncul ketika halaman website itu ditampilkan di IE6, padahal di (browser yang terinstal di PC saya) IE7, Firefox 2, dan Opera halaman itu tampil dengan sempurna, tidak ada hanging frame.

Pada awalnya saya melihat code CSS melalui Dynamic Drive CSS Layouts- CSS Frames
dan tidak ada masalah, tapi ternyata di IE6, masih terdapat kelemahan, dimana muncul 2 scroll page (yang biasa ada di sebelah kanan browser). Dan ternyata, stelah berkutat meneliti code halaman websitenya, dan dengan trial error berjuta2 kali (hehehe), ternyata masalahnya adalah, saya tidak meletakkan tag komentar

<!–Force IE6 into quirks mode with this comment tag–> .

Walah, ternyata pelajaran baru buat saya, yang selama ini tidak menganggap penting isi di dalam tag comment. Karena dengan hanya menambahkan beberapa kalimat tag comment tadi, masalah terselesaikan, alhamdulillah, finally.

Tag komentar tadi biasanya digunakan untuk IE hack, setelah saya coba pula, tag komentar tadi bila IE6 di ubah dengan IE7, maka hal itu berpengaruh pula untuk IE7. Contoh lain :

<!–[if lte IE 7]>
<link rel=”stylesheet” href=”styles/ie.css” type=”text/css”>
<script type=”text/javascript” src=”scripts/menu.js”></script>

<![endif]–>
Yap, untuk para developer website lainnya, mungkin pernah mengalami hal yang saya alami. Walaupun hal yang saya alami adalah hal bodoh (hehehe), tapi tidak apa2 mengakui kebodohan😀 , dengan harapan pelajaran yang diambil dari kebodohan saya bisa bermanfaat bagi orang lain😉 , hopefully.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s