No replies
garata
garata's picture
Offline
newbie
Last seen: 4 years 9 weeks ago
Timezone: GMT+2
Joined: 2013-07-31
Posts: 3
Points: 5

Hi all CSS Creators users,

As you already know, every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. If I use "display:table" there are chances a whole set of display values the force non-table elements to behave like table-elements are at our disposal, but it sometimes allows you to be "more semantic" with your code while utilizing the unique positioning powers of tables. So put in this way what I am asking to the forum is: How could I take care of legacy MS Internet Explorer compatiblity in this case?

Here is my HTML code chunk:

<div id="uc-s1-h1" class="uc-hotspot-wrapper uc-hotspot-downarrow">
    <div class="uc-hotspot">
        <div class="uc-hotspot-cell">
            <a class="uc-hotspot-content" href="#">Leather Sofa</a>
        </div>
    </div>
</div>

And, here is my CSS code chunk as well:

.uc-hotspot {
  top: 0;
  left: 0;
  position: absolute;
  display: table;
  background-color: rgba(230, 145, 23, 0.8);
  height: 80px;
  width: 80px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
}
.uc-hotspot-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.uc-hotspot-content {
  outline: none;
  color: #fff;
  text-decoration: none;
  vertical-align: text-top;
  font-family: arial, sans-serif;
  font-weight: 700;
  font-size: 80%;
  *display: inline-block;
}
.uc-hotspot-wrapper:after {
  position: absolute;
  display: block;
  font-size: 20px;
  top: 75px;
  left: 30px;
  content: "▼";
  color: rgba(230, 145, 23, 0.9);
}

Is in this case, the conditional comments html tables tag trick placed within the page markup, a reasonable approach to solve these lagacy issues?

Thanks in advance for your help, best regards Giorgio Arata.