Jumat, 24 Desember 2010

Mengatasi Masalah Tampilan CSS Blog Yang Berbeda di Beberapa Browser

Web Browser
Banyak beberapa web design mengeluhkan masalah tampilan CSS website ataupun blognya yang berbeda ketika di buka oleh beberapa web browser, saya ambil contoh terkadang suatu blog ketika di buka dengan menggunkan Mozilla Firefox sangat baik tampilannya namun ketika di buka dengan menggunakan browser lain, tampilan website/blog yang menjadi berantakan atau tidak sesuai dengan apa yang telah di atur pada desain CSS yang telah di buat.


Sebenarnya penyebab sehingga tampilan website/blog berbeda tampilannya di beberapa browser, karena Kode HTML yang digunakan serta kode CSS dan lainnya yang di buat tidak mematuhi standard W3C. Yah namun meskipun sudah standar terkadang hal tersebut tidak menjamin tampilan website/blog anda terbebas dari masalah, hal tersebut di karenakan beberapa web browser juga mempunyai aturan atau standar yang berbeda khususnya browser Internet Explorer (IE) yang paling banyak dikeluhan seseorang yang tampilan blognya menjadi hancur total ketika di buka dengan browser yang satu ini.

Khusus pada tutorial ini, saya akan membagikan sedikit tips bagi yang menggunakan kode CSS untuk mendesain tampilan website/blog nya sehingga meminimalisir terjadinya tampilan website/blog yang berantakan ketika di buka dengan menggunakan beberapa aplikasi web browser.

Untuk mengatasi masalah tersebut kita bisa menambahkan beberapa kode css hack khusus untuk browser yang bermasalah, untuk jelaskan lihat kode css berikut:

IE Conditional Tags
<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Lengkapnya tentang Conditional Tags bisa di baca di
About Conditional Comments

IE 6 Hack
*html .classname {}

IE 6 '!important' Hack
.classname {
float: left;
margin: 200px !important;
margin: 220px;
}

IE 7 Hack
*+html .classname {}

Safari Hack
html:lang(en)>body  .classname {}

Opera 7 Hack
@media all and (min-width: 0px){
.classname {}
}

iPhone, mobile webkit Hack
@media screen and (max-device-width: 480px) {
.classname { color: red  }
}

Kode diatas cukup anda tambahkan pada bagian css yang bermasalah saja, tidak perlu semuanya, untuk jelasnya berikut contoh penggunaanya

Pada Internet Explorer 6
.classname {
float: left;
margin: 200px !important; /* css ini yang akan di baca oleh IE6 */
margin: 220px; /* css ini akan di baca oleh semua browser kecuali IE6 */
}

Pada Internet Explorer 7
*+html .classname {
margin: 220px;
} /* css ini yang akan di baca oleh IE7 */

.classname {
margin: 220px;
} /* css ini akan di baca oleh semua browser kecuali IE7 */

Untuk yang browser lainnya silahkan anda sesuaikan yah!

Yups jika anda mengetahui tambahan kode css hack khusus untuk browser lain mungkin bisa anda share di sini. Semoga dengan artikel ini dapat membantu rekan-rekan blogger yang desain tampilan css website atau blog nya bermasalah pada beberapa web browser.

Suka dengan artikel di internetberitaku.com ? Yuk masukin alamat E-Mail anda dibawah ini! Dengan begitu setiap ada postingan atau artikel terbaru, anda akan langsung menerimanya melalui via E-Mail.


25 komentar on " Mengatasi Masalah Tampilan CSS Blog Yang Berbeda di Beberapa Browser "

Add your comment. Please don't spam!
Subscribe in a Reader
makeityourring diamond engagement rings on 14 Juli 2011 17.35 mengatakan...

Makasih tutorialnya gan.saya cuman mau tanya blog saya hancur kalau di buka di firefox 5 dan IE 9.bagaimana caranya untuk mengembalikan agar bisa dibuka dan tampilanya bagus semua.blog saya Firstromantics. Mohon pencerahanya boss.tolong sangat butuh sekali pertolongan nih gan.

