CODEWITHSUNDEEP
htmlcssgoogle-chrome
RobVious
RobVious

Reputation: 12915

Icon does not align well with text in Chrome

I'm trying to get the bottom of an icon to line up with some text (to the pixel - the lowest pixel of the first S should be at the same height as the lowest pixel of the foler icon) across browsers, but Chrome is always giving me different results.

Fiddle:

http://jsfiddle.net/LrhB7/1/

HTML: 

<div class="study-box set-box">
    <div class="set-box-title"> 
        <i class="icon-folder-close-alt">
        </i>
        <div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
    </div>
</div>

CSS:

.study-box {
    width: 200px;
    height: 120px;
    margin: 2px;
    float: left;
    color: white;
    text-align: center;
    font-size: 15px;
    position: relative; }

.folder-box-title > div, .set-box-title > div {
    -ms-text-overflow: ellipsis !important;
    -o-text-overflow: ellipsis !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow-x: hidden;
    display: inline-block;
    text-align: justify;
    width: 162px !important;
    padding-bottom: 0px;
    margin-bottom: 0px;
    line-height: 20px;
    position: relative; }

.set-box-title {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 10px;
    padding-bottom: 7px; }

Upvotes: 0

Views: 390

Answers (1)

Spencer
Spencer

Reputation: 642

This should be what you're looking for: http://jsfiddle.net/W3WW7/1/

<div class="study-box set-box">
    <div class="set-box-title"> 
        <i class="icon icon-folder-close-alt">
        </i>
        <div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
    </div>
</div>

Changed:

.folder-box-title > div, .set-box-title > div {
    -ms-text-overflow: ellipsis !important;
    -o-text-overflow: ellipsis !important;
    text-overflow: ellipsis !important;
    white-space:nowrap;
    overflow-x:hidden;
    display: inline-block;
    text-align: justify;
    width: 162px !important;
    padding-bottom: 0px;
    margin-bottom: 0px;
    line-height: 20px;
    position: relative;
    top: 2px; // changed this line
}

Added:

.icon {
    vertical-align: text-bottom;
}

Upvotes: 1

Related Questions