ต่อไป »

[banban]

ผมหาคำตอบ และลองมาหลายแบบแล้วครับ จนปัญญา หาทางแก้  .. (ผมจะไม่โพส ไม่ตอบอะไรถ้าไม่จำเป็น เพื่อให้ทุกกระทู้นั้นๆมีสาระเพียงพอ)

ผมสงสัยมากเรื่อง CSS ที่แสดงผลกับ IE ได้อย่างถูกต้องตามหลักการพื้นๆของหนังสือสอนทำเวบ ที่ยังสอนกันอยู่ แต่พอดูกับ Firfox แล้ว 80% แสดงผลเหมือนเดิม แต่อีกหลายๆอย่างแสดงผลเพี้ยนไป กระทู้นี้ขอแสดงให้เห็น 2 ข้อหลักๆที่ผมใช้บ่อย และขอถามว่าจะแก้ไขอย่างไรดีครับ?

1. เรื่อง Link Color ที่กำหนดใน <td> หรือ tag อื่นๆเพื่อให้ในส่วนนั้นๆแสดงสีออกมาตรงกันทั้งช่อง



2. เรื่อง Line Style เพื่อสร้างเส้นคั่นเนื้อหา ด้วยขนาด+สี ที่ต้องการ




บางคนเพิ่งเริ่มทำเวบ อาจยังไม่ถนัด CSS จะได้ทราบด้วยว่า ควรจะกำหนดเรื่อง CSS อย่างไรให้ได้มาตรฐานเดียวกันทั้ง IE+FF 

[ilovecumshot]

คุณเขียน CSS ไม่ถูกต้อง แต่ IE มันแสดงผลออกมาถูกต้องได้ ...
ส่วน FireFox มันก็แสดงผลถูกต้องแล้ว คุณเขียนไม่ถูกต้องมันก็แสดงออกมาไม่ถูกต้อง

แนะนำเวลาเขียนเว็บ ให้ทดสอบ Run ด้วย FireFox ครับ

[banban]

แล้วมันไม่ถูกต้องตรงไหนอ่ะครับ 

[มอมแมม]

คุณเขียน CSS ไม่ถูกต้อง แต่ IE มันแสดงผลออกมาถูกต้องได้ ...
ส่วน FireFox มันก็แสดงผลถูกต้องแล้ว คุณเขียนไม่ถูกต้องมันก็แสดงออกมาไม่ถูกต้อง

แนะนำเวลาเขียนเว็บ ให้ทดสอบ Run ด้วย FireFox ครับ

คุณกะลังจะบอกว่า ให้ยึด จิ้งจอกไฟ เป็นหลักใช่ปะ ไม่ว่าจะถูกหรือผิด ขอให้จิ้งจอกไฟใช้ได้เป็นพอ

[Newbies]

เวลาใส่ style จะไม่มีลูกน้ำคั่นนะ
แบบนี้

โค๊ด:

style="border-top:solid;border-top-color:#555555;border-top-width:1px"

และสำหรับ td tag น่าจะกำหนดแบบนี้นะ

โค๊ด:

td.01 a:link {
	color: #009900;
	text-decoration: none;
}

[yesupdate]

มีบางคุณสมบัติ ที่ IE และ Firefox ที่ใช้ร่วมกันไม่ได้ ส่วนใหญ่จะใช้กับ Firefox ได้ทุกตัว วิธีแก้คือ เลี่ยงไปใช้ Function อย่างอื่น โดยเขียนดักไว้ เช่น ถ้าเป็น IE ให้เอาสิ่งนี้มาแสดงนะ ทั้งหมดเรียกว่า Hack and Filter มักจะอยู่บนท้ายๆ ของหนังสือ CSS ภาษาไทยก็มีนะละเอียดด้วย

หรือจะค้นหาในเน็ตก็ได้ ตามคำที่บอกไป เรื่อง CSS หากศึกษาจริงๆ ก็ยาก เพราะมันต้องทำเป็นระบบ ทำจนสามารถเอาข้อความ Text ธรรมดามาเป็นเว็บได้ แต่ปัจจุบัน เมืองไทยส่วนใหญ่ มักจะทำเว็บเสร็จแล้วจึงตกแต่งด้วย CSS แต่เมืองนอกจะเน้นออกแบบ CSS ก่อน

