Search code examples
htmlcssinternet-explorerinternet-explorer-8

IE8 div alignment issue

Looking for some assistance with a layout issue in IE8. Full disclosure, I'm more of a backend developer, my CSS & HTML skills are a bit rusty so there's a good chance that the code I've put together is just plain bad or/or wrong :)

I have a series of divs which contain a hyperlink. The hyperlink contains two divs, to provide styling to the text inside the hyperlink. The problem I'm seeing is that in Chrome, FF and IE > 8, the text inside this hyperlink looks fine, but in IE 8, the vertical alignment for the text inside the hyperlink is off, it appears somewhat lower than it should. I've pretty much exhausted my limited HTML/CSS skills trying to get this right so I'm hoping someone has a suggestion as to what I need to do to get this thing looking correct in IE8.

HTML:

<div class="report-description-container report-description-container-left">
  <div class="report-title">
      <img src="1x1_transparent.png" class="arrow"/>
      Report Name
  </div>
  <div class="report-description">
      [Description goes here]
      <div class="report-generate-button-container">
        <a href="/Report/DataExtract"><div class="report-link">Start my&nbsp;</div><div   class="report-link-black">Report now</div></a>
      </div>
  </div>
</div>

CSS:

.report-description {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    height: auto;
    padding: 10px;
    font-size: 12px;
}

.report-generate-button-container {
    margin-top: 30px;
    font-size: 16px;
    background-image: url("sprite.png");
    background-repeat: no-repeat;
    background-position: 0px -80px;
    height: 40px;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.report-link {
    display: inline-block;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    padding-left: 25px;
    padding-top: 13px;
}

.report-link-black {
    display: inline-block;
    text-decoration: none;
    color: #1e90ff;
    font-weight: bold;
    padding-top: 13px;
}

.report-description-container {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    height: 200px;
    display: inline-table;
    width: 456px;
    margin-bottom: 10px;
    border: 1px solid;
    border-color: #000000;
    background-color: #eaeaea;
    -webkit-box-shadow: 3px 3px 5px #888888;
    box-shadow: 3px 3px 5px #888888;
}

.report-description-container-left {
    margin-right: 20px;
}

img.arrow {
    width: 32px;
    height: 32px;
    background: url("1x1_transparent.png") 0 0;
}

And finally, a couple of screenshots:

What the page looks like in Chrome, IE10, FF, etc...

Screenshot

What the page looks like in IE8...

Screenshot

Solution

  • I don't know that whether or not this helps but, There are two points here:

    1) To get it to work on IE8, you need to declare a DOCTYPE at first, whether an HTML5 version <!DOCTYPE html> or an XHTML1.0 one, like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    In addition, to make sure that IE8 is NOT running on Compatibility View, it's better to use following meta in the <head> section:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    2) IE8 does not support background-size property. But there is a possible fix, if you don't use a sprite image:

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";