• fans
  • 1036 reader
  • followers

IE 6 là trình duyệt “bệnh” nhất trong các trình duyệt. Những ai đã từng làm web cũng luôn phải đau đầu vì trình duyệt này. Bởi vì nó được thiết kế không theo chuẩn web. Khi giao diện của bạn được hiển thị rất tốt ở các trình duyệt hiện đại như FireFox, Chrome, Safari … nhưng nếu thử trên IE 6 có khi bạn không nhận ra trang web của mình nữa. Trong video này chúng ta sẽ tìm hiểu những lỗi phổ biến nhất của IE 6 và cách khắc phục chúng


Trong bài này chúng ta sẽ xem xét những lỗi sau của IE 6 và cách khắc phục từng lỗi

  • Double Margin xảy ra khi mình đặt một thành phần float: left và đặt margin-left cho nó
  • Lỗi “bậc thang” xảy ra với list khi bạn cho nó float: left
  • Hack IE 6 để nó có hiệu ứng hover với tất cả các thành phần
  • Lỗi Transparent với PNG, xảy ra khi bạn sử dụng định dạng PNG. IE 6 sẽ hiển thị một màu mờ mờ thay vì trong suốt
  • Cách sử dụng conditional stylesheet
    • Thời lượng:33:24

      Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire

      File Size: 81.9MB

      File download trong video: iepngfix.htccsshover3.htc

      Mới cập nhật (8/4/10)

      Hack lỗi căn giữa trang web

      Bạn cũng biết là chúng ta có thể sử dụng CSS để căn giữa trang web với thuộc tính margin: 0 auto, nhưng IE 6 không hiểu được thuộc tính này và hậu quả là nó bị lệch sang trái. Cách sửa như sau:

      body {text-align: center;}
      #wrapper {text-align: left; width: 1000px; margin: 0 auto;}

      Ban đầu chúng ta dùng thuộc tính căn lề giữa cho toàn bộ trang cho thẻ body, IE 6 nó hiểu phần này và cho cả trang web ra giữa. Nhưng mọi thứ đều bị căn giữa hết kể cả chữ, cho nên chúng ta phải áp dụng lại thuộc tính text-align: left cho #wrapper

      Lỗi min-height trong IE 6

      Thuộc tính min-height trong CSS rất hữu dụng khi bạn cần đặt một độ cao tối thiểu cho một thẻ div chẳng hạn. Ví dụ bạn không muốn thẻ div nào đó có độ cao nhỏ nhất là 200px. Với trình duyệt thường thì không có vấn đề, nhưng với IE 6 nó không hiểu được thuộc tính này gây ra rất nhiều phiên toái. Cách sửa bạn có thể làm như sau:

      selector {
        min-height:200px;
        height:auto !important;
        height:200px;
      }

      Chẳng may chó ngáp phải ruồi hay sao mà IE 6 lại có thể hiểu được thuộc tính height: 200px như các trình duyệt hiện đại đọc thuộc tính min-height.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • học hỏi

    Anh Demon ơi
    Biết anh trở lại rồi em có cái hỏi anh đây

    Anh đã bao giờ dùng IÊ6, 7 mà gặp cái lỗi

    Ta borde left right: 1px solid #ccccc chẳng hạn
    Nhưng khi dùng IE cứ kéo thanh cuộn của trang web làm lấp cái box đi thì 2 bên cái border nó bị mất đi
    Thoát IE xuống task bar bật lên lại bình thường,
    Lăn thanh cuộn cái lại bị
    Chả hiểu thế nào

    Bác giúp em với

  • http://izwebz.com trần ngọc thiên

    àh! em có vấn đề này muốn hỏi tí:D

    với định dạng .png em cho nó background image – repeat thì FF sẽ repeat đúng width mà em yêu cầu nhưng với IE 6 thì nó trả lại là background image – no repeat, position top left.

    như vậy thì mình phải cắt một tấm hình lớn mà như vậy thì dung lượng hình ảnh nặng và khi thẻ div ấy có chữ dài quá hình background thì nó sẽ ko phủ kín nữa.

    Anh nào có thể chỉ dùm thằng em vô dụng này dc ko ạ:( cám ơn mấy anh nhiều

  • Trí

    anh Demon Warlock có cách nào fix lỗi IE 6 không hiểu child selector ko ạ chỉ giúp em với

  • http://comeco.vn lukas

    Hiện tại trang web của mình vẫn đang được khắc phục, vẫn chưa hết. Chẳng hạn như không hiểu sao khi chạy trên IE thì cái trang nó nằm hết về bên trái, trong khi thiết lập là nó nằm ở giữa màn hình. Không hiểu luôn, trong khi cái skin mình làm lúc view thì rất ok (nghĩa là mình thiết kế trước bố cục trang web là một file html rồi link với css thì khi view lên k có vấn đề gì, sau đó copy code html trogn body vào file .ascx rồi đặt các chức năng đúng vị trí theo thiết kế.)

  • http://comeco.vn lukas

    Cảm ơn clackken.smith rất nhiều! Chính vì cái vụ không tương thích của IE mà mình đã tìm đến được izwebz.com. Trang này rất hay, admin cũng rất nhiệt tình nữa, mình sẽ còn phải vào trang này học hỏi rất nhiều nữa từ các bạn, và đặc biệt là từ clackken.smith… Hôm bữa mình chưa coi được file của clackken.smith vì k truy cập được, giờ thì đừng xóa gì nhé, để mình coi. Thanks so much.

  • http://izwebz.com clackken.smith

    oh, nếu bạn đã giải quyết được vấn đề rồi thì hay quá, thực ra tôi cũng đã thực hiện cho bạn rồi, nhưng vì muốn giữ bí mật bản quyền cho bạn nên muốn bạn liên hệ với mình qua email rồi mình sẽ cho bạn thôi. Nếu bạn muốn tham khảo thì nhập như sau :
    User : thaihung
    Pass : bearshark
    . Nếu bạn đã giải quyết vấn đề cho http://comeco.vn xong rồi thì mình xóa những cái mình đã làm nhé, một phần mình muốn học hỏi, một phần cũng muốn giúp bạn thôi ^^.

  • http://www.izwebz.com Demon Warlock

    À! cái đó là Box model thôi. Tôi có bài viết rất chi tiết về nó trên izwebz rồi mà nhỉ.

    Có nhiều cách hack lỗi đó, nhưng đơn giản nhất vẫn là underscore hack cho margin và paddding.

  • http://comeco.vn lukas

    Hix! Sửa được rồi! Nguyên nhân chính phá vỡ giao diện web khi chạy trên IE của mình là sự khác nhau về thuộc tính “width” giữa IE và FF. Mình đã nghiên cứu kỹ bài này và đã rút kinh nghiệm, các bạn có thể tham khảo tại: http://forum.zoomdesign.org/showthread.php?t=434

  • http://comeco.vn lukas

    Đây là đoạn code giao diện của module TopHotNews:

    `__abENT__lt;div class=__abENT__quot;tophotnews_container__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;tophotnews_topContainer__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;tophotnews_imgSubjectContainer__abENT__quot;__abENT__gt;__abENT__lt;asp:Image ID=__abENT__quot;imgSubject__abENT__quot; runat=__abENT__quot;server__abENT__quot; CssClass=__abENT__quot;tophotnews_imgSubject__abENT__quot; Visible=__abENT__quot;False__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;p__abENT__gt;__abENT__lt;a id=__abENT__quot;lnkTopHotNewsTitle__abENT__quot; runat=__abENT__quot;server__abENT__quot;__abENT__gt;__abENT__lt;asp:Label ID=__abENT__quot;lblTopHotNewsTitle__abENT__quot; runat=__abENT__quot;server__abENT__quot; CssClass=__abENT__quot;tophotnews_title__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;asp:Label__abENT__gt;__abENT__lt;__abENT__#8260;a__abENT__gt;__abENT__lt;__abENT__#8260;p__abENT__gt;
    __abENT__lt;p class=__abENT__quot;tophotnews_excerpt__abENT__quot;__abENT__gt;__abENT__lt;asp:Label ID=__abENT__quot;lblTopHotNewsExcerpt__abENT__quot; runat=__abENT__quot;server__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;asp:Label__abENT__gt;__abENT__lt;__abENT__#8260;p__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;div class=__abENT__quot;tophotnews_othernewsContainer__abENT__quot;__abENT__gt;
    __abENT__lt;ul__abENT__gt;
    __abENT__lt;asp:Repeater ID=__abENT__quot;lstOtherTopHotNews__abENT__quot; runat=__abENT__quot;server__abENT__quot;__abENT__gt;
    __abENT__lt;ItemTemplate__abENT__gt;
    __abENT__lt;li__abENT__gt;[Hot news item 1]__abENT__lt;__abENT__#8260;li__abENT__gt;
    __abENT__lt;li__abENT__gt;[Hot news item 2]__abENT__lt;__abENT__#8260;li__abENT__gt;
    __abENT__lt;li__abENT__gt;[Hot news item 3]__abENT__lt;__abENT__#8260;li__abENT__gt;
    __abENT__lt;__abENT__#8260;ItemTemplate__abENT__gt;
    __abENT__lt;__abENT__#8260;asp:Repeater__abENT__gt;
    __abENT__lt;__abENT__#8260;ul__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    `

    và đây là code css cho module TopHotNews:

    `__abENT__#46;tophotnews_container{background:#FFFFD2;}
    __abENT__#46;tophotnews_topContainer{}
    __abENT__#46;tophotnews_imgSubjectContainer{margin-bottom:16px; max-width:400px; text-align:center; border:1px whitesmoke solid;}
    __abENT__#46;tophotnews_imgSubject{max-width:400px; }
    __abENT__#46;tophotnews_title{padding:16px 8px; font-size:18px; font-weight:bold; line-height:24px;}
    __abENT__#46;tophotnews_excerpt{padding:0px 8px; text-align:justify; font-weight:bold;}
    __abENT__#46;tophotnews_othernewsContainer{padding:8px 0px 8px 8px; border-top:3px #EA5E00 solid;}
    __abENT__#46;tophotnews_othernewsContainer li{padding-bottom:4px; list-style-image:url(__abENT__apos;images__abENT__#8260;dot__abENT__#46;gif__abENT__apos;)}
    __abENT__#46;tophotnews_othernewsTitle{font-size:12px; font-weight:bold;}
    `

  • http://comeco.vn lukas

    Chân thành cảm ơn bác Demon Warlock và Clackken.smith. Mình chưa vào được đường link mà clackken.smith gửi, trang yêu cầu user và password.

    Về phần thiết kế skin thì không vấn đề gì, view trên FF và IE đều ổn, các pane đều nằm đúng vị trí, nhưng khi thực thi trang web giao diện đã bị vỡ hoàn toàn thì mình đã biết nguyên nhân từ đâu. Thứ nhất là do cái menu chính, thứ 2 do module TopHotNews, thứ 3 là do một số module nằm trong RightPane. Mình xin chi tiết từng trường hợp như sau:

    + Cái menu chính: Không hiểu sao lại có một khoảng trống lớn phía sau RootItem cuối cùng.

    + Module TopHotNews: module này nằm ở góc trên bên trái của trang chủ (phía dưới module trình diễn flash). Trong phần thiết kế layout, mình đã fix chiều rộng cho pane này là 400px, khoảng cách (margin-right) với TopNewsPane là 4px. Nhưng không hiểu sao khi tấm hình đại diện có chiều rộng là 400px thì module này bị đẩy hết xuống phía dưới so với module TopNewsList. Mình đã căn chỉnh thì nếu chiều rộng ảnh là 386px thì mới không xảy ra hiện tượng trên khi view trên IE.

    + Một số module trong RightPane: nếu các bạn chạy trang web của mình (http://www.comeco.vn) trên IE sẽ thấy một số module trong RightPane bị dãn hết về phía bên phải trông rất kinh dị. Mình vị dụ trong module “Bảng giá nhiên liệu”, mình chỉ định chiều rộng của bảng là 100% thì bị hiện tượng trên, nếu fix một giá trị nhỏ hơn chiều rộng của RightPanel thì sẽ khắc phục được. Vậy chẳng lẽ trong IE6, nếu table có chiều rộng 100% thì dãn hết cỡ sao???

  • http://izwebz.com clackken.smith

    Quên mất còn cái RAR nữa, bạn có thể dựa theo đó để ráp lại giao diện của bạn. Phần footer bạn tự làm nhé, phần đó mình thấy đơn giản nên ko làm, chỉ là một cái anh thôi.

    link download : http://bearsharks.com/comeco/comeco.rar

  • http://izwebz.com clackken.smith

    Đây là code tôi đã làm lại từ hình ảnh chụp từ web của bạn.

    Demo : http://bearsharks.com/comeco/

  • http://www.izwebz.com Demon Warlock

    Tôi đã xem qua HTML của comeco thật tình tôi chóng mặt quá, bạn lạm dụng DIV thấy ghê cơ. Ngày xưa khi còn gà mờ CSS thật tình tôi cũng ko lạm dụng đến như thế he he

    Vấn đề này ko phải 1 sớm 1 chiều bạn đưa cái đoạn đó thì khắc phục được. Nếu bạn tin tưởng thì gửi cho tôi cái PSD của giao diện tôi sẽ cắt CSS cho bạn, sau đó bạn sẽ dùng nó để ráp code hoặc thêm bớt những chức năng mà bạn cần. Cách đó thì hay nhất nhưng cần độ tin tưởng cao. Bạn có thể suy nghĩ nếu được gửi mail cho tôi PSD : clackken.smith@gmail.com. Tôi sẽ hoàn thành sớm nhất có thể cho bạn.

  • http://comeco.vn lukas

    Mình post lại đoạn code html thiết kế cái container:

    `__abENT__lt;div class=__abENT__quot;container_03_border_title__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_border_tl__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_border_tr__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_border_topbg__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_borderleft__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_borderright__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_header__abENT__quot;__abENT__gt;[ACTION]]__abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_content__abENT__quot;__abENT__gt;[CONTENT]__abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_footer__abENT__quot;__abENT__gt;[FOOTER]__abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_border_bl__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_border_br__abENT__quot;__abENT__gt;
    __abENT__lt;div class=__abENT__quot;c03_border_bottombg__abENT__quot;__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    __abENT__lt;__abENT__#8260;div__abENT__gt;
    `

  • http://comeco.vn lukas

    Mình đang phát triển web cho công ty mình, chạy trên FF thì mọi thứ đều thể hiện đúng theo ý đồ thiết kế của mình, nhưng test trên IE6 thì trời ơi đất hỡi, anh em có thể vào web của mình coi thử giữa 2 trình duyệt xem (http://comeco.vn). Mình đang đau đầu tìm cách khắc phục đây. Sau đây mình ví dụ một đoạn css thiết kế cái container:

    [ACTION]]
    [CONTENT]
    [FOOTER]

    Code css:

    .c03_border_tl{margin:0px; padding:0px; background:url(images/01-bg-border-lt.jpg) no-repeat top left; height:9px;}
    .c03_border_tr{margin:0px; padding:0px; background:url(images/01-bg-border-rt.jpg) no-repeat top right; height:9px;}
    .c03_border_topbg{margin:0px 10px; _margin:0px 10px; padding:0px; background:url(images/01-bg-border-top.jpg) repeat-x top left; height:9px;}
    .c03_borderleft{margin:0px; padding:0px; background:url(images/bg-left-c.gif) repeat-y top left;}
    .c03_borderright{margin:0px; padding:0px; background:url(images/bg-right-c.gif) repeat-y top right;}
    .c03_border_bl{margin:0px; background:url(images/left-bottom.gif) no-repeat bottom left; height:5px;}
    .c03_border_br{margin:0px; padding:0px 4px 0px 4px; background:url(images/right-bottom.gif) no-repeat bottom right; height:5px;}
    .c03_border_bottombg{margin:0px; padding:0px; background:url(images/bg-bottom.gif) repeat-x bottom left; height:5px}

    .c03_header{margin:0px; padding:2px 8px; background-color:#E1E0CE; font-size:12px; font-weight:bold; color:maroon;}
    .c03_content{margin:0px; padding:8px;}
    .c03_footer{margin:0px; padding:2px 8px; text-align:right;}

    Kết quả thể hiện: trên FF thì rất ngon, còn trên IE6 thì thế này đây:
    [IMG]http://i877.photobucket.com/albums/ab338/anhdh209/container_IE6.jpg[/IMG]

    Mình đang rất cần sự hỗ trợ, góp ý từ các bạn. Chân thành cảm ơn rất nhiều!

  • muadem

    http://joomlaviet.org/forum/download/file.php?id=4004&mode=view

    CHo Em hỏi giao diện của Em bị lỗi như vậy thì sửa như nào Anh nhỉ??

    Em chạy trên FF thì rất OK nhưng sang IE8 thì lại bị lỗi này :((

  • haryduc

    Góp ý chút:
    Trường hợp fix PNG ở IE6 của DW, chỉ fix với ảnh PNG có kích thước bé thôi, nếu mà một PNG có size lớn vào IE6 load rất là lâu. đấy là cách khách phục vấn đề trên
    /*—–Fix IE 6——*/
    #content
    {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’Joomla/images/bg_contentcenter.png’);
    }
    /*–cái này dành cho các trình duyệt khác–*/
    #content[div] {
    background:url(images/bg_contentcenter.png) repeat-y;
    }

  • http://www.izwebz.com Demon Warlock

    Hiện tại trang web của em bị lỗi nên không thể truy cập được :(

  • http://www.queenwatch.com.vn Hoai

    Anh cho em hỏi về css trang http://www.queenwatch.com.vn nó bị lỗi gì mà không thể chạy đúng trong ie6 được, mặc dù trong firefox va ie7 trở lên chạy rất ok. Dưới đây là những gì có trong file css của em. Mong anh xem qua và cho em cách giải quyết. em cũng xin nói luôn là bên trái thì , ở giữa thì là , …
    Nội dung file css:
    @charset “utf-8″;
    body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color:#fdf2ae;
    }
    .main {
    background-image: url(images/backgroud.png);
    background-repeat: repeat-y;
    width: 835px;
    margin-top: 0px;
    height: 1470px;
    display: block;
    }
    .header {
    display: block;
    height: auto;
    width: 835px;
    }
    .banner {
    height: auto;
    width: 835px;
    }
    .dhtg{height:32;width:810px; vertical-align:top; background:url(images/thanhngang.png);}

    .menu {
    height: 50px;
    width: 819px;
    margin-left: 0px;
    background-color: #000;
    margin-right: 4px;
    }
    .txt1 {
    font-size: 16px;
    font-weight: bold;
    color: #ffee86;
    width: 145px;
    float: left;
    padding-left: 10px;
    margin-left: 5px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #7b6937;
    border-top-width: 1px;
    }
    .td {
    font-size: 13px;
    color: #fdf2ae;
    padding-left: 30px;
    border-bottom-width:1px;
    border-bottom-style: dashed;
    border-bottom-color: #7b6937;
    text-transform:uppercase;
    }

    .td a{
    background-color:#000;
    color:#cccccc;
    text-decoration:none;
    border-bottom-width:1px;
    border-bottom-style:dashed;
    border-bottom-color:#7b6937;
    text-transform:uppercase;
    font-weight: bold;
    }
    .td a:hover{
    background-color:#000;
    color:#fff;
    text-decoration:none;
    border-bottom-width:1px;
    border-bottom-style:dashed;
    border-bottom-color:#7b6937;
    font-weight: bold;
    }
    .glass {
    height: 30px;
    width: 80px;
    float: right;
    margin-top: 5px;
    }
    .menu1 {
    height: 50px;
    width: 720px;
    float: left;
    }

    .contents {
    width: 835px;
    height: auto;
    }
    .menu_left {
    background-image: url(images/trang%20intro1.png);
    background-repeat: repeat-y;
    width: 160px;
    border-top-width: 1px;
    border-top-color: #7b6937;
    float: left;
    border-top-style: solid;
    margin-left: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #7b6937;
    }
    .contents_middle {
    height: auto;
    width: 495px;
    background-color: #000000;
    background-repeat: repeat;
    border: 2px solid #d5d6d8;
    float: left;
    margin-right: auto;
    margin-left: auto;
    color:#ffff00;
    }
    .tr_ch {
    background-image: url(images/thanhngang.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 475px;
    padding-left: 20px;
    padding-top: 4px;
    clear: both;
    }

    .menu_right {
    background-image: url(images/trang%20intro2.png);
    background-repeat: repeat-y;
    width: 160px;
    float: left;
    margin-right: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #7b6937;
    border-bottom-color: #7b6937;
    }
    .clear{clear:both;}
    .txt_sub {
    font-size: 14px;
    font-weight: bold;
    color: #ffee86;
    }
    .box {
    height: 175px;
    width: 235px;
    margin-top: 2px;
    margin-left: 5px;
    }

    .left1 {
    height: auto;
    width: 160px;
    }
    .left1_1 {
    font-size: 14px;
    font-weight: bold;
    height: 25px;
    width: 150px;
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 7px;
    padding-left: 0px;
    background-image: url(images/thanh.png);
    background-repeat: no-repeat;
    padding-top: 5px;
    color: #ffee86;
    float: left;
    display: block;
    }

    .left1_2 {
    font-size: 12px;
    height: auto;
    width: 150px;
    float: left;
    margin-top: 2px;
    }
    .input {
    height: 15px;
    width: 120px;
    margin-left: 10px;
    }

    .footer {
    color:#FFFFFF;
    width: 800px;
    height: 70px;
    float: left;
    margin-top: 15px;
    margin-left: 10px;
    }
    .footer_txt {
    height: 50px;
    width: 500px;
    margin-left: 130px;
    margin-top: 20px;
    }
    .td2
    {
    padding-left:10px;font-size: 13px;color: #fff;font-weight: bold; padding-bottom:3px
    }
    .bg_thumb10 {
    background-image: url(images/bg_thumb_10.gif);
    height: 8px;
    }
    .bg_thumb5 {
    background-image: url(images/bg_thumb_05.gif);
    width: 8px;
    }

    .bb {

    }
    .left1_11 {
    font-size: 14px;
    font-weight: bold;
    height: 25px;
    width: 150px;
    margin-top: 0px;
    margin-right: 7px;
    margin-left: 5px;
    padding-left: 0px;
    background-image: url(images/thanh.png);
    background-repeat: no-repeat;
    padding-top: 5px;
    color: #ffee86;
    float: left;
    display: block;
    }
    .sp_frame {
    height: 165px;
    width: 125px;
    margin-left: 10px;
    }
    .color_link{
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    }
    .a { font-size:14px; color:#fff;text-decoration:none;}
    .a:hover{font-weight:bold;color:#fff;text-decoration:none;}
    .b {color:#cdcdcd;text-decoration:none;}
    .b:hover{font-weight:bold;color:#fff;text-decoration:none;}
    .c {display : block;
    font-weight : bold;
    border-bottom : 1px dotted #7b6937;
    background-color: #000;
    color: #dddddd;
    width: 125px;
    text-decoration: none;
    padding-left: 30px;
    font-size: 13px;
    text-transform:uppercase;}
    .c:hover{background-color: #fff;color:#000;text-decoration:none;border-bottom:1px dotted #7b6937;font-weight: bold;}

    Em xin cam on anh truoc.

  • http://hongnhungpham.blogspot.com/ Mina

    Anh cho em hỏi: khắc phục lỗi “last-child” trong IE6 thì làm thế nào ạ?
    Cảm ơn anh rất nhiều!

  • dat

    Rất hay. Mình nhất định phải xem hết trang web này :D

  • Trần Mạnh Tùng

    Mình xin góp ý với Demo Worlock một tí, Bạn cứ làm video thoải mái thời gian đi, vì khi những anh em nào đã vào web của bạn thì chắc chắn là những người đam mêm về web nên có xem thêm thời gian dài hay ngắn, (ngắn nhiều khi còn buồn vì bạn sẽ không nói hết những cái cần nói).

    Rất cám ơn bạn những video này, mình biết đựoc nhiều cái từ izwebz.com lắm.

  • http://www.izwebz.com Demon Warlock

    Anh vào mà chẳng thấy gì hết không biết có bị lỗi hay không. Click vào rồi mà chẳng thấy khác gì cả.

    Hơn nữa cái ví dụ trên khi em click vào nó cũng phóng to hình ra rồi còn gì? không lẽ khác nhau?

  • http://www.izwebz.com Demon Warlock

    Đây có bài hướng dẫn chi tiết về hiệu ứng zoom của em nè

    http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/

    • Học hỏi

      http://hyundaivinh.com.vn/
      các bác vào trang này xem
      chỗ sản phẩm chọn 1 cái xe bất kỳ
      có 1 cái hình thumbnail bên cạnh kích vào đó nó lớn lên bằng cái hình bên phái trái luôn
      em muốn hỏi cái đó kia
      có bác nào biết giúp em

  • Học hỏi

    em làm được sơ sơ rồi
    cho em hỏi thêm tí nữa
    Em lên web thấy có 1 số trang quảng cáo sản phẩm ví dụ ô tô chẳng hạn
    thấy là 1 cái ảnh oto giả sử em lick chuột vào hình đó thì khu vực đó trở thành cái ảnh phóng to lên bằng kích thước ảnh ban đầu.
    nghe nói họ làm bằng Javascrip
    vậy có bác nào có đoạn code trên up cho em với được ko các bác

  • NickB

    Àh, về cái phần này có nhiều thứ để nói, anh định làm cái video tutorial nhưng cái mic nó hư mấy :((.
    Em muốn kiểm tra trên Dreamweaver
    - Đầu tiên em mở file CSS lên
    - Trên Document bar chọn ấn vài check page sẽ xuất hiện cái tab ở dưới bao gồm rất nhiều thứ để kiểm tra
    -Để kiếm tra tính tương thích trình duyệt của code CSS em chọn tab Browser compatibility rồi ấn bút check compatibility (ở bên phải )
    Nó sẽ báo lỗi về tính tương thích ở 6 trình duyệt khác nhau vd như :

    Unsupported property: border-spacing

    Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2

    Em có thể thiết lập lại 6 mặc định để kiểm tra trong DW bằng cách vào Check page > Settings
    Anh nghĩ đây là tính năng rất hay của DW, mà chưa thấy soft nào có .
    Nhưng có một đặc điểm là nó không check đựoc selector .
    Cụ thể về việc check CSS chắc anh sẽ bàn với DW để làm 1 cái tutorial tổng hợp.
    Hy vọng với hướng dẫn của anh em làm dc.

  • Học hỏi

    kiểm tra tích tương thích của trình duyệt trong Dreamwaver chỗ nào vậy NickB ơi
    anh chỉ cho em đi

  • http://www.izwebz.com Demon Warlock

    yeah yeah! lỗi trong IE 6 nhiều như chấu hack không hết được :d đặc biệt là cái :last-child hack cũng vất vả lắm.

    Cảm ơn bác NickB về 2 đường link để download nhé. Có nói trong Video mà quên mất.

  • NickB

    Àh cung cấp cho các bạn 2 file iepngfix.htccsshover3.htc(tương tự như whateverhover nhưng là v3 có cả :active và :focus ) luôn

  • NickB

    Chà 1 tutorial khá hay !
    Tôi xin bổ sung 1 số ý về các bug của IE và các cách giải quyết .
    Thực thế ra IE 6 có khá nhiều lỗi và không tương thích với CSS, như không hổ trợ về min-height, outline … như DW đã nói.
    Ngay cả các selector cũng không hỗ trợ đầy đủ VD như :last-child, :before.. IE đều ko hiểu .
    Theo tôi cách tốt nhất để khắc phục tình trạng này là bạn cần biết dc rằng thuộc tính nào mà IE hổ trợ hoàn toàn , hổ trợ 1/2 hoặc không hổ trợ để có cách xử lý linh hoạt hơn.
    + Cách thứ 1 : với mỗi thành phần CSS bạn sử dụng cần tham khảo bảng tuơng thích trên W3C để kiểm soát .
    + Cách thứ 2 trong Dreamweaver có chức năng kiểm tra tích tương thích CSS của các trình duyệt, sau khi viết code bạn có thể sủ dụng chức năng này để kiểm tra

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives