چرا توی IE۶ و IE۷ این کد HTML درست نمایش داده نمیشه؟

۰

چرا توی IE۶ و IE۷ این کد HTML درست نمایش داده نمیشه؟(چرا عکس پایین میفته )

کد رو توی این آدرس http://pastehtml.com/view/۱cu۰۴۳k.html ببینید یا همین جا :

<!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd">
<html xmlns="http://www.w۳.org/۱99۹/xhtml" dir="rtl">
<head><title>test</title>
<style type="text/css">
/********************** Reset CSS ************************/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 200۸۰2۱۲ */

html, body, div, span, applet, object, iframe,
h۱, h۲, h۳, h۴, h۵, h۶, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: ۰;
 padding: ۰;
 border: ۰;
 outline: ۰;
 font-size: ۱0۰%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: ۱;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: ۰;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="۰"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: ۰;
}
/*********************Main CSS***************************/
/***********************Option Panel***********************/
.OptionPanel {
 clear: right;
 /*float: right;*/
 zoom:۱;
}
.OptionPanelContextGroup {
 float: right;
 clear: right;
 zoom:۱;
}
.OptionPanelContext {
 float: right;
 clear: right;
 zoom:۱;
}
.OptionPanelContextButton {
 clear:right;
 float:right;
 zoom:۱;
}
.OptionPanelPictureGroup {
 text-align: center;
 float: left;
 zoom:۱;
}
.OptionPanelBigPicture {
 width: ۴0۰px;
 height: ۳0۰px;
 /*clear: both;*/
 margin-top: ۱px;
 margin-bottom: ۳px;
 margin-left: ۵px;
 margin-right: ۵px;
 zoom:۱;
}
.OptionPanelSmallPictureGroup {
 zoom:۱;
}
.OptionPanelSmallPicture {
 width: 1۳۱px;
 height: ۹۸px;
 margin-left: ۲px;
 margin-right: ۲px;
 margin-bottom: ۳px;
 zoom:۱;
}
.OptionPanelLeftSlideShow {
 direction: ltr;
 float: right;
 zoom:۱;
}
.OptionPanelDownSlideShow {
 direction: ltr;
 clear: both;
 float: right;
 zoom:۱;
}
/*****************************Others*************************/
.display-label {
 float: right;
 width: ۱۵۰px;
 clear: right;
 height:۲۰px;
}
.display-field {
 width:۲۳۰px;
 float: right;
 height:۲۰px;
}
.InfoBox {
 zoom:۱;
 margin-left:۵px;
 margin-bottom:۱۰px;
 padding: ۱۰px;
 /*clear: both;*/
 border: ۱px solid #FFFFFF;
 background-image: url(../img/template/infobg.png);
    -moz-border-radius: ۵px;
 float: right;
 /*opacity: ۰.۸۵;
    background-color: Black;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=۸۵)";
    filter: alpha(opacity=۸۵);*/
}
</style>
</head>
<body>
<div class="InfoBox" id="PersonalInfoDIV">
    <div class="OptionPanel">
        <div class="OptionPanelContextGroup">
            <div class="OptionPanelContext">
                <h۳>text</h۳>
                <hr />
                <label class="display-label">text</label>
                <label id="teamname" class="display-field">a</label><br />
                <label class="display-label">text</label>
                <label id="drivernumber" class="display-field">b</label><br />
                <label class="display-label">text</label>
                <label id="carnumber" class="display-field">c</label><br />
                <label class="display-label">text</label>
                <label id="matchnumber" class="display-field">d</label><br />
                <label class="display-label">text</label>
                <label id="winnumber" class="display-field">e</label><br />
                <label class="display-label">text</label>
                <label id="loosenumber" class="display-field">f</label><br />
                <label class="display-label">text</label>
                <label id="profileuserscore" class="display-field">g</label>
                <div class="OptionPanelContextButton">
                        <button type="button" onclick="ShowSendMessageDialog()">text</button>
                </div>       
            </div>
         <div class="OptionPanelPictureGroup" > 
             <div class="OptionPanelSmallPictureGroup">
              <img class="OptionPanelSmallPicture" id="userphoto" src="۱.jpg" alt="pic۲" />
             </div>
         </div>


            <div class="OptionPanelContext">
             <hr />
                <h۳>text</h۳>
                <hr />
                <label class="display-label">text</label>
                <label id="sponsername" class="display-field">h</label><br />
                <label class="display-label">text</label>
                <label id="sponserslogen" class="display-field">i</label> <br />    
            </div>
            <div class="OptionPanelPictureGroup" >           
             <div class="OptionPanelSmallPictureGroup">
              <img class="OptionPanelSmallPicture" id="sponserphoto" src="۲.jpg" alt="pic۱" />
             </div>
         </div>

        </div>
    </div>
</div>
</body>
</html>
دوست عزیز از این موارد زیاد هست مثلا در این دو ورژن فاوایکون وبسایت هم نشون داده نمیشه…. - muiacir - ۱۴:۵۶ - ۱۳۸۹/۱۰/۲۷
انصراف

۱  پاسخ

۲

همیشه، همیشه وقتی داری float می کنی حتما باید width تعریف کنی. (وقتی دو تا المان قراره در یه راستا قرار بگیرن و یکیش پایین تر از اونجایی که مورد نظرته قرار می گیره، همیشه جمع عرض اون دو تا المان به علاوه paddingها و marginهاش از فضای موجود parentشون بیشتره)

بعد این کد خیلی کثیف ه در کل. یه مقدار جمع و جورتر هم می شه اینی که مد نظرته رو درست کنی

ویرایش: هر جا به اینصورت بود حذف و هر جا به اینصورت بود اضافه کن.