[trvoy]

ถ้าจะใช้เส้นคั่น... ใช้ tag hr ดีกว่าไหมครับ มาตรฐานกว่า

[ก้ามปู]

เข้าไปดูมาตรฐานที่ w3.org อันนี้จะมาตรฐานสุด จะใช้ได้กับทุกตัว

[Mmax]

ลองเขียน

.01 a {
           color: #006699;
           text-decoration: none;   
}

.01 a:hover {
          color: #006699;
          text-decoration: underline;
}

[banban]

ขอบคุณทุกท่านที่แนะนำครับ ตอนนี้แก้ข้อ 2 ได้แล้ว คือ เรื่อง line style ทำตามที่คุณ Newbies บอกว่า style ไม่มี คอมม่า , ก็แสดงผลถูกต้องเลย 


แต่เรื่อง สี link ยังไม่ได้ครับ?? ใครถนัดออกแบบเวบ เพื่อ FireFox ช่วยชี้แนะด้วยครับ

[superdog]

ยึดตาม w3.org นะครับ

FireFox บางทีก็เน่านะครับ เช่น การตัดคำไทย หรือ active x บางอย่าง  หรือ ลูกเล่น java พื้นๆบางอย่าง ie แสดงผลได้ถูกต้องกว่า firefox นะครับ

แต่ ผมก็ใช้ fire fox นะ ยอมรับได้กับจุดนี้  เวลา fire fox ทำอะไรไม่ได้ ค่อยไปเปิด ie เอา รับไม่ได้เอาซะเลย IE 7 

[au8ust]

ยึดตาม w3.org นะครับ

FireFox บางทีก็เน่านะครับ เช่น การตัดคำไทย หรือ active x บางอย่าง  หรือ ลูกเล่น java พื้นๆบางอย่าง ie แสดงผลได้ถูกต้องกว่า firefox นะครับ

แต่ ผมก็ใช้ fire fox นะ ยอมรับได้กับจุดนี้  เวลา fire fox ทำอะไรไม่ได้ ค่อยไปเปิด ie เอา รับไม่ได้เอาซะเลย IE 7 

เรื่องตัดคำไทย อันนี้จริง
แต่เรื่อง ActiveX ปกติมันก็ใช้ใน Firefox ไม่ได้อยู่แล้วนี่ครับ คือมันไม่ได้เป็นมาตฐานกลาง มันถูกออกแบบมาสำหรับ IE โดย M$

เรื่องลูกเล่น JavaScript ขอตัวอย่างหน่อยครับ โดยส่วนตัวแล้วเชื่อว่าคงจะเป็นเพราะการ coding ที่ไม่ได้มาตฐานมากกว่า

[superdog]

ยึดตาม w3.org นะครับ

FireFox บางทีก็เน่านะครับ เช่น การตัดคำไทย หรือ active x บางอย่าง  หรือ ลูกเล่น java พื้นๆบางอย่าง ie แสดงผลได้ถูกต้องกว่า firefox นะครับ

แต่ ผมก็ใช้ fire fox นะ ยอมรับได้กับจุดนี้  เวลา fire fox ทำอะไรไม่ได้ ค่อยไปเปิด ie เอา รับไม่ได้เอาซะเลย IE 7 

เรื่องตัดคำไทย อันนี้จริง
แต่เรื่อง ActiveX ปกติมันก็ใช้ใน Firefox ไม่ได้อยู่แล้วนี่ครับ คือมันไม่ได้เป็นมาตฐานกลาง มันถูกออกแบบมาสำหรับ IE โดย M$

เรื่องลูกเล่น JavaScript ขอตัวอย่างหน่อยครับ โดยส่วนตัวแล้วเชื่อว่าคงจะเป็นเพราะการ coding ที่ไม่ได้มาตฐานมากกว่า

