A-AA+then

css แสดงบน firefox

3,430

เกี่ยวกับการรัน web บน firefox นะคะ ถ้ารันบน IE จะแสดงผลปกติ แต่ถ้าเป็น firefox จะรันผลผิดเพี้ยนไปหมด อันนี้เกี่ยวข้องกับ css หรือ javascrict ที่ใช้หรือป่าวค่ะ code เป็นแบบนี้นะคะ
index.html
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test</TITLE>
 <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
 <script src="jquery.scrollTo-1.3.3-min.js" type="text/javascript"></script>
 <script src="jquery.localscroll-1.2.5.js" type="text/javascript"></script>
 <script src="jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>
 <script src="scroll.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="coda-slider.css">

 <script type="text/javascript">
 $(document).ready(function () {
 var $panels = $('#slider .scrollContainer > div');
 var $container = $('#slider .scrollContainer');
 var horizontal = true;
 if (horizontal) { 
  $panels.css({   
  'float' : 'left',   
  'position' : 'relative'
 });
 $container.css('width', $panels[0].offsetWidth * $panels.length);}
 var $scroll = $('#slider .scroll').css('overflow', 'hidden');
 $scroll 
  .before('<img class="scrollButtons left" src="images/button-left-rollover.gif" />') 
  .after('<img class="scrollButtons right" src="images/button-right-rollover.gif" />');
 function selectNav() { 
  $(this)   
   .parents('ul:first')     
   .find('a')       
   .removeClass('selected')     
   .end()   
  .end()   
  .addClass('selected');}
 $('#slider .navigation')
 .find('a')
 .click(selectNav);
 function trigger(data) { 
 var el = $('#slider .navigation')
 .find('a[href$="' + data.id + '"]').get(0); 
 selectNav.call(el);}
 if (window.location.hash) { 
  trigger({ id : window.location.hash.substr(1) });
 } else {  $('ul.navigation a:first').click();}
 var offset = parseInt((horizontal ?  
 $container.css('paddingTop') :   $container.css('paddingLeft'))   || 0) * -1;
 var scrollOptions = { 
 target: $scroll,
 items: $panels,   
 navigation: '.navigation a',
 prev: 'img.left',  
 next: 'img.right',
 axis: 'xy',  
 onAfter: trigger,
 offset: offset,
 duration: 700,
 easing: 'swing'};
 $('#slider').serialScroll(scrollOptions);
 $.localScroll(scrollOptions);
 scrollOptions.duration = 1;$.localScroll.hash(scrollOptions);
 
 });

 
 </script>

</HEAD>

<BODY>

 <div id="slider">
 
 <div class="scroll">  
  <div class="scrollContainer">
   <div class="panel" id="Home"><div class="img"><a href="http://icecube.co.th/vhcs2/tools/webmail/src/login.php"><img src="images/icbeta.jpg" border="0"></img></a></div></div>   
   <div class="panel" id="Service"><iframe src ="Service.html" width="100%" height="95%" frameborder="0" scrolling=auto></iframe></div>
   <div class="panel" id="Profile"><iframe src ="Profile.html" width="100%" height="95%" frameborder="0" scrolling=auto></iframe></div> 
   <div class="panel" id="Contact"><iframe src ="contact.html" width="100%" height="95%" frameborder="0" scrolling=auto></iframe></div>
   <div class="panel" id="Map"><iframe src ="Map.php" width="100%" height="95%" frameborder="0" scrolling=auto></iframe></div>
  </div> 
 </div>

  <ul class="navigation">   
   <li><a href="#Home" title="Home"><img src="images/home_icon.png" border="0">Home</img></a></li>   
   <li><a href="#Service" title="Service"><img src="images/serviceIcon.png" border="0">Service</img></a></li>   
   <li><a href="#Profile" title="Company Profile"><img src="images/company-icon.png" border="0">Profile</img></a></li>   
   <li><a href="#Contact" title="Contact Us"><img src="images/email-contact-icon.png" border="0">Contact</img></a></li>
   <li><a href="#Map" title="Map"><img src="images/map.png" border="0">Map</img></a></li>
  </ul>
 
 </div>

