ถามเรื่องการแสดงผล CSS ของIE6

สวัสดีครับ













อันนี้ ทดสอบในie7 ครับ

พอie6  มันไม่ขึ้น drop down ลงมาครับ



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





พอศึกษา จาก http://www.goragod.com/knowledge/2/CSS....html?q=css+ie6



วิธีที่แก้ไข ที่ลองแล้ว  ไม่สำเร็จ

- *html ที่ css แล้ว

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







css

Filename  :  menu_style.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;

       

        }

    .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



<!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  จะต้องทำยังไงบ้างครับ

ขอบคุณมากมากๆๆครับ
10 ม.ค. 2554 2 3,498

ie6 จะไม่รองรับ li:hover ครับ หรือพูดง่ายๆ คือ ie6 จะใช้ hover ได้กับ tag a เท่านั้น tag อื่นจะใช้ไม่ได้



การแก้ไข คงต้องใช้ Javascript ในการทำงานร่วมกับ IE6 ละครับ



ลองมองหาโค้ดเมนูแบบนี้ได้ที่ dynamicdrive.com ครับ



แต่โดยส่วนตัวแล้วผมเลิกใช้ ie6 แล้วครับ (และเลิกเขียนโค้ดให้รองรับ ie6 แล้วด้วย)
#1

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



มีcode แบบนี้ครับ


<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>



แต่ที่ผมไม่เข้าใจว่า บรรทัดนี้ จะไปใส่ไว้ไหนครับ?
var sfEls = document.getElementById("content").getElementsByTagName("ul");
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.



#2
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^