부라우져에 따라 다른게 나오는데 어떻게 정보
부라우져에 따라 다른게 나오는데 어떻게본문
익스에서만 작업하다 크롬으로 확인해보니 난리입니다.
크롬에서 원하는대로 나오면 익스에서 다르게 나오고
익스에서 원하는대로 하면 크롬에다르르게 나오고 골치내요
웹표준좀 공부해둘꺼..
익스에서는 화살표버튼 끝나고 여백이 생기고요.
그리고 텍스트를 가운데로 나옥 하려면 어떻게 해야 하나요.
<style type="text/css">
#rollD_r {
width:584px;
overflow:hidden;
clear: left;
height: 22px;
}
#rollD {
clear:both;
width:420
.px;
overflow:hidden;
width: 585px;
border: 1px solid #CCC;
background-color: #EBEBEB;
}
#rollD ul{list-style-type:none; padding:0; margin:0;}
#rollD ul li {
float:left;
height:20px;
text-align:center;
overflow:hidden;
font-size:12px;
font-family:"돋움";
color:#999;
line-height:21px;
border-right:1px solid #e4e4e4;
}
#rollD ul li#li01 {
background-color:#fff;
width:510px;
text-align:left;
}
#rollD ul li#pageShow {
width:30px;
}
#rollD ul li#li02 {
width:20px;
cursor:pointer;
color: #FFF;
background-color: #736357;
}
#rollD ul li#li03 {
width:20px;
cursor:pointer;
background-color: #736357;
color: #FFF;
}
#rollD ul li a{
color:#777; text-decoration:none;
}
#rollD ul li a:hover{
color:#39c;
}
#rollD ul li img{
border:0;
}
#rollD ul li span{
vertical-align: top;
height: 20px;
}
.dsBlock {display:block;}
.dsNone {display:none;}
#rollD_r #rollD ul #li01 #date_time {
float: right;
}
</style>
<div id="rollD_r">
<div id="rollD">
<ul>
<li id="li01">
<?
$j = '1';
while($auc_data=mysql_fetch_array($auc_result)) {
$auc_no = $auc_data[wr_id];
$auc_data[wr_subject] = trim(strip_tags(stripslashes($auc_data[wr_subject])));
$auc_subject=cut_str($auc_data[wr_subject], 80, '');
$date = date("y-m.d", strtotime($auc_data['wr_datetime']));
?><span id="rollTextMenu<?=$j?>" class="dsBlock"><img src="<?=$latest_skin_path?>/img/notice_title.gif" width="101" height="20" /> <?=$date?> I <a href="<?=$g4[url]?>/<?=$g4[bbs]?>/board.php?bo_table=<?=$aj_bdid?>&wr_id=<?=$auc_no?>"><?=$auc_subject?></a></span>
<?
$j++;
}// end while
?></li>
<li id="pageShow">1/<?=$aj_con?></li>
<li id="li02" onMouseOver="this.style.backgroundColor='#b40b02'" onMouseOut="this.style.backgroundColor='#736357'" onClick="rollText(-1);" title="이전"><</li>
<li id="li03" onMouseOver="this.style.backgroundColor='#b40b02'" onMouseOut="this.style.backgroundColor='#736357'" onClick="rollText(1);" title="다음">></li>
</ul>
</div>
</div>
<script type="text/javascript" language="JavaScript">
//<![CDATA]
var rollText_k=<?=$aj_con?>; // total
var rollText_i=1; // start
var rollTime = 7000; // roll time
rollText_tt=setInterval("rollText(1)", rollTime);
function rollText(a){
clearInterval(rollText_tt);
rollText_tt=setInterval("rollText(1)", rollTime);
rollText_i+=a;
if (rollText_i>rollText_k){rollText_i=1;}
if (rollText_i==0){rollText_i=rollText_k;}
for (var j=1; j<=rollText_k; j++){
document.getElementById("rollTextMenu"+j).style.display="none";
}
document.getElementById("rollTextMenu"+rollText_i).style.display="block";
document.getElementById("pageShow").innerHTML = rollText_i+"/"+rollText_k;
}
//]]>
</script>
크롬에서 원하는대로 나오면 익스에서 다르게 나오고
익스에서 원하는대로 하면 크롬에다르르게 나오고 골치내요
웹표준좀 공부해둘꺼..
익스에서는 화살표버튼 끝나고 여백이 생기고요.
그리고 텍스트를 가운데로 나옥 하려면 어떻게 해야 하나요.
<style type="text/css">
#rollD_r {
width:584px;
overflow:hidden;
clear: left;
height: 22px;
}
#rollD {
clear:both;
width:420
.px;
overflow:hidden;
width: 585px;
border: 1px solid #CCC;
background-color: #EBEBEB;
}
#rollD ul{list-style-type:none; padding:0; margin:0;}
#rollD ul li {
float:left;
height:20px;
text-align:center;
overflow:hidden;
font-size:12px;
font-family:"돋움";
color:#999;
line-height:21px;
border-right:1px solid #e4e4e4;
}
#rollD ul li#li01 {
background-color:#fff;
width:510px;
text-align:left;
}
#rollD ul li#pageShow {
width:30px;
}
#rollD ul li#li02 {
width:20px;
cursor:pointer;
color: #FFF;
background-color: #736357;
}
#rollD ul li#li03 {
width:20px;
cursor:pointer;
background-color: #736357;
color: #FFF;
}
#rollD ul li a{
color:#777; text-decoration:none;
}
#rollD ul li a:hover{
color:#39c;
}
#rollD ul li img{
border:0;
}
#rollD ul li span{
vertical-align: top;
height: 20px;
}
.dsBlock {display:block;}
.dsNone {display:none;}
#rollD_r #rollD ul #li01 #date_time {
float: right;
}
</style>
<div id="rollD_r">
<div id="rollD">
<ul>
<li id="li01">
<?
$j = '1';
while($auc_data=mysql_fetch_array($auc_result)) {
$auc_no = $auc_data[wr_id];
$auc_data[wr_subject] = trim(strip_tags(stripslashes($auc_data[wr_subject])));
$auc_subject=cut_str($auc_data[wr_subject], 80, '');
$date = date("y-m.d", strtotime($auc_data['wr_datetime']));
?><span id="rollTextMenu<?=$j?>" class="dsBlock"><img src="<?=$latest_skin_path?>/img/notice_title.gif" width="101" height="20" /> <?=$date?> I <a href="<?=$g4[url]?>/<?=$g4[bbs]?>/board.php?bo_table=<?=$aj_bdid?>&wr_id=<?=$auc_no?>"><?=$auc_subject?></a></span>
<?
$j++;
}// end while
?></li>
<li id="pageShow">1/<?=$aj_con?></li>
<li id="li02" onMouseOver="this.style.backgroundColor='#b40b02'" onMouseOut="this.style.backgroundColor='#736357'" onClick="rollText(-1);" title="이전"><</li>
<li id="li03" onMouseOver="this.style.backgroundColor='#b40b02'" onMouseOut="this.style.backgroundColor='#736357'" onClick="rollText(1);" title="다음">></li>
</ul>
</div>
</div>
<script type="text/javascript" language="JavaScript">
//<![CDATA]
var rollText_k=<?=$aj_con?>; // total
var rollText_i=1; // start
var rollTime = 7000; // roll time
rollText_tt=setInterval("rollText(1)", rollTime);
function rollText(a){
clearInterval(rollText_tt);
rollText_tt=setInterval("rollText(1)", rollTime);
rollText_i+=a;
if (rollText_i>rollText_k){rollText_i=1;}
if (rollText_i==0){rollText_i=rollText_k;}
for (var j=1; j<=rollText_k; j++){
document.getElementById("rollTextMenu"+j).style.display="none";
}
document.getElementById("rollTextMenu"+rollText_i).style.display="block";
document.getElementById("pageShow").innerHTML = rollText_i+"/"+rollText_k;
}
//]]>
</script>
댓글 전체
dtd선언을 하셨는지 했다는 가정하에
#rollD ul li span, #rollD ul li span img, #rollD ul li span a{
vertical-align:middle; height:20px;}를 넣어보세요
그리고 #rollD {
clear:both;
width:420
.px; .이 하나 더 찍혔네요
#rollD ul li span, #rollD ul li span img, #rollD ul li span a{
vertical-align:middle; height:20px;}를 넣어보세요
그리고 #rollD {
clear:both;
width:420
.px; .이 하나 더 찍혔네요