Vertical alignment of elements overlapping in IE

Question

I have this form I am building that renders perfectly in Chrome and FF, but in IE, is completely mis-aligned.

What it should look like:

Image: alt text

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;
}

As requested, this is what it looks like in IE: alt text

What do you see in IE? Are all versions of IE doing it wrong? — Babak Naffas
Do you have a jsbin or something online to test?, in which version of IE do you need to have this fixed? — Jesus Lugo
Seems worth mentioning that hr should not have a closing tag - it's a self-terminating element. — Tieson T.

Dominic Tancredi Dominic Tancredi · Accepted Answer · 2011-01-08T00:09:50

Ok in reviewing:

1) it looks like you're using "hr" tags for the border...when you don't need to. Instead, wrap your entire "portlet-content" and the "imageUploadLogo" content with a class (i.e. "uploadContainer" that has a "border-bottom: 1px solid #CECECE; clear: both; display block; padding: 0 0 20px 0; margin: 0 0 20px 0; width: 100%;)

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

The padding and margin are for spacing. You can then remove the "hr" tags.

So your new container would be:

<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) There's no need for #logo_uploada to have a "position: absolute". Instead, set "display: block;" and then margin + padding for position.

3) It looks like you have an extra "/div"-tag for those two containers... should be wrapped in something, right? #1 that I posted should be a solid div container for you to use.

All your divs should probably be reset to use "display: block" if you're using a css-reset.

Hope that helps! Try those styles and ping back how it goes.

Vertical alignment of elements overlapping in IE

1 Answers