Centering Div for Firefox vs IE

Share More

Sudah lama nih gak bikin css baru dari awal, kebetulan hari ini mulai buat template untuk kerjaan. Hal yang sudah lama gw temuin dan gw pake tiba2 jadi lupa lagi solusinya. Yah, namanya juga manusia. Mau share aja buat yang mungkin mengalami kendala yang sama, ada saatnya kita ingin memiliki template dengan lebar yang tidak memenuhi browser, misalnya berukuran fix 780 pixel. Pertanyaan berikutnya yang datang saat itu ialah, template kita itu dalam browser ingin terlihat berada di kiri, tengah atau kanan?

Secara default template kita akan berada di sebelah kiri. Lalu bagaimana kalau mau ditengahkan?

  • Kendala pertama, IE (ver 6) tidak bisa mengaplikasikan style width pada tag body, sementara Firefox bisa. Jadi mau tidak mau kita harus bikin div sebagai container utama. Gw lebih suka kasih id body ke div ini, supaya kita tahu fungsinya sebenernya sama dengan tag body. Lalu? tinggal kasih width yang kita mau, dan kasih text-align center untuk tag body. jadinya kira2 begini:

    body, #body {
      width: 780px;
      text-align: center;
    }

    Test di IE, perfect! Test di Firefox, ups, ukuran ok, tapi ko masih gak ke tengah ya?

  • Itulah kendala kedua, supaya Firefox bisa mengenali text-align center pada body, ada 3 syarat yang harus dipenuhi. Pertama, ada text-algin center (^_^) Kedua, ada width (nah, kedua syarat itu sudah kita penuhi). Ketiga, kita harus tambahkan margin dengan nilai 0px auto, jadi hasil akhirnya seperti ini:

    body, #body {
      width: 780px;
      text-align: center;
      margin: 0px auto;
    }

    Test lagi di Firefox, great! balik test di IE, great juga!

Gampang kan caranya? tapi yang gampang itu kadang2 jadi sering kelupa (^_^) good luck!

Share this Post More

2 Responses to “Centering Div for Firefox vs IE”

  1. Chen Hendrawan Says:

    Hati-hati pake dua css selector body dan #body.
    Contoh code di bawah ini:

    body, #body {
      width: 780px;
      margin-left: 50px;
    }

    Kalau dibuka di FF left margin nya bakal dobel (100px), kalau di IE cuman 50px.

  2. kocu Says:

    Hm… sebenernya sih kalau setting marginnya dia ganti gitu nanti gak center lagi :p hehe, karena ini tips untuk alignment center div di firefox dan ie (^_^) Tapi masukan bagus juga! Untuk menghindari adanya style yang diterapkan dua kali, kalau ada tambahan style sebaiknya diletakkan di tempat yang terpisah saja supaya aman. Jadinya kira2 seperti ini:

    body, #body {
      width: 780px;
      text-align: center;
      margin: 0px auto;
    }
    body {
      padding-top: 10px;
      font-family: Verdana;
      font-size: 11px;
    }

Leave a Reply