สถิติของคนไทย ส่วนใหญ่ ก็คือ IE6 อาจเป็นเพราะ IE7 มันใช้ได้กับ window ที่ถูกลิขสิทธิ์เท่านั้น ถ้าไม่ใช่หาตัวพิเศษ มาลงเอง ส่วน Firefox นั้นก็มีผู้ใช้เพิ่มมากขึ้นเรื่อยๆ

โดยส่วนตัวแล้ว ผมก็ไม่ได้ใช้อะไรเป็นพิเศษ เพราะงานของผมต้องเปิดมันทุกเบราเซอร์อยู่แล้ว เพราะผมทำเว็บด้วย div css บางวันก็ใช้ Fx บางวันก็ IE แต่ถ้าจะเข้าหน้าที่มีการล็อกอิน ก็มักจะใช้ Opera เพราะมีการเก็บ Session ที่ดี และดูเหมือนจะปลอดภัยสูง เพราะมันชอบมีหน้าต่างมาถามนู่นถามนี่ตลอด จริงๆแล้วก็ไม่รู้เหมือนกัน บางวันก็งงว่าตัวเอง เก็บ bookmark ไว้ที่ เบราเซอร์ไหน หรือดู history แล้วไม่มีเว็บที่เคยเข้าก็แสดงว่าวันนั้น ใช้ เบราเซอร์อันอื่น เหอๆ
อ่านต่อ คลิกที่นี่ »

หากใครเคยใช้รูปภาพแบบ .png แบบพื้นหลังใส แล้วละก็ คงจะเคยพบกับปัญหา ที่เกิดพื้นสีเทาขึ้นตรงที่ต้องการให้เป็น transparent เฉพาะ IE6 จนต้องเปลี่ยนไปใช้ gif หรือ jpg ตามเดิม ทั้งที่ IE7 , Firefox ก็แสดงผล png ได้อย่างไม่มีปัญหา

วิธีแก้ png IE6

1. ดาวน์โหลด ไฟล์นี้ png ie6 fix.zip ซึ่งจะมี ไฟล์ iepngfix.htc และ blank.gif
2. แตกมันออกมาแล้วอัพโหลด 2 ไฟล์นี้ ไปที่เดียวกับ ไฟล์ css ของคุณ
3. แล้วเขียนในไฟล์ css ของคุณแบบนี้ img { behavior: url(iepngfix.htc); }

** ถ้าหากภาพ png ไม่ได้เป็น แท็ก <img> แต่เป็นแบ็คกราวน์ เช่น

#header { background:url(header.png); }

เราก็สามารถเขียนเข้าไปแบบนี้ได้เลย แต่บรรทัดบนที่เรียก bg ยังต้องเขียนอยู่นะครับ

img, #header { behavior: url(iepngfix.htc); }

#header { background:url(header.png); }
#header { behavior: url(iepngfix.htc); }

ติดกันแบบนี้เลยก็ได้


ที่สำคัญคือเขียน path ให้ถูกต้อง และรูปที่เป็นแบ็คกราวน์ repeat ในส่วน repeat จะไม่ทำงาน ใช้ได้เฉพาะภาพที่เป็นภาพเดียว หรือ no-repeat เท่านั้น

ถ้าคุณใช้ IE7, Firefox หรือ Opera เปิด divland คุณจะเห็นว่ามีเส้นเฉียงเป็นพื้นหลัง แต่ถ้าใช้ IE6 คุณจะเห็นว่ามีเส้นเล็กๆอยู่มุมบนซ้ายเส้นเดียว เพราะมันไม่ repeat

ถ้าใครแก้ ตัวจาวาสคริปให้มัน repeat ได้ หรือ ไปเจอเทคนิคอื่นที่ สามารถ ซ่อม png transparant in IE6 แบบ repeat ได้ละก็ บอกผมด้วยนะครับ

แน่นอนครับ ถ้ามันสั้นได้ จะเขียนยาวไปทำไมให้เยิ่นเย้อ มาดูกันว่า property ตัวไหน ย่อได้บ้าง

Background

แบบปกติ
background-color: #87CEFA; ———————–/*สีแบ็คกราวน์*/
background-position: left top; ———————-/*ตำแหน่งชิดซ้าย บน*/
background-repeat: no-repeat;——————– /*ใส่ไปรูปเดียว ไม่ต้องทำซ้ำ*/
background-image: url(images/arrow.gif); ——–/*เอารูปจากที่นี่นะ*/
background-attachment: fixed; —————-/*ใส่ตรงไหน fix ไว้ตรงนั้นเลย ต่อให้เลื่อน scroll bar ลงมาก็ยังเห็น*/

แบบย่อแล้ว
background: #87CEFA url(images/arrow.gif) no-repeat fixed left top; ควรเรียงตามลำดับครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี

ถ้าเขียนแบบนี้
background: #87CEFA url(images/arrow.gif) no-repeat fixed 5px 10px; ตัวเลขค่าแรกคือระยะห่างแบ็คกราวน์ในแนวแกน x อันที่2 คือแนวแกน y อ่านต่อ คลิกที่นี่ »

li คือ list ul คือ unorderlist จะนับ li เป็น สัญลักษณ์ อื่นๆที่ไม่ใช่ตัวเลข ol คือ orderlist นับ li เป็นตัวเลข
รูปแบบการใช้คือ

แต่เราสามารถกำหนด property ให้ ul ได้ ด้วยการใส่ list-style-type เช่น ul { list-style-type: square } ก็จะได้เป็นสี่เหลี่ยมเล็กๆ

การแสดงผล

เขียนโค้ด css ดังนี้ อ่านต่อ คลิกที่นี่ »

SKYHIGH INDUSTRY - by Top

Size: 89.9 KB
W3C: XHTML 1.0
CSS: Yes
Tableless Design: Yes

*** ดาวน์โหลดไปใช้ อย่าลืมให้ link credit เจ้าของ templates ด้วยนะจ๊ะ