Anonim mengatakan...

nice info gan.
emang gk tau kenapa IE jadul banget, ketinggalan ma browser lain.
web ane juga gan kadang cocok2 kan ma browser...
http://tips-komputer.makassarelektro.com

Faisal on 16 November 2011 21.54 mengatakan...

O...ternyata parameter !important itu untuk mengatasi kompatibilitas di IE ya? Saya baru tahu. Saya kira itu cuma kode biasa.

Nice sharing :)

Tukang Pos on 8 Desember 2011 13.56 mengatakan...

IE Hack itu tidak valid dan cukup jahat menurut Saya. Para desainer juga bilangnya begitu, karena ini tidak sesuai dengan peraturan.

Rick on 19 Desember 2011 14.17 mengatakan...

oke deh bro....siap utk dicoba nih scriptnya...
thx yaa....

rachmat on 27 Januari 2012 10.54 mengatakan...

Salam kenal...
saat ini blog saya sedang bermasalah begini : kalau di buka di komputer yang berbeda kadang slide yang harusnya muncul di dalam posting malah muncul di halaman depan, bagaimana solusinya
Terimakasih sebelumnya

Rina As on 24 Februari 2012 09.34 mengatakan...

Alhamdulillah nemu juga cara mengatasi tampilan css, trims akan saya terapkan di blog saya

andika priyanto on 15 Mei 2012 17.49 mengatakan...

teman bisa bantu tidak halaman bog saya berntakan, masa widget yang seharusnya berada di side bar bisa dibawah postingan,

Yogie on 20 Juni 2012 17.17 mengatakan...

friend tolong dunk web saya MyPassword Store tampilan di ienya super berantakan sampe gak keliatan sama sekali. Tolong dibantu yah :)

Vie Tebe on 28 Januari 2013 09.52 mengatakan...

