ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์ProgrammingCSS : ie6 ไม่ยอมพื้นแสดงหลังที่เป็น class ของ LI ทั้งๆที่ FF - Chome เห็นปกติคับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: CSS : ie6 ไม่ยอมพื้นแสดงหลังที่เป็น class ของ LI ทั้งๆที่ FF - Chome เห็นปกติคับ  (อ่าน 1693 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Mayjung007
ก๊วนเสียว
*

พลังน้ำใจ: 16
ออฟไลน์ ออฟไลน์

กระทู้: 207



ดูรายละเอียด
« เมื่อ: 21 เมษายน 2010, 14:06:09 »

ช่วยด้วยคับ นั่งแก้มานานแล้ว



FIREFOX



CHOME



IE 6


IE7

CODE HTML ส่วนนี้

         <div id="menumain">
       <ul>
<li > <a class="listmenu1" href="#" target="_parrent">   หน้าแรก</a> </li>
    <li class="listmenu2"> <a href="#" target="_parrent">มุมสมาชิก</a> </li>
    <li class="listmenu3">  <a href="#" target="_parrent">ข่าว</a> </li>
    <li class="listmenu4">      <a href="#" target="_parrent">เรื่องเด่น</a> </li>
    <li class="listmenu5">    <a href="#" target="_parrent">ทดสอบ</a> </li>
    <li class="listmenu6">    <a href="#" target="_parrent">ทดสอบ</a> </li>
    <li class="listmenu7">    <a href="#" target="_parrent">ทดสอบ</a> </li>
    <li class="listmenu8"> <a href="#" target="_parrent">ทดสอบ</a> </li>
    <li class="listmenu9">     <a href="#" target="_parrent">เว็บบอร์ด</a> </li>
    <li class="listmenu10">    <a href="#" target="_parrent">อัลบั้มรูป</a> </li>
    <li class="listmenu11">    <a href="#" target="_parrent">คำค้นหา</a> </li>
    <li class="listmenu12"> <a href="#" target="_parrent">เกี่ยวกับเว็บ</a> </li>
    <li class="listmenu13"> <a href="#" target="_parrent">ติดต่อผู้ดูแล</a> </li>
     <li class="listmenu14">    <a href="#" target="_parrent">ติดต่อโฆษณา</a> </li>
   </ul>
</div>
------
CSS ส่วนนี้

#menumain{
   background-image:url(images/mainmenu2.gif);repeat-x;
}
#menumain ul{
   list-style-type: none;
   padding-right:25px;
   padding:0; margin:0;
}
#menumain a{
   height:32px;
   display:block;
   text-decoration:none;
   border-bottom-width: thin;
   border-bottom-style: dashed;
   border-bottom-color: #0066FF;
   text-align: left;
   margin-top: 20px;
   margin-right: 10px;
   margin-bottom: -5px;
   font-weight: bolder;
   margin-left: 55px;
   padding-top: -10px;
}
.listmenu1{
   background:url(images/menunew/home.gif)no-repeat 10px center;
   padding:5px;
}
.listmenu2{
    background:url(images/menunew/2.gif)no-repeat 10px center;
}
.listmenu3{
    background:url(images/menunew/news.gif)no-repeat 10px center;
}
.listmenu4{
    background:url(images/menunew/research.gif)no-repeat 10px center;
}
.listmenu5{
    background:url(images/menunew/table.gif)no-repeat 10px center;
}
.listmenu6{
    background:url(images/menunew/livescore.gif)no-repeat 10px center;
}
.listmenu7{
    background:url(images/menunew/feed.gif)no-repeat 10px center;
}
.listmenu8{
    background:url(images/menunew/blog.gif)no-repeat 10px center;
}
.listmenu9{
    background:url(images/menunew/board.gif)no-repeat 10px center;
}
.listmenu10{
    background:url(images/menunew/all.gif)no-repeat 10px center;
}
.listmenu11{
    background:url(images/menunew/tag.gif)no-repeat 10px center;
}
.listmenu12{
    background:url(images/menunew/note.gif)no-repeat 10px center;
}
.listmenu13{
    background:url(images/menunew/mail.gif)no-repeat 10px center;
}
.listmenu14{
    background:url(images/menunew/spon.gif)no-repeat 10px center;
    padding-bottom:10px;
}

ช่วยทีคับ แก้มาเป็นวันแล้วคับ
บันทึกการเข้า
g-ji
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 231
ออฟไลน์ ออฟไลน์

กระทู้: 3,254



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 21 เมษายน 2010, 14:31:58 »

ลองเปลี่ยนเป็น id ดูจิ  Tongue

<li id="" อะ
บันทึกการเข้า

deadclosed
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 133
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 21 เมษายน 2010, 14:32:50 »