</BODY>
</HTML>

coda-slider.css
body {
 margin-top:0px;
    padding: 0;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: #FFFFFF;
}
#headers{
 width: 100%;
 height:120px;
 background: url(images/header.png);
 background-repeat:repeat-x;
 text-align:right;
 font-family: Arial;
   font-size: 8pt;
 
}

#headers img{
 margin-top: 20px;
 margin-right: 9px;
}

 #popupbox{
  margin:0px 100px 100px 800px;
  width: 20%;
  height: 130px; 
  position: absolute;
  background: #FBFBF0;
  border: solid #000000 1px;
  z-index: 9; /* Makes it on top of everything else */
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;;
  visibility: hidden;
  }

h2 {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
}

#slider {
    margin: 10px 1px 2px 180px;
    position: relative;
 padding:15px 0px 5px 25px;
 background-image: url(images/curve.png);
 background-repeat: no-repeat;
 height:630px;
}

.scroll {
    width: 850px;
    position: relative;
    background: #FFFFFF;
 border:1px solid #aaa;
}

.scrollContainer div.panel {
    padding: 1px 1px 1px 3px;
 position: relative;
    width: 850px;
 height: 550px;
 font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
 overflow:auto;
}


ul.navigation {
    list-style: none;
    margin: 0px 0px 0px 100px;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
    margin-right: 40px;
}

ul.navigation a {
    padding: 10px;
    color: #000;
    text-decoration: none;
}

ul.navigation a.selected {
    background-color: #ffffff;
 border:1px solid #aaa;
}

ul.navigation a:focus {
    outline: none;
}

ul.navigation a:hover {
    background-image:url(images/tab.jpg);
 background-repeat:repeat-x;
 /*background-color:#CCFFFF;*/
 border:1px solid #aaa;
 border-bottom:none;
}

.scrollButtons {
    position: absolute;
    top: 300px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -40px;
}

.scrollButtons.right {
    right: 120px;
}

.hide {
    display: none;
}

.img {
 margin: 120px 150px 100px 270px;
}

รบกวนช่วยดูให้ทีนะคะ ขอบคุณค่ะ

4 ความคิดเห็น

แสดงผลไม่เหมือนกัน ก็ผิดที่ CSS นั่นแหละครับ

ส่วนจะผิดตรงไหนเห็นทีจะตอบยาก เนื่องจากไม่เห็นภาพจริงๆ ว่าเป็นยังไง หรือผิดตรงไหน เนื่องจากมีหลายปัจจัยที่อาจทำให้การแสดงผลไม่เหมือนกันได้ ซึ่งอาจผิดตั้งแต่การกำหนด body เลยก็ได้

ลองใช้ firefox แล้วติดตั้ง firebug ดูครับ อาจช่วยแก้ปัญหาได้

ปล. ปัญหาอาจอยู่ที่การกำหนด CSS ให้สัมพันธ์กันกับ Javascript ด้วยครับ ต้องดูที่ข้อกำหนดของ Javascript เป็นกรณีไปครับ (ต้องดูด้วยว่าสุดท้ายแล้ว Javascrpt อาจจะเปลี่ยน CSS ไปเป็นแบบอื่นด้วยครับ)

1

ขอบคุณมากค่ะ
2

ขอบคุณครับผมก็ว่า นั่งแก้ css จนปวดหัวละครับ ส่วนมาก Firefox ไม่ค่อยมีปัญหา แต่ IE กับ Google Chome มีปัญหาครับ บาง Script ก็ไม่ขึ้น และยัง เพี้ยนไปหมด ขอบคุณครับ อิอิ
3

CSS ผมส่วนมากจะมี ปัญหากะ IE6 อ่ะครับ

นอกนั้นไม่ค่อยมี  
4
^