2011-01-17 4 views
0

Warum Bilder in IE6 ~ 7 in diesem HTML-Code gehen?Warum Bilder in IE6 ~ 7 in diesem HTML-Code gehen?

Ansicht Code online unter: http://pastehtml.com/view/1cu043k.html

oder hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> 
<head><title>test</title> 
<style type="text/css"> 
/********************** Reset CSS ************************/ 
/* http://meyerweb.com/eric/tools/css/reset/ */ 
/* v1.0 | 20080212 */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, 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: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 
} 
body { 
line-height: 1; 
} 
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: 0; 
} 

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

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
/*********************Main CSS***************************/ 
/***********************Option Panel***********************/ 
.OptionPanel { 
clear: right; 
/*float: right;*/ 
zoom:1; 
} 
.OptionPanelContextGroup { 
float: right; 
clear: right; 
zoom:1; 
} 
.OptionPanelContext { 
float: right; 
clear: right; 
zoom:1; 
} 
.OptionPanelContextButton { 
clear:right; 
float:right; 
zoom:1; 
} 
.OptionPanelPictureGroup { 
text-align: center; 
float: left; 
zoom:1; 
} 
.OptionPanelBigPicture { 
width: 400px; 
height: 300px; 
/*clear: both;*/ 
margin-top: 1px; 
margin-bottom: 3px; 
margin-left: 5px; 
margin-right: 5px; 
zoom:1; 
} 
.OptionPanelSmallPictureGroup { 
zoom:1; 
} 
.OptionPanelSmallPicture { 
width: 131px; 
height: 98px; 
margin-left: 2px; 
margin-right: 2px; 
margin-bottom: 3px; 
zoom:1; 
} 
.OptionPanelLeftSlideShow { 
direction: ltr; 
float: right; 
zoom:1; 
} 
.OptionPanelDownSlideShow { 
direction: ltr; 
clear: both; 
float: right; 
zoom:1; 
} 
/*****************************Others*************************/ 
.display-label { 
float: right; 
width: 150px; 
clear: right; 
height:20px; 
} 
.display-field { 
width:230px; 
float: right; 
height:20px; 
} 
.InfoBox { 
zoom:1; 
margin-left:5px; 
margin-bottom:10px; 
padding: 10px; 
/*clear: both;*/ 
border: 1px solid #FFFFFF; 
background-image: url(../img/template/infobg.png); 
    -moz-border-radius: 5px; 
float: right; 
/*opacity: 0.85; 
    background-color: Black; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
    filter: alpha(opacity=85);*/ 
} 
</style> 
</head> 
<body> 
<div class="InfoBox" id="PersonalInfoDIV"> 
    <div class="OptionPanel"> 
     <div class="OptionPanelContextGroup"> 
      <div class="OptionPanelContext"> 
       <h3>text</h3> 
       <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="1.jpg" alt="pic2" /> 
      </div> 
     </div> 


      <div class="OptionPanelContext"> 
      <hr /> 
       <h3>text</h3> 
       <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="2.jpg" alt="pic1" /> 
      </div> 
     </div> 

     </div> 
    </div> 
</div> 
</body> 
</html> 
+0

Sie überprüft haben, dass Sie fallen nicht in Quirks-Modus trotz der Doctype? Das kann eine Reihe von IE6/7 Seltsamkeit verursachen. – Spudley

+0

i geprüft beide und nach http : //webdesign.about.com/cs/doctype/a/aaquirksmode.htm aber das Problem bleibt bestehen – farhad2161

Antwort

0

bemerkte ich auf Chrome, IE und FF diese Bilder an verschiedenen Positionen zu haben. Sie verwenden auch Label-Tags. Verwenden Sie ein Formular-Tag?

Dies könnte ein guter Anfang sein, http://jsfiddle.net/AuFgK/1/