10/10/2018, 09:44

Lỗi FF và IE không hiển thị giống nhau

Mình có đoạn web sau dùng CSS. (xem file ZIP đính kèm)

Code:

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<div class="prod_box">
              <div class="top_prod_box"></div>
            <div class="center_prod_box">
                <div class="product_title"><a href="details.html">Quả t&aacute;o</a></div>
              <div class="product_img"><a href="details.html"><a href="details.html"><img src="images/apple.jpg" alt="" border="0" /></a></a></div>
              <div class="prod_price"><span class="price">5 $</span></div>
  </div>
            <div class="bottom_prod_box"></div>
            <div class="prod_details_tab"> <a href="http://www.free-css.com/" title="header=[Add to cart] body=[&nbsp;] fade=[on]"><img src="images/cart.gif" alt="" border="0" class="left_bt" /></a><a href="details.html" class="prod_details">Chi tiết</a> </div>
</div>

Tuy nhiên khi hiển thị trong Firefox thì ok, nhưng trong IE-6 thì bị lỗi không đúng vị trí.
Xem hình đính kèm (bên trái là OK, bên phải là lỗi)

Xin hỏi sửa ra sao để IE hiển thị đúng giống như FF?

Thanks.

-------------------
Chức năng upload file của ddth bị lỗi, nên mình up file ở link sau: (24 KB)
http://www.mediafire.com/?sharekey=1...4e75f6e8ebb871
Thanks.

Scripted viết 11:49 ngày 10/10/2018

Cái này lý do là CSS của bạn, bạn fải lam cái cái style.css

Mình thấy mấy cái code như là: á hoặc   nếu không cần thiết đừng dùng tới ... mỗi browser sẽ ra khác nhau!

Target_Locked viết 11:54 ngày 10/10/2018

Vậy phải sửa CSS ra sao nhỉ?
Đây là nội dung file style.css

Code:

body
{
background:url(images/bg.jpg) no-repeat #fff center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
color:#000;
}
p{
padding:2px;
margin:0px;
}
#main_container{
width:1000px;
height:auto;
margin:auto;
padding:0px;
}
.top_bar{
width:1000px;
height:38px;
background-color:#4a4a4a;
}
#header{
width:1000px;
height:173px;
background:url(images/header_bg.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
}
#logo{
float:left;
padding:15px;
}



#main_content{
clear:both;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width:1000px;
height:50px;
background-color:#fff;
}
.left_menu_corner{
width:9px;
height:50px;
float:left;
background:url(images/menu_left.gif) no-repeat center;
}
.right_menu_corner{
width:9px;
height:50px;
float:left;
background:url(images/menu_right.gif) no-repeat center;
}
ul.menu {
list-style-type:none; float:left; display:block; width:982px; 
margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;}

ul.menu li {
display:inline;
font-size:11px;
font-weight:bold;
line-height:50px;
}
ul.menu li.divider {
display:inline;
width:2px;
height:50px;
float:left;
background:url(images/menu_divider.gif) no-repeat center;
}


span.current{
color:#0fa0dd;
}

.border_box{
width:194px;
height:auto;
text-align:center;
border:1px #6da6b1 solid;
}
.product_title{
color:#ea2222;
padding:5px 0 5px 0;
font-weight:bold;
}
.product_title a{
text-decoration:none;
color:#ea2222;
padding:5px 0 5px 0;
font-weight:bold;
}
.product_title a:hover{
color:#064E5A;
}
.product_img{
padding:5px 0 5px 0;
}
.prod_price{
padding:5px 0 5px 0;
}
span.reduce{
color:#999999;
text-decoration:line-through;
}
span.price{
color:#ea2222;
}

/*center content--------------------------*/
.center_content{
width:585px;
float:left;
padding:5px 10px;
}
.center_title_bar{
width:520px;
height:33px;
float:left;
padding:0 0 0 40px;
margin:0 0 0 12px;
_margin:0 0 0 6px;
line-height:33px;
font-size:12px;
color:#847676;
font-weight:bold;
background:url(images/bar_bg.gif) no-repeat center;
}

/*---------prod_box----------*/
.prod_box{
width:173px;
height:auto;
float:left;
padding:10px 10px 10px 11px;
}
.top_prod_box{
width:173px;height:12px;background:url(images/product_box_top.gif) no-repeat center bottom;float:left; padding:0px; margin:0px;
}
.bottom_prod_box{
width:173px;height:10px;background:url(images/product_box_bottom.gif) no-repeat center top;float:left;padding:0px; margin:0px;
}
.center_prod_box{
width:173px;height: auto;background:url(images/product_box_center.gif) repeat-y;float:left; text-align:center;padding:0px; margin:0px;
}
.prod_details_tab{
width:173px;
height:31px;
float:left;
background:url(images/products_details_bg.gif) no-repeat center;
margin:3px 0 0 0;
}
img.left_bt{
float:left;
padding:6px 0 0 6px;
}
a.prod_details{
	width:50px;
	display:block;
	float:left;
	background:url(images/square-blue-add.gif) no-repeat left;
	_margin:6px 0 0 35px;
	text-decoration:none;
	color:#0fa0dd;
	margin-top: 7px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 70px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 20px;
}

chip saker viết 11:50 ngày 10/10/2018

thêm cái
*{
margin:0;
padding:0}
để reset CSS nhé

Target_Locked viết 11:49 ngày 10/10/2018

Được gửi bởi chip saker

thêm cái
*{
margin:0;
padding:0}
để reset CSS nhé

Mình thử thêm vào đầu hay cuối file css đều không có tác dụng gì cả.

ngoc_viet08 viết 11:54 ngày 10/10/2018

là do cái css bác làm tùm lum nên nó bị lỗi .
bác thử thay 2 cái css cuối thành thế này xem .

img.left_bt{
float:left;
margin-top: 7px;
margin-left:5px;
}
a.prod_details{
float:left;
background:url(images/square-blue-add.gif) no-repeat left;
text-decoration:none;
color:#0fa0dd;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 80px;
padding-left:20px;
}

duykhuong-it viết 11:49 ngày 10/10/2018

nếu không sửa cũng không sao, dù sao thì cái IE6 nó dịch CSS yếu lắm

Target_Locked viết 11:54 ngày 10/10/2018

Được gửi bởi ngoc_viet08

là do cái css bác làm tùm lum nên nó bị lỗi .
bác thử thay 2 cái css cuối thành thế này xem .

tuyệt vời !
Thanks bạn nhiều.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Target_Locked

0 chủ đề