Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ถามเรื่องการแสดงผล CSS ของIE6 ( เมนู drop down ไม่แสดงผลใน IE6 )



 

ถามเรื่องการแสดงผล CSS ของIE6 ( เมนู drop down ไม่แสดงผลใน IE6 )

 



Topic : 054239



โพสกระทู้ ( 41 )
บทความ ( 0 )



สถานะออฟไลน์




Css เป็นแบบนี้
อันนี้ ทดสอบในie7 ครับ
พอie6 มันไม่ขึ้น drop down ลงมาครับ

ต้องการเขียนให้ลองรับ ie ทั้ง2 ตัวล่ะครับ



วิธีที่แก้ไข ที่ลองแล้ว ไม่สำเร็จครับ
- *html ที่ css แล้ว
- <!--[if IE 6]><link href="style.css" rel="stylesheet" type="text/css" /><![endif]-->



css
Filename : menu_style.css
Code (PHP)
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
       
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
       
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }


//--------------------------------------------------------------------------------------------

-html

Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
    <br>
    <br>
    <div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Products</a>
                <ul>
                    <li><a href="#">Drop Down CSS Menus</a></li>
                    <li><a href="#">Horizontal CSS Menus</a></li>
                    <li><a href="#">Vertical CSS Menus</a></li>
                    <li><a href="#">Dreamweaver Menus</a></li>
               </ul>
          </li>
            <li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
            <li><a href="/contact/contact.php">Contact</a></li>
        </ul>
    </div>

</body>
</html>




และถ้าจะให้รองรับ 2ตัว คือ ie6 กับ ie7 จะต้องทำยังไงบ้างครับ
ขอบคุณมากมากๆๆครับ



Tag : PHP






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-01-10 20:14:00 By : thandon View : 2449 Reply : 10
 

 

No. 1



โพสกระทู้ ( 114 )
บทความ ( 0 )



สถานะออฟไลน์


เพราะว่าใน IE6 ไม่รองรับ CSS การเขียนแบบ Hover ที่ตัว Element ครับ

ul li:hover แบบนี้ใน ie6 ใช้งานไม่ได้ครับ

ีul li a:hover แบบนี้ถึงจะทำงานได้ครับ ใน ie6

อาจจะต้องมี javascript เข้ามาช่วยในการ ดักจับ Event ว่า เมื่อ li hover แล้วค่อยทำอะไรต่อไป


อาจจะมีวิธีที่ดีกว่านี้ แต่ปกติที่ผมทำจะใช้รูปแบบนี้ครับ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-10 23:26:13 By : LindyFralin
 


 

No. 2



โพสกระทู้ ( 41 )
บทความ ( 0 )



สถานะออฟไลน์


จาก เว็ปนี้ครับ http://www.visibilityinherit.com/code/ie6-hover-javascript.php

