CODEWITHSUNDEEP
htmlcssinternet-explorer-8internet-explorer-7centering
testing
testing

Reputation: 20289

vertically center text beside input field in IE 7/ IE 8

Problem:

I want to vertically center the text on the left side of the input field. Also I want to center the calendar icon.

enter image description here

HTML:

<div id="dateselect">
    <div id="arrivalContainer">
        <span class="annotation">Anreise</span>
        <input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" />
    </div>
    <div id="departureContainer">
        <span class="annotation">Abreise</span>
        <input type="text" name="departure" id="departure" class="input-styling" maxlength="10" size="10" />
    </div>
    <div class="clearer"></div>
</div>

CSS:

#dateselect {
    padding-top: 14px;
}

#arrivalContainer {
    float: left;
    width: 160px;
}

#departureContainer {
    float: right;
    width: 160px;
}

#arrival {
    height: 25px;
    width: 68px;
}

#departure {
    height: 25px;
    width: 68px;
}

.ui-datepicker-trigger {
    position: relative;
    top: 7px;
    left: 3px;
}

.input-styling {
    color: #575756;
    font-family: "Myriad Roman", Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding-left: 4px;
}

Live example:
http://bfb.bplaced.net/

The span element should be display: inline-block; I think. I tried it with the line-height and the display: table-cell; approach. I get it work in all browsers except IE7 and IE8.

I know it is an often occuring problem but perhaps you could give me some advice.

Solution:

HTML:

I tried it with valign="middle" but IE8 had still problems. I ended up with this:

<div id="arrivalContainer">
    <div class="calendarText"><span class="annotation">Anreise</span></div>
    <div class="calendarInput"><input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" /></div>
    <div class="clearer"></div>
</div>

CSS:

.calendarText {
    float:left;
    padding-top:14px;
    padding-right:5px;
}

.calendarInput {
    float: left;
}

For all IE version I have conditional stylesheets.

Upvotes: 0

Views: 2679

Answers (3)

Mark
Mark

Reputation: 6864

try this:

annotation {
 position:realtive;
 top: -5px; /*adjust to value that visually centers your text*/
}

for you calendar do the same.

Upvotes: 0

jas7457
jas7457

Reputation: 1991

Try vertical-align:middle; for both your image and your text divs.

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13354

This should vertically center the text, by forcing it to display at 25px tall (same as your input field). Line-height then vertically centers the line at 25px tall, too.

.annotation {
    display: inline-block;
    zoom: 1;
    *display: inline;
    height: 27px; /* +2px for border */
    line-height: 27px;
}

Upvotes: 0

Related Questions