thx infonya sob.. tp ttep gak ngerti :(

kado sayang on 28 Februari 2013 14.07 mengatakan...

selamat siang..wah bingung nih..kode diatas ditaruh dimana ya??maklum pemula,lagi belajar..trims

Anonim mengatakan...

pake ini aja, dijamin maknyuss.. tinggal taruh di headnya aja


Anonim mengatakan...


furniture jati jepara on 29 Maret 2013 22.26 mengatakan...

waw mantab gan . .. thanks ea gan

Mebel Jepara on 29 Maret 2013 22.28 mengatakan...

makasih atas infonya mas

tips blogger dan computer on 5 April 2013 21.41 mengatakan...

betul sekali mas saat saya coba blog di internet explorer tampilanya beda, makasih sudah berbagi salam kenal..

nahap.com on 24 Mei 2013 03.27 mengatakan...

apa semua margin atau size bisa ditambahkan !important; ?

bagaimana dengan chrome dan opera gan.??
blog saya kalau dibuka di opera malah blank putih semua,
kalau di chrome jadi kurang rapi :((

terimakasih...

mebel jepara jati on 19 Oktober 2013 03.36 mengatakan...

Ya gan punya ane juga demikian sampai pusing ngatasi nya, sudah instal ulang templetenya masih juga berantakan tempat posting sharusnya [ada tempatnya eh malah tdk jelas tempatnya yg shrusnya gan, mhon bantuanya gan, thks ini situs ane gan http://www.mebeljeparajati.com/

Triktalk on 1 Maret 2014 22.55 mengatakan...

wah masalah punya saya ini..tampilan blog di komputer lain ancur..huruf yang seharusnya verdana menjadi huruf lain.

bingung saya cara mengatasinya...
mau ganti template saya..soalnya seo nya udah 100%..

Blog Naz Cules on 8 Maret 2014 20.52 mengatakan...

Lagi tidak ada kerjaan saya coba buka blog saya di IE tampilannya hancur benar beda sama punya mas. Masih bingung mas dengan tutorx.

Kalau di Chrome untuk mengatur margin agar tampilan blog tetap di tengah kan pakai margin: 0 auto, kalau di IE pakai itu yah yang !important.

mebel jepara on 21 Mei 2014 11.23 mengatakan...

mksih infonya gan

nabila mebel on 14 September 2014 00.12 mengatakan...

cukup rumit gan..
tambah sukses gan

Hà Tuấn Đạt on 20 Agustus 2015 11.35 mengatakan...

ấn quyết ở trong phi kiếm.

Ba pháp bảo chậm rãi chuyển động, dừng ở trước mi tâm Vương lâm, hào quang tràn loá mắt, nhìn lại cực kỳ huyễn lệ.
dong tam
game mu
cho thuê phòng trọ
cho thuê phòng trọ
nhạc sàn cực mạnh
tổng đài tư vấn pháp luật
công ty luật
số điện thoại tư vấn luật
dịch vụ thành lập doanh nghiệp
Ba loại pháp bảo này, chất lượng không thể so sánh với Tiên Bảo chân chính được. Thậm chí, ngay cả hạ phẩm cũng không sánh được. Nhưng chúng lại có thể sử dụng được tiên lực, trên nó còn ẩn chứa ý cảnh thần thông.

Mặc dù không có tiên lực, tu sĩ Anh Biến cũng có thể, dùng linh lực của mình để sử dụng pháp bảo. Như vậy uy lực sẽ tăng lên rất nhiều.

- Ngụy tiên bảo !
Vương Lâm hạ giọng nói.

Đây pháp bảo mà hắn chế tác có chất lượng cao nhất. Dù sao đối với luyện khí, hiểu biết của Vương Lâm vẫn còn sơ sài, không hề tỉ mỉ. Hiểu biết của hắn phần lớn dựa vào ngọc giản luyện khí thu được năm đó trên Hỏa Phần Quốc ở Chu Tước Tinh.

Lẽ ra bản thân hắn không có khả năng chế tạo ra pháp bảo, nhưng vì tu vi của hắn đạt tới

Meiqing Xu on 7 April 2016 10.43 mengatakan...

xiaowei 20160407
burberry outlet canada
oakley sunglasses wholesale
michael kors handbags
michael kors outlet online
michael kors purses
reebok
sac longchamp
michael kors
coach factory outlet
jimmy choo outlet store
reebok outlet store
hollister clothing store
coach outlet
mont blanc pens
coach outlet online
omega
armani exchange
ralph lauren outlet
christian louboutin shoes
michael kors outlet
air max
gucci borse
ed hardy uk
cheap jordan shoes
pandora jewelry
rolex daytona
discount oakley sunglasses
nike tn pas cher
omega speedmaster
louis vuitton handbags
coach factory
fitflops sale clearance
versace sunglasses
toms outlet
michael kors outlet online
true religion outlet
burberry bags
kate spade outlet online
hollister hoodies
hermes outlet

Gege Dai on 9 Agustus 2016 14.06 mengatakan...

rolex watches
air jordan 13
adidas outlet
mulberry bags
ralph lauren outlet
tiffany jewellery
louis vuitton outlet
nhl jerseys
michael kors outlet online
longchamp outlet
dior outlet
oakley sunglasses
ray-ban sunglasses
coach factory outlet
ferragamo outlet
ysl outlet online
michael kors outlet
fitflops clearance
coach outlet
coach outlet online
louis vuitton handbags
ray ban sunglasses
longchamp pliage
oakley sunglasses wholesale
christian louboutin uk
cheap ray ban sunglasses
timberland shoes
celine outlet
prada handbags
michael kors handbags
valentino outlet
new balance shoes
cheap jordans
pandora jewelry
longchamp bag
mulberry handbags sale
polo outlet
nfl jersey wholesale
0809jianxiang

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar

Copyright © 2010 internetberitaku.com | Powered By Blogger | Custom Themes By InternetBeritaKu