เรื่อง active x เนี่ย มันไม่ได้ออกแบบสำหรับ ie อย่างเดียวอ่ะมั๊ง Flash player ก็เป็น active x อันนึงนะ แต่บางอัน fire fox มันก็ใช้ได้นะ เพราะเห็นเค้าใช้กัน แล้ว fire fox ไม่มีเนี่ย มันก็เดือดร้อนคนใช้ น่ะสิ

ส่วนเรื่อง java เนี่ย ไม่ได้ใส่ใจอะไรนักหนา แต่เจอบ่อยๆที่ fire fox ใช้ไม่ได้นะ แต่ไปใช้ ie อ่ะ ใช้ได้ นี่มันก็เดือดร้อนต้องไปเปิด ie อีกเหมือนกัน

หรือถ้าพวก แฟนพันแท้ fire fox ก็ไม่ต้องไปใช้มันเลย อย่างงี้มันก็ไม่มีปัญหาอ่ะนะ

Fire fox มันเน่าพอๆกับ IE นั่นแหละ แต่ใช้ดีกว่า Fire fox มันก็เพีั้ยนเป็นเหมือนกัน เพี้ยนเยอะซะด้วย

ถ้าอยากให้ดีถูกใจ ก็เขียนมาใช้เองซะเลย  อยากได้ไรก็เขียนเอา ท่าจะดี 

แต่ผมใช้ได้หมดทุกยี่ห้อ 

[sunkoster]

จะบอกว่าถ้าจะเอาเพอร์เฟกทั้ง ไออี และไฟฟอก โดย โคด ครั้งเดียวนั้นยากคับ สำหรับตอนนี้
ไฟฟอกอิ้ง w3c ไออี 6 คนใช้มาก อิงอาไรดีก็อิ้งตัวมันเองเค้ายิ่งใหญ่555++
แต่พอมาเป็น ไออี7 ก็เริ่มหันมาอิง w3cแล้ว แต่คงต้องรออีกนาน กว่าจะได้อย่าไฟฟอก

สรุป ต้องโคดดักบราวเซอร์เอาคับดีที่สุด
โดยเขียนรองรับแบบไออี และไฟฟอกอยางละ 1ชุด

ส่วนใหญ่ของผมนอยเวปที่ดัก เอาแค่กลางๆพอ

ยังไงก็อย่าลืม แสตดดูละว่า มาจากบราวเซอร์ไหนบ้าง
และสำคัญอีกอย่างเรื่องความกว้างหน้าจอ

อีกนิสสส บราวเซอร์ หลักๆคนใช้เยอะ โหลดเก็บไว้ รับรองถ้าต้องการทำเวปที่ได้มาตรฐานการแสดงผลเนียบๆได้ใช้เกือบทุกตัวแน่ อิอิ :

[Newbies]

โค๊ด:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td.class01 a:link {
	color: #006699;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 12px;
}
td.class01 a:visited {
	text-decoration: none;
	color: #006699;
}
td.class01 a:hover {
	text-decoration: underline;
	color: #006699;
}
td.class01 a:active {
	text-decoration: none;
	color: #006699;
}
td.class01 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
}
a:link {
	color: #990000;
	text-decoration: none;
	font-size: 12px;
	font-family: Tahoma;
}
a:visited {
	text-decoration: none;
	color: #990000;
}
a:hover {
	text-decoration: underline;
	color: #990000;
}
a:active {
	text-decoration: none;
	color: #FF0000;
}
-->
</style>
</head>

<body>
<table width="355">
  <tr>
    <td width="345" class="class01"><a href="http://google.com">Do you need life insurrance</a><br />
Consider rewarding yourself with a blog post about the upgrade, reading that book or article you've been putting off. </td>
  </tr>
  <tr>
    <td class="class01" style="border-top:solid;border-top-color:#555555;border-top-width:1px"><a href="http://google.com">Do you need life insurrance</a></td>
  </tr>
  <tr>
    <td class="class01" style="border-top:solid;border-top-color:#555555;border-top-width:1px"><a href="http://www.yahoo.com">Consider rewarding yourself with a blog post</a></td>
  </tr>
  <tr>
    <td class="class01" style="border-top:solid;border-top-color:#555555;border-top-width:1px"><a href="http://www.msn.com">article you've been putting off</a></td>
  </tr>
  <tr>
    <td class="class01">&nbsp;</td>
  </tr>
</table>
<p><a href="http://google.com">Link outside Table</a><br />
Consider rewarding yourself with a blog post about the upgrade, reading that book or article you've been putting off. </p>
</body>
</html>

อันนี้ที่ลองทำนะ
สำหรับ class ที่จะใส่ใน td ต้องกำหนด td.classname ไปเลย ห้ามกำหนดแบบ .classname เฉยๆ ถ้ามีหลายๆ class ก็ต้องกำหนดหลายๆ รอบ

โค๊ด:

td.classtd01 a:link {
	color: #006699;
}
td.classtd01 a:visited {
	text-decoration: underline;
}
td.classtd02 a:link {
	color: #FF0000;
}
td.classtd02 a:visited {
	text-decoration: none;
}

และชื่อ class ให้เริ่มด้วยตัวอักษร ลองใส่ td.01 มันจะไม่ทำงาน ต้องใส่เป็น td.class01 แบบตัวอย่าง

[banban]

ขอบคุณทุกท่าน ที่ช่วยเพิ่มองค์ความรู้ให้คนอื่น ซึ่งผมได้เอา code คุณ Newbies มาลองเปิดดู ก็แก้ปัญหา สี link ได้แล้ว โดยขอสรุปให้มือใหม่ทั้งหลายได้เข้าใจ เพราะไม่มีที่ไหนบอกกันเลย ส่วนใหญ่ จะบอกแค่ว่า สร้าง CSS อย่างไร? แต่ไม่ได้บอกว่า "สร้างยังไงให้แสดงผลเหมือนกันทั้ง IE+FF" โดยเฉพาะเรื่องพื้นๆอย่าง สี link และ style ขอบ table ที่น่าจะใช้กันบ่อยๆ ไม่ใช่ใช้แค่ <hr> เพราะ บางครั้งเราต้องการ ให้มีเส้นขอบ ด้านซ้าย, ขวา,บน ได้ด้วย

เฉลยคำถาม จากโจทย์ 2 ข้อของกระทู้นะครับ

ข้อ 1. เรื่อง Link Color

    1.1 ต้องกำหนดเป็น tag ไปเลย ว่า style นี้จะใช้กับส่วนใดของเวบเพจ แล้วตามด้วยชื่อ classname ที่ต้องเริ่มด้วยตัวอักษร! ฉนั้น จากที่เคยใช้ .01 { ...ฯลฯ... } ก็เปลี่ยนเป็น  td.c01 { ...ฯลฯ... } เวลานำไปใช้ก็ <td class="c01" >..</td> แต่ถ้ามี link ที่อยู่ใน <span> ที่อยู่ใน <td> ใดๆ ก็ต้องเพิ่ม style ใหม่เข้าไปอีกเพราะเราเขียนว่า td.c01 ซึ่งจะใช้ได้กับ td เท่านั้น (อะไรกันนี่!)

    1.2 การวางบรรทัดของ css ต้องให้ a:link มาก่อน a:hover แต่ไม่จำเป็นต้อง เว้นบรรทัด เขียนรวมในบรรทัดเดียวกันก็ได้ จะได้

โค๊ด:

td.c01 a:link {  color: #006699; text-decoration: none;  }
td.c01 a:active { color: #006699; text-decoration: none; }
td.c01 a:visited { color: #006699; text-decoration: none;  }
td.c01 a:hover { color: #006699; text-decoration: underline; }

    ซึ่ง ถ้าเอา a:hover มาก่อน a:link จะทำให้ เวลาเม้าส์ชี้ link จะไม่มีเส้นใต้ !!


ข้อ 2. เรื่อง Line Style เพื่อใช้กับ table ก็แค่ไม่ใส่ comma ก็แสดงผลเหมือนกันทั้ง IE+FF เลย !! <--- โง่ตั้งนาน!!!



2 หลักการนี้ ผมใช้สร้างเวบมา 3-4 ปีแล้ว แต่ FF เพิ่งมีคนใช้มากขึ้นเมื่อไม่นานนี้ จริงๆแล้วผมไม่สนใจ FF เลย ถ้าไม่เห็นว่า GG เขาพัฒนา FF ก็น่าจะต้องใช้ FF ในการพิจารณาตรวจสอบเวบไซท์ที่นำ Adsense ไปติดไว้ แต่ถ้าให้แสดงความคิดเห็น ขอบอกว่า FF ไม่ควรละทิ้งสิ่งที่มาก่อน หลักการที่เคยใช้ได้ ทำใมต้องเปลี่ยนไปใช้กับข้อกำหนดใหม่หมด ทั้งๆที่มันไม่ได้เสียหายร้ายแรงต่อเนื้อหาสาระของเวบไซท์นั้นๆ อย่างเรื่อง
- การวางบรรทัด css อะไรก่อนอะไรหลัง
- การที่มี comma หรือ ไม่มี comma ใน tag style
- การสร้าง css class โดยไม่ต้องกำหนดว่า จะเอาไปใช้กับอะไร เช่น .01 เพื่อใช้มันได้หมด เช่น link ที่อยู่ใน <span >
- การสร้าง <table> อยู่ใน <div> บางครั้งแสดงผลผิดตำแหน่ง หน้าเวบเละเทะ แต่ IE แสดงถูกตามที่เห็นใน Dreamweaver
- การตัดคำไทย หลายเวบ ผมยืดออกข้าง เละตุ้มเป๊ะ หมดเลย

ทำใม FF ยังแยกแยะไม่ออก ว่าควรแสดงผลอย่างไร? ไม่ใช่ว่าผมจะมักง่ายอยากเขียนเวบยังไงก็ได้ แต่ FF ต้องรู้ว่า คนอื่นเขาทำ และใช้กับ IE ได้มานานหลายปีแล้ว ก็ควรทำให้มันรองรับได้ทั้งมาตรฐานเก่าๆด้วย ถ้าพูดว่า มาตรฐานเก่าๆนั้นผิด แล้วทำใม IE สามารถแสดงผลได้เป็นปรกติ แสดงว่า IE มีการโปรแกรมที่สุดยอดกว่า ใช่หรือไม่? นั่นคือ IE พยายามแสดงผลเพื่อผู้ชมเวบไซท์โดยแท้จริง มีเงื่อนไขที่มากกว่า รองรับ coding ได้หลายกรณีกว่านั่นเอง .... หรือผมเข้าใจอะไรผิด??


ขอบคุณทุกท่านอีกครั้งครับ

[Kazamatsuri]

ทำใม FF ยังแยกแยะไม่ออก ว่าควรแสดงผลอย่างไร? ไม่ใช่ว่าผมจะมักง่ายอยากเขียนเวบยังไงก็ได้ แต่ FF ต้องรู้ว่า คนอื่นเขาทำ และใช้กับ IE ได้มานานหลายปีแล้ว ก็ควรทำให้มันรองรับได้ทั้งมาตรฐานเก่าๆด้วย ถ้าพูดว่า มาตรฐานเก่าๆนั้นผิด แล้วทำใม IE สามารถแสดงผลได้เป็นปรกติ แสดงว่า IE มีการโปรแกรมที่สุดยอดกว่า ใช่หรือไม่? นั่นคือ IE พยายามแสดงผลเพื่อผู้ชมเวบไซท์โดยแท้จริง มีเงื่อนไขที่มากกว่า รองรับ coding ได้หลายกรณีกว่านั่นเอง .... หรือผมเข้าใจอะไรผิด??

เพราะ IE การ coding ไม่ได้เป็นแบบ strict เหมือน FF ไงล่ะครับ
แล้วก็ IE มันเป็นมาตรฐานของมันเองซะมากกว่าครับ ไม่ได้เน้นตาม W3C
เพราะงั้นบางอย่าง ผิดนิดผิดหน่อย หยวน ๆกันได้ ก็ว่ากันไป (เพราะงี้มันถึงบั๊กเยอะไงล่ะ)
แต่ FF มันอิงกับ W3C เป็นหลัก ผิดนิดผิดหน่อยมันก็ไม่ค่อยยอมแล้ว

อีกอย่าง IE6 มันไม่ค่อยรองรับ CSS2.x (จำไม่ได้ว่า 2.0 รึว่า 2.1) เพราะงั้นบางคำสั่งที่นำไปใช้มันถึงแสดงผลเพี้ยน ก็แค่นั้นแหละครับ
ส่วน IE7 ผมยังไม่ได้ทดสอบเท่าที่ควร เนื่องจากยังไม่ใช่กลุ่มที่ใช้กันใหญ่มาก

ถ้าคุณเขียนโค๊ดให้มัน strict ตามมาตรฐาน W3C ได้
95% การแสดงผลหน้าเวบของคุณค่อนข้างจะเหมือนกันแล้วล่ะครับ ที่เหลือก็มานั่งทำ CSS Hack กันนิดหน่อย
... จากใจคนหัดเขียน CSS

[banban]

เพราะ IE การ coding ไม่ได้เป็นแบบ strict เหมือน FF ไงล่ะครับ

โอเค ผมจะพยายามเข้าใจว่า FF ยังน้องใหม่ ให้โอกาสกันได้ ผมเชื่อว่า โปรแกรมที่ดีกว่า ย่อมยืดหยุ่นกว่า และทำงานได้ถูกต้องในข้อแม้ที่มีหลายๆกรณี ตอนนี้ขอเชียร์และใช้IE ต่อไป จะใช้ FF แค่ไว้ตรวจความปรกติ ของการใช้งานพื้นๆแค่นั้นพอ บางคนบอกว่า FF เร็วกว่า ผมก็ไม่เห็นมันจะเร็วกว่าตรงไหน โหลด table มายังไม่ครบส่วนแล้วรีบแสดงผล หน้าเวบก็เละตุ้มเป๊ะ โผล่มาชิดข้างโน้นที ข้างนี้ที เพราะต้องรีบแสดงผลออกมาก่อน

การจะตามแต่สิ่งใหม่ๆ ก็ต้องตามไปไม่จบสิ้น ...  แต่สุดท้าย เราก็ต้องตามมัน วันยังค่ำ 

[youcanberich]

เวลาผม ทำ template เช็คกับ ff ปกติดี แต่พอเปิดใน ie เบี้ยวทุกทีค่อยมาตามแก้ทีหลัง กว่าจะลงตัวเล่นเอาเหนื่อย 

[Kazamatsuri]

เพราะ IE การ coding ไม่ได้เป็นแบบ strict เหมือน FF ไงล่ะครับ

โอเค ผมจะพยายามเข้าใจว่า FF ยังน้องใหม่ ให้โอกาสกันได้ ผมเชื่อว่า โปรแกรมที่ดีกว่า ย่อมยืดหยุ่นกว่า และทำงานได้ถูกต้องในข้อแม้ที่มีหลายๆกรณี ตอนนี้ขอเชียร์และใช้IE ต่อไป จะใช้ FF แค่ไว้ตรวจความปรกติ ของการใช้งานพื้นๆแค่นั้นพอ บางคนบอกว่า FF เร็วกว่า ผมก็ไม่เห็นมันจะเร็วกว่าตรงไหน โหลด table มายังไม่ครบส่วนแล้วรีบแสดงผล หน้าเวบก็เละตุ้มเป๊ะ โผล่มาชิดข้างโน้นที ข้างนี้ที เพราะต้องรีบแสดงผลออกมาก่อน

การจะตามแต่สิ่งใหม่ๆ ก็ต้องตามไปไม่จบสิ้น ...  แต่สุดท้าย เราก็ต้องตามมัน วันยังค่ำ 

ก็ที่มันโหลดยังไม่เสร็จแล้วแสดงผลนี่แหละครับ มันถึงได้เร็วกว่า IE

แต่ถ้าเช็คที่ complete 100% มันก็ใช้เวลาเท่ากันน่ะแหละ