มีcode แบบนี้ครับ
ผมเอา ส่วนนี้ไปวางไว้ ใน html ก่อนคำลั่ง เรียก css ใช่ไหมครับ ?
Code (PHP)
<script type="text/javascript">
// suckerfish hover effect for ie6
sfHover = function() {
    // specify hovered element and div in which it sits 
    var sfEls = document.getElementById("content").getElementsByTagName("ul");
	for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>



แต่ที่ผมไม่เข้าใจว่า บรรทัดนี้ จะไปใส่ไว้ไหนครับ?
Code (PHP)
var sfEls = document.getElementById("content").getElementsByTagName("ul");

Quote:
Second: within in the script itself specify the element you would like to
show a hovered effect on, and the <div> in which the element sits.


ประวัติการแก้ไข
2011-01-11 03:50:34
2011-01-11 03:51:54
2011-01-11 04:09:42
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-11 03:15:27 By : thandon
 

 

No. 3



โพสกระทู้ ( 114 )
บทความ ( 0 )



สถานะออฟไลน์


จะใส่หัวหรือท้ายก็ได้ครับผม ขอให้อยู่ใน <HTML> ก็พอ

var sfEls = document.getElementById("content").getElementsByTagName("ul");

เป็นการระบุตัว Target ที่เราต้องการทำครับ โดยการ Access DOM เข้าไปที่ละ Level

อย่างเช่นตัวอย่างนี้เขาต้องการ Add Event ที่ตัว UL

ถ้าเขียนเป็น html ก็จะเป็น

<div id="content"><ul>

ประมาณนี้อะครับ


ถ้าเป็นของคุณอาจจะเป็น

var sfEls = document.getElementById("menu").getElementsByTagName("ul");

แต่ตัวอย่างของคุณยังไม่มี ID อาจจะต้องสร้าง ID ขึ้นมาไว้เพื่อให้ทำงานได้นะครับ และตัวงานของคุณอาจจะต้องระบุ Tartget ถึง LI ก็ลอง Acess ดูทีละ Level ครับ

หรืออาจะสร้าง ID ที่ตัว UL แล้ว Acess ไปถึง LI ก็ได้ครับ น่าจะง่ายกว่า


ถ้ายังไม่เข้าใจก็บอกนะครับ

พอดีอธิบายไม่เก่ง ออกแนวมวยวัดอะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-11 11:20:29 By : LindyFralin
 


 

No. 4



โพสกระทู้ ( 41 )
บทความ ( 0 )



สถานะออฟไลน์


รายละเอียดของการตอบ ::
ถ้าเป็นของคุณอาจจะเป็น

var sfEls = document.getElementById("menu").getElementsByTagName("ul");

แต่ตัวอย่างของคุณยังไม่มี ID อาจจะต้องสร้าง ID ขึ้นมาไว้เพื่อให้ทำงานได้นะครับ และตัวงานของคุณอาจจะต้องระบุ Tartget ถึง LI ก็ลอง Acess ดูทีละ Level ครับ

หรืออาจะสร้าง ID ที่ตัว UL แล้ว Acess ไปถึง LI ก็ได้ครับ น่าจะง่ายกว่า


ถ้ายังไม่เข้าใจก็บอกนะครับ



ไม่เข้าใจครับ TT______TT
ถ้าลองแก้จาก code ผมจริงๆ ต้อง แก้ตรงไหนบ้างล่ะครับ ?
รบกวนตอบกลับด้วยนะครับ ขอบคุณมากครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-11 13:17:54 By : thandon
 


 

No. 5



โพสกระทู้ ( 41 )
บทความ ( 0 )



สถานะออฟไลน์


Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript">
// suckerfish hover effect for ie6
sfHover = function() {
    // specify hovered element and div in which it sits 
    var sfEls = document.getElementById("menu").getElementsByTagName("ul"); 
	for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
    <br>
    <br>
    <div class="menu">

		<div id="menu">

                      <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Products</a>

			<div id="menu">

                <ul>
                    <li><a href="#">Drop Down CSS Menus</a></li>
                    <li><a href="#">Horizontal CSS Menus</a></li>
                    <li><a href="#">Vertical CSS Menus</a></li>
                    <li><a href="#">Dreamweaver Menus</a></li>
               </ul>

			   </div>

          </li>
            <li><a href="/faq.php">FAQ</a>

			<div id="menu">

                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>

				</div>

          </li>
            <li><a href="/contact/contact.php">Contact</a></li>
        </ul>

		</div>

    </div>

</body>
</html>

ประมาณนี้หรือเปล่าครับ แต่ก็ยังไม่ได้ล่ะครับ TT____TT
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-11 13:41:14 By : thandon
 


 

No. 6



โพสกระทู้ ( 114 )
บทความ ( 0 )



สถานะออฟไลน์


เขียน jquery ได้ไหมครับ

pure javascript ผมไม่ได้ศึกษามากอะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-11 14:30:58 By : LindyFralin
 


 

No. 7



โพสกระทู้ ( 41 )
บทความ ( 0 )



สถานะออฟไลน์


ตอนนี้ศึกษาจากเว็ปนี้อยู่ครับ
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-11 14:47:55 By : thandon
 


 

No. 8



โพสกระทู้ ( 114 )
บทความ ( 0 )



สถานะออฟไลน์


Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#menu li').mouseenter(function(){
				$(this).find('ul').css("display","block");
			}).mouseleave(function(){
				$(this).find('ul').css("display","none");
			})
		});
	</script>
	<style type="text/css">
		.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
		display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
       
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
       
        }
	.show{
		
	}
    .menu li ul a,{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }    

	</style>
</head>
<body>
    <br>
    <br>
    <div class="menu" >
        <ul id="menu">
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Products</a>
                <ul>
                    <li><a href="#">Drop Down CSS Menus</a></li>
                    <li><a href="#">Horizontal CSS Menus</a></li>
                    <li><a href="#">Vertical CSS Menus</a></li>
                    <li><a href="#">Dreamweaver Menus</a></li>
               </ul>
          </li>
            <li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
            <li><a href="/contact/contact.php">Contact</a></li>
        </ul>
    </div>

</body>
</html>


เสร็จแล้วนะครับ

ผมลอง Test ให้แล้วใช้งานได้ปกติครับผม บน IE6
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-12 00:46:17 By : LindyFralin
 


 

No. 9



โพสกระทู้ ( 114 )
บทความ ( 0 )



สถานะออฟไลน์


สิ่งที่ผมแก้ มีดังนี้

Code (PHP)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#menu li').mouseenter(function(){
				$(this).find('ul').css("display","block");
			}).mouseleave(function(){
				$(this).find('ul').css("display","none");
			})
		});
	</script>


import jquery มาจาก Google
Code (PHP)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>


function on load page
Code (PHP)
<script type="text/javascript">
		$(function(){
			$('#menu li').mouseenter(function(){
				$(this).find('ul').css("display","block");
			}).mouseleave(function(){
				$(this).find('ul').css("display","none");
			})
		});
	</script>


ผมเพิ่ม ID ให้กับ UL id="menu" ครับ
Code (PHP)
  <div class="menu" >
        <ul id="menu">
         <li></li>
        .....
        </ul>
  </div>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-12 00:49:37 By : LindyFralin
 


 

No. 10



โพสกระทู้ ( 41 )
บทความ ( 0 )



สถานะออฟไลน์


โอ้ ขอบพระคุณมากๆครับ



หลังจากผมนั่งงมเองมาเกือบ 2-3 วัน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-12 04:46:10 By : thandon
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ถามเรื่องการแสดงผล CSS ของIE6 ( เมนู drop down ไม่แสดงผลใน IE6 )
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่