ขอดูหน้าเว็บหน่อยได้ไหมครับ

อาจเกิดจาก ค่า z-index ก้ได้

แต่ก็ไม่แน่ใจ

ลองเปลี่ยนค่า background-position ดูยังครับ

แคสนี้เหมือนเคยเจอ Tongue

ปล.
.listmenu4{
    background:url(images/menunew/research.gif)no-repeat 10px center; // แบบนี้ไม่ได้น่ะครับ IE มันกินแกลบ มันไม่เข้าใจ
                                                                          ถ้ากำหนดค่า background-posotion เป็น px แล้ว ค่าที่ตามต้องมีค่าเป็นตัวเลขหรือ 0
                                                                          background:url(images/menunew/research.gif)no-repeat 10px 0;

}
« แก้ไขครั้งสุดท้าย: 21 เมษายน 2010, 14:41:16 โดย deadclosed » บันทึกการเข้า
Mayjung007
ก๊วนเสียว
*

พลังน้ำใจ: 16
ออฟไลน์ ออฟไลน์

กระทู้: 207



ดูรายละเอียด
« ตอบ #3 เมื่อ: 21 เมษายน 2010, 14:51:10 »

แก้ได้ละคับ ต้อง

   background-image: url(images/menunew/2.gif);

แก้ในดรีมสดๆเลย
บันทึกการเข้า
whitecross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 129
ออฟไลน์ ออฟไลน์

กระทู้: 2,063



ดูรายละเอียด
« ตอบ #4 เมื่อ: 21 เมษายน 2010, 14:51:21 »

ลองเปลี่ยนเป็น id ดูจิ  Tongue

<li id="" อะ

 id กับ class เอาไว้กำหนดแค่ว่าอะไรที่เวลาเปลี่ยนควรเปลี่ยนเหมือนกันทั้งหมด กับเปลี่ยนอันนั้นอันเดี่ยวครับผม อธิบายงี้น่าจะเข้าใจง่ายขึ้น

...

ทำผิดแล้วท่าน CSS เค้าไม่ได้ใช้อย่างนั้นครับ ถ้าใช้ Tag ul และ li ต้องกำหนด style ของมันเอง ไม่ใช่ใช้ background

ซึ่งถ้าจะทำให้ข้างหน้า li เป็นรูปภาพ ผมจะอธิบายว่า...

1. ทำรูปที่จะใส่ข้างหน้าเอาไว้ โดยแบ่งเป็นของใครของมัน
2. ใน CSS ใช้คำสั่ง list-style-image:ที่อยู่ของภาพที่จะใช้.นามสกุล;

ตัวอย่าง...

HTML...

<ul id="side_nav">
     <li class="home"></li>
     <li class="news"></li>
     <li class="service"></li>
     <li class="about"></li>
     <li class="contact"></li>
</ul>

CSS...
#side_nav {
     width:200px;
     height:500px;
}
#side_nav li .home {
     list-style-image:home.gif;
     margin:...;
     padding:...;
}
...
...
...
#side_nav li .contact {
     list-style-image:contact.gif;
     margin:...;
     padding:...;
}


คร่าวๆ ประมาณนี้ครับ ลองดูครับ


ปล. ไม่ได้ตรวจสอบโค๊ดนะครับ พิมพ์ตามที่สมองอันน้อยนิดจะนึกออก ถ้าผิดพลาดยังไงก็บอกนะครับ
« แก้ไขครั้งสุดท้าย: 21 เมษายน 2010, 15:02:04 โดย whitecross » บันทึกการเข้า

บริการออกแบบเว็บไซต์ / PSD 2 HTML / Tableless Generation / W3C Validation / Graphic Design
ติดต่อสอบถามข้อมูลต่างๆทางอีเมล์ได้เลยครับผม...
deadclosed
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 133
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 21 เมษายน 2010, 14:56:26 »

แก้ได้ละคับ ต้อง

   background-image: url(images/menunew/2.gif);

แก้ในดรีมสดๆเลย


เหอๆ ไอ้เรากู้คิดไปนู่น

 Tongue

แต่เหมือนกับพี่ข้างบนบอก
มันต้องใช้ list-syle-images
ถ้าใช้ background ในกรณีที่อยากจะ hover จะทำไม่ได้ Cry
บันทึกการเข้า
Mayjung007
ก๊วนเสียว
*

พลังน้ำใจ: 16
ออฟไลน์ ออฟไลน์

กระทู้: 207



ดูรายละเอียด
« ตอบ #6 เมื่อ: 21 เมษายน 2010, 15:22:08 »

ลองเปลี่ยนเป็น id ดูจิ  Tongue