پ.ن: چقدر کار کردن با این ادیتوره سخته!! چرا راستی style قبول نمی کنه؟

<!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd">
<html xmlns="http://www.w۳.org/۱99۹/xhtml" dir="rtl">
<head><title>test</title>
<style type="text/css">
/********************** Reset CSS ************************/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 200۸۰2۱۲ */

html, body, div, span, applet, object, iframe,
h۱, h۲, h۳, h۴, h۵, h۶, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: ۰;
 padding: ۰;
 border: ۰;
 outline: ۰;
 font-size: ۱0۰%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: ۱;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: ۰;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="۰"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: ۰;
}
/*********************Main CSS***************************/
/***********************Option Panel***********************/
.OptionPanel {
 clear: right;
 float: right;
 zoom:۱;
}
.OptionPanelContextGroup {
 float: right;
 clear: right;
 zoom:۱;
}
.OptionPanelContext {
 float: right;
 clear: right;
width:AAApx;
 zoom:۱;
}
.OptionPanelContextButton {
 clear:right;
 float:right;
 zoom:۱;
}
.OptionPanelPictureGroup {
 text-align: center;
 float: left;
 zoom:۱;
}
.OptionPanelBigPicture {
 width: ۴0۰px;
 height: ۳0۰px;
clear: both;
 margin-top: ۱px;
 margin-bottom: ۳px;
 margin-left: ۵px;
 margin-right: ۵px;
 zoom:۱;
}
.OptionPanelSmallPictureGroup {
width:AAApx;
float:left;
 zoom:۱;
}
.OptionPanelSmallPicture {
 width: 1۳۱px;
 height: ۹۸px;
 margin-left: ۲px;
 margin-right: ۲px;
 margin-bottom: ۳px;
 zoom:۱;
}
.OptionPanelLeftSlideShow {
 direction: ltr;
 float: right;
 zoom:۱;
}
.OptionPanelDownSlideShow {
 direction: ltr;
 clear: both;
 float: right;
 zoom:۱;
}
/*****************************Others*************************/
.display-label {
 float: right;
 width: ۱۵۰px;
 clear: right;
 height:۲۰px;
}
.display-field {
 width:۲۳۰px;
 float: right;
 height:۲۰px;
}
.InfoBox {
 zoom:۱;
 margin-left:۵px;
 margin-bottom:۱۰px;
 padding: ۱۰px;
clear: both;
width:AAApx;
 border: ۱px solid #FFFFFF;
 background-image: url(../img/template/infobg.png);
    -moz-border-radius: ۵px;
 float: right;
 /*opacity: ۰.۸۵;
    background-color: Black;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=۸۵)";
    filter: alpha(opacity=۸۵);*/
}
</style>
</head>
<body>
    <div class="InfoBox" id="PersonalInfoDIV">
        <div class="OptionPanel">
            <div class="OptionPanelContextGroup">
                <div class="OptionPanelContext">
                    <h۳>text</h۳>
                    <hr />
                    <label class="display-label">text</label>
                    <label id="teamname" class="display-field">a</label><br />
                    <label class="display-label">text</label>
                    <label id="drivernumber" class="display-field">b</label><br />
                    <label class="display-label">text</label>
                    <label id="carnumber" class="display-field">c</label><br />
                    <label class="display-label">text</label>
                    <label id="matchnumber" class="display-field">d</label><br />
                    <label class="display-label">text</label>
                    <label id="winnumber" class="display-field">e</label><br />
                    <label class="display-label">text</label>
                    <label id="loosenumber" class="display-field">f</label><br />
                    <label class="display-label">text</label>
                    <label id="profileuserscore" class="display-field">g</label>
                    <div class="OptionPanelContextButton">
                        <button type="button" onclick="ShowSendMessageDialog()">text</button>
                    </div>       
                </div>
                <div class="OptionPanelPictureGroup" > 
                    <div class="OptionPanelSmallPictureGroup">
                        <img class="OptionPanelSmallPicture" src="۲.jpd" id="userphoto" alt="pic۲" />
                    </div>
                </div>
                <br style="clear:both;" />
            </div>
            <div class="OptionPanelContextGroup">
                <div class="OptionPanelContext">
                    <hr />
                    <h۳>text</h۳>
                    <hr />
                    <label class="display-label">text</label>
                    <label id="sponsername" class="display-field">h</label><br />
                    <label class="display-label">text</label>
                    <label id="sponserslogen" class="display-field">i</label> <br />    
                </div>
                <div class="OptionPanelPictureGroup" >           
                    <div class="OptionPanelSmallPictureGroup">
                        <img class="OptionPanelSmallPicture" src="۱.jpg" id="sponserphoto" alt="pic۱" />
                    </div>
                </div>
                <br style="clear:both;" />
            </div>
        </div>
        <br style="clear:both;" />
    </div>
</body>
</html>
کدی رو که گذاشتین رو تست کردم توی IE۷ و IE۶ عکس ها زیر نوشته میوفتن و مثل Firefox و IE۸ نمایش داده نمیشن.به هر حال ممنون که زحمت کشیدین. - farahd2161 - ۰۳:۱۳ - ۱۳۸۹/۱۰/۲۸
آقادستت درست ردیف شد ولی اگه وقت داری میخوام پروژه اصلی رو بهت نشون بدم پروژه شاخیه برای خودش اگه امکانش هست ایمیل بده یا با من در ارتباط باش (چت یا ایمیل)از طریق farhad۲1۶۱ [-at-] yahoo.com - farahd2161 - ۰۵:۴۱ - ۱۳۸۹/۱۰/۲۸
انصراف
انصراف