CSS-Hilfe benötigt, um das Problem in IE zu beheben

Question

Ok ich hasse IE. Aber dann hasse ich die Tatsache, dass meine CSS ist nicht das, was es sein sollte, also habe ich diese Form, die ich tue, und die CSS in Chrom und ff macht perfekt, aber in ie, Schrauben.

Image:

HTML:

<!--image upload bit--> 
         <div class="portlet-content"> 
         <div class="logoInfo"> 
         <h3><strong>Large Logo</strong></h3> 
         <p>Width: 160px, Height: 20px | image will be resized automatically</p> 
         </div> 
        <div class="imageUploadLogo noLogo"><img id="agencyLogo" src="images/logo_silhouette.png" width="170px" height="32px"></div> 
        <a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a> 
       </div> 
       <div class="clearfix"></div> 
        <hr></hr> 
        <!--//image upload bit--> 
        <!--office upload bit--> 
         <div class="portlet-content"> 
         <div class="logoInfo"> 
         <h3><strong>Office Image</strong></h3> 
         <p>Width: 160px, Height: 120px | image will be resized automatically</p> 
         </div> 
        <div class="imageUploadPhoto noPhoto"><img id="agencyLogo" src="images/office_silhouette.png" width="160px" height="120px"></div> 
        <a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a> 
        <div class="extraInfo"> 
        <h3><strong>Photo of your office</strong></h3> 
        <p>Image must be actual photograph of your office</p> 
        </div> 
       </div> 
       <div class="clearfix"></div> 
        <hr></hr> 
        <!--//office upload bit--> 
        <h3><strong>Office Description</strong> limited to 1000 characters (no HTML tags)</h3> 
         <div class="field2"><label for="description">Office Description</label> <textarea class="resizable" id="officeDesc" rows="7" cols="50" name="description"></textarea> 
         </div> 
          <div class="clearfix"></div> 

CSS:

 
/*agency profile stuff*/ 

.noLogo { 
    border: 2px dashed #4f8a10; 
} 
.noPhoto { 
    border: 2px dashed #4f8a10; 
} 
.imageUploadLogo { 
    background-color: #fff; 
    border: 2px dashed #CECECE; 
    float: left; 
    margin: 0 15px 0 0; 
    padding: 20px 0; 
    text-align: center; 
    width: 190px; 
} 
.imageUploadPhoto { 
    background-color: #fff; 
    border: 2px dashed #CECECE; 
    float: left; 
    margin: 0 15px 0 0; 
    padding: 20px 0; 
    text-align: center; 
    width: 190px; 
} 
#logo_uploada 
{ 
    position:absolute; 
    left:300px; 
    top:46px; 
    width:180px; 
    background: #999999; 
    font-size: 26px; 
    font-weight: bold; 
    text-align: center; 
    color: #FFF; 
    padding-top: 10px;padding-bottom: 10px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    margin-bottom: 0.4em; 
    margin-top: 0.4em; 
} 
#logo_uploada a:visited, 
#logo_uploada a:link{ 
color: #fff; 
} 

#logo_uploada:hover { 
background-color: #3399ff; 
cursor:pointer; 
} 
.logoInfo { 
position:absolute; 
left:300px; 
top:5px; 
} 
.extraInfo { 
position:absolute; 
left:300px; 
top:110px; 
} 

Wie gewünscht Bild in IE

Answer 1

Ok in reviewing:

1) es sieht aus wie Sie "hr" -Tags für den Rand verwenden ... wenn Sie nicht müssen. Umhüllen Sie stattdessen Ihren gesamten "portlet-content" und den "imageUploadLogo" Inhalt mit einer Klasse (zB "uploadContainer" mit einem "border-bottom: 1px solid #CECECE; clear: beide; display block; padding: 0 0 20px 0 ; margin: 0 0 20px 0; Breite:.. 100%;)

.uploadContainer { border-bottom: 1px solid #CECECE; clear: both; display block; padding: 0 0 20px 0; margin: 0 0 20px 0; width: 100%; } 

Die Polsterung und Marge für Abstand sind Sie können die "hr" Tags entfernen Sie dann

werden, so würde Ihr neuer Container:

<div class="uploadContainer"> 
       <div class="portlet-content"> 
        <div class="logoInfo"> 
        <h3><strong>Office Image</strong></h3> 
        <p>Width: 160px, Height: 120px | image will be resized automatically</p> 
        </div> 
       <div class="imageUploadPhoto noPhoto"><img id="agencyLogo" src="images/office_silhouette.png" width="160px" height="120px"></div> 
       <a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a> 
       <div class="extraInfo"> 
       <h3><strong>Photo of your office</strong></h3> 
       <p>Image must be actual photograph of your office</p> 
       </div> 
</div> 

2) Es gibt keine Notwendigkeit für #logo_uploada, eine "position: absolute". Stattdessen setzen „display: bloc k; "und dann Rand + Padding für die Position.

3) Es sieht so aus, als hättest du ein extra "/ div" -Tag für diese zwei Container ... sollte etwas eingepackt sein, oder? # 1, die ich gepostet habe, sollte ein solider div Container sein für Sie zu verwenden.

Alle Ihre divs sollten wahrscheinlich zurückgesetzt werden, um "display: block" zu verwenden, wenn Sie eine css-reset verwenden.

Hoffe, dass hilft! Versuchen Sie diese Stile und pingen Sie zurück, wie es geht.