<li id="" อะ

 id กับ class เอาไว้กำหนดแค่ว่าอะไรที่เวลาเปลี่ยนควรเปลี่ยนเหมือนกันทั้งหมด กับเปลี่ยนอันนั้นอันเดี่ยวครับผม อธิบายงี้น่าจะเข้าใจง่ายขึ้น

...

ทำผิดแล้วท่าน CSS เค้าไม่ได้ใช้อย่างนั้นครับ ถ้าใช้ Tag ul และ li ต้องกำหนด style ของมันเอง ไม่ใช่ใช้ background

ซึ่งถ้าจะทำให้ข้างหน้า li เป็นรูปภาพ ผมจะอธิบายว่า...

1. ทำรูปที่จะใส่ข้างหน้าเอาไว้ โดยแบ่งเป็นของใครของมัน
2. ใน CSS ใช้คำสั่ง list-style-image:ที่อยู่ของภาพที่จะใช้.นามสกุล;

ตัวอย่าง...

HTML...

<ul id="side_nav">
     <li class="home"></li>
     <li class="news"></li>
     <li class="service"></li>
     <li class="about"></li>
     <li class="contact"></li>
</ul>

CSS...
#side_nav {
     width:200px;
     height:500px;
}
#side_nav li .home {
     list-style-image:home.gif;
     margin:...;
     padding:...;
}
...
...
...
#side_nav li .contact {
     list-style-image:contact.gif;
     margin:...;
     padding:...;
}


คร่าวๆ ประมาณนี้ครับ ลองดูครับ


ปล. ไม่ได้ตรวจสอบโค๊ดนะครับ พิมพ์ตามที่สมองอันน้อยนิดจะนึกออก ถ้าผิดพลาดยังไงก็บอกนะครับ

อันนีั้แหละคับพี่พยายามอยู่ แต่ทำได้แค่นี้ ตอนนี้ไดเ้แนวทางละคับ +1 คับ ขอบคุณมากคับ
บันทึกการเข้า
Condothai
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 56
ออฟไลน์ ออฟไลน์

กระทู้: 1,024



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 21 เมษายน 2010, 15:23:09 »

ลองเปลี่ยนเป็น id ดูจิ  Tongue

<li id="" อะ

 id กับ class เอาไว้กำหนดแค่ว่าอะไรที่เวลาเปลี่ยนควรเปลี่ยนเหมือนกันทั้งหมด กับเปลี่ยนอันนั้นอันเดี่ยวครับผม อธิบายงี้น่าจะเข้าใจง่ายขึ้น

...

ทำผิดแล้วท่าน CSS เค้าไม่ได้ใช้อย่างนั้นครับ ถ้าใช้ Tag ul และ li ต้องกำหนด style ของมันเอง ไม่ใช่ใช้ background

ซึ่งถ้าจะทำให้ข้างหน้า li เป็นรูปภาพ ผมจะอธิบายว่า...

1. ทำรูปที่จะใส่ข้างหน้าเอาไว้ โดยแบ่งเป็นของใครของมัน
2. ใน CSS ใช้คำสั่ง list-style-image:ที่อยู่ของภาพที่จะใช้.นามสกุล;

ตัวอย่าง...

HTML...

<ul id="side_nav">
     <li class="home"></li>
     <li class="news"></li>
     <li class="service"></li>
     <li class="about"></li>
     <li class="contact"></li>
</ul>

CSS...
#side_nav {
     width:200px;
     height:500px;
}
#side_nav li .home {
     list-style-image:home.gif;
     margin:...;
     padding:...;
}
...
...
...
#side_nav li .contact {
     list-style-image:contact.gif;
     margin:...;
     padding:...;
}


คร่าวๆ ประมาณนี้ครับ ลองดูครับ


ปล. ไม่ได้ตรวจสอบโค๊ดนะครับ พิมพ์ตามที่สมองอันน้อยนิดจะนึกออก ถ้าผิดพลาดยังไงก็บอกนะครับ


ผิดอย่างแรงเลยครับท่าน ท่านสามารถใช้ background กับ tag ul, li, a ได้ โดยทำพื้น background เป็นรูปๆ เดียว และในแท๊ก li ให้ใส่ชื่อ id ถ้าชื่อไอดีต่างกัน ให้เลือก background-position ค่าต่างกัน วิธีการนี้จะมีผลสเสีย คือรูปอาจจะใหญ่ แต่ข้อดีคือใช้เวลาโหลดเพียงครั้งเดียว สามารถประยุกต์กับ hover ได้ ทำแบบนี้เรืองการกระพริบของ background ใน ie6 จะหายไป

