css แสดงบน firefox
เกี่ยวกับการรัน 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;
}
รบกวนช่วยดูให้ทีนะคะ ขอบคุณค่ะ
ส่วนจะผิดตรงไหนเห็นทีจะตอบยาก เนื่องจากไม่เห็นภาพจริงๆ ว่าเป็นยังไง หรือผิดตรงไหน เนื่องจากมีหลายปัจจัยที่อาจทำให้การแสดงผลไม่เหมือนกันได้ ซึ่งอาจผิดตั้งแต่การกำหนด body เลยก็ได้
ลองใช้ firefox แล้วติดตั้ง firebug ดูครับ อาจช่วยแก้ปัญหาได้
ปล. ปัญหาอาจอยู่ที่การกำหนด CSS ให้สัมพันธ์กันกับ Javascript ด้วยครับ ต้องดูที่ข้อกำหนดของ Javascript เป็นกรณีไปครับ (ต้องดูด้วยว่าสุดท้ายแล้ว Javascrpt อาจจะเปลี่ยน CSS ไปเป็นแบบอื่นด้วยครับ)
นอกนั้นไม่ค่อยมี