ลองดูตัวอย่างเวปที่ผมทำน่ะครับ เวปนี้  www[dot]tiretruckcenter[dot]com ตรงเมนู Home Product Recycle Products Server... ตรงนี้จะเป็นพื้น background เดียวกัน และใช้แท๊ก UL, LI เพื้่อผลทาง seo ไปในตัว
ลองคลิกขวาแล้วเซฟแบ๊คกราวนด์มาดูครับ แล้วลองดูเทคนิค css ว่าผมเขียนอย่างไง  ลอกได้ครับ เพราะผมก็ลอกฝรั่งมานานแล้ว
บันทึกการเข้า

deadclosed
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 133
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 21 เมษายน 2010, 15:35:31 »

ลองเปลี่ยนเป็น id ดูจิ  Tongue

<li id="" อะ

 id กับ class เอาไว้กำหนดแค่ว่าอะไรที่เวลาเปลี่ยนควรเปลี่ยนเหมือนกันทั้งหมด กับเปลี่ยนอันนั้นอันเดี่ยวครับผม อธิบายงี้น่าจะเข้าใจง่ายขึ้น

...

ทำผิดแล้วท่าน CSS เค้าไม่ได้ใช้อย่างนั้นครับ ถ้าใช้ Tag ul และ li ต้องกำหนด style ของมันเอง ไม่ใช่ใช้ background

ซึ่งถ้าจะทำให้ข้างหน้า li เป็นรูปภาพ ผมจะอธิบายว่า...

1. ทำรูปที่จะใส่ข้างหน้าเอาไว้ โดยแบ่งเป็นของใครของมัน
2. ใน CSS ใช้คำสั่ง list-style-image:ที่อยู่ของภาพที่จะใช้.นามสกุล;

ตัวอย่าง...

HTML...

<ul id="side_nav">
     <li class="home"></li>
     <li class="news"></li>
     <li class="service"></li>
     <li class="about"></li>
     <li class="contact"></li>
</ul>

CSS...
#side_nav {
     width:200px;
     height:500px;
}
#side_nav li .home {
     list-style-image:home.gif;
     margin:...;
     padding:...;
}
...
...
...
#side_nav li .contact {
     list-style-image:contact.gif;
     margin:...;
     padding:...;
}


คร่าวๆ ประมาณนี้ครับ ลองดูครับ


ปล. ไม่ได้ตรวจสอบโค๊ดนะครับ พิมพ์ตามที่สมองอันน้อยนิดจะนึกออก ถ้าผิดพลาดยังไงก็บอกนะครับ


ผิดอย่างแรงเลยครับท่าน ท่านสามารถใช้ background กับ tag ul, li, a ได้ โดยทำพื้น background เป็นรูปๆ เดียว และในแท๊ก li ให้ใส่ชื่อ id ถ้าชื่อไอดีต่างกัน ให้เลือก background-position ค่าต่างกัน วิธีการนี้จะมีผลสเสีย คือรูปอาจจะใหญ่ แต่ข้อดีคือใช้เวลาโหลดเพียงครั้งเดียว สามารถประยุกต์กับ hover ได้ ทำแบบนี้เรืองการกระพริบของ background ใน ie6 จะหายไป

ลองดูตัวอย่างเวปที่ผมทำน่ะครับ เวปนี้  www[dot]tiretruckcenter[dot]com ตรงเมนู Home Product Recycle Products Server... ตรงนี้จะเป็นพื้น background เดียวกัน และใช้แท๊ก UL, LI เพื้่อผลทาง seo ไปในตัว
ลองคลิกขวาแล้วเซฟแบ๊คกราวนด์มาดูครับ แล้วลองดูเทคนิค css ว่าผมเขียนอย่างไง  ลอกได้ครับ เพราะผมก็ลอกฝรั่งมานานแล้ว

ขึ้นต้นซะแรงเลย
ยังไงก้ได้ทั้งสองวิธีครับ Tongue

แล้วแต่ประยุกต์ใช้
บันทึกการเข้า
woratana
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 178
ออฟไลน์ ออฟไลน์

กระทู้: 2,283



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 21 เมษายน 2010, 15:49:21 »

ปกติไม่ใช้ list image style อะครับ ชอบแบบ css sprite มากกว่า มันลดhttp request
บันทึกการเข้า

sytes
สมุนแก๊งเสียว
*

พลังน้ำใจ: 11
ออฟไลน์ ออฟไลน์

กระทู้: 642



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 22 เมษายน 2010, 22:35:01 »

เว็บผมก็เขียน ด้วย css ผ่าน w3c strict เดียวนี้ง่ายและ ดูได้ ทุก เบราเซอร์
บันทึกการเข้า

20auguzt
คนรักเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 160



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 23 เมษายน 2010, 17:19:34 »

มายืนยันอีกเสียงครับว่าใช้วิธี css sprite ดีกว่า
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์