CSS transform property is not working properly

Question

here is my HTML and CSS code for showing texts in two blocks in dl element I tried to change my ▶ symbol to a different shape using css transform scale property. But in some browser only show the triangle in first column ? Why it is like that ? also I tried webkit , moz prefix for rendering the code in all browser

Google Chrome old version

Google Chrome Latest Version

HTML

dl.textAdTitles {
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  list-style-position: inside;
  margin-left: 5px;
  margin-right: 20px;
}

dt {
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textAdTitles dt:before {
  font-family: Roboto,sans-serif;
  font-weight: bolder;
  font-size: 14px;
  width: 12px;
  height: auto;
  text-align: center;
  text-decoration: none;
  margin-right: 0px;
  vertical-align: top;
  display: inline-block;
  content: ' ▶ ';
  font-size: 10px;
  color: #000000;
  font-weight: bolder;
  transform: scale(0.5,1);
}

<table>
  <tr>
      <td>
           <dl class="textAdTitles">
                <dt height="10%" style="">
                    Sample text 1
                </dt>
                <dt height="10%" style="">
                    Sample text 2
                </dt>
                <dt height="10%" style="">
                    Sample text 3
                </dt>
                <dt height="10%" style="">
                    Sample text 4
                </dt>
                <dt height="10%" style="">
                    Sample text 5
                </dt>
           </dl>
      </td>
  </tr>
</table>

Mukesh Ram · Accepted Answer · 2017-03-06 10:16:07Z

1

It is working in chrome. Only problem is in class .dt you are using overflow:hidden. Just remove that and it works as expected.

Here is the final code:

dl.textAdTitles {
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  list-style-position: inside;
  margin-left: 5px;
  margin-right: 20px;
}

dt {
  line-height: 1.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textAdTitles dt:before {
  font-family: Roboto,sans-serif;
  font-weight: bolder;
  font-size: 14px;
  width: 12px;
  height: auto;
  text-align: center;
  text-decoration: none;
  margin-right: 0px;
  vertical-align: top;
  display: inline-block;
  content: ' ▶ ';
  font-size: 10px;
  color: #000000;
  font-weight: bolder;
  transform: scale(0.5,1);
}

<table>
  <tr>
      <td>
           <dl class="textAdTitles">
                <dt height="10%" style="">
                    Sample text 1
                </dt>
                <dt height="10%" style="">
                    Sample text 2
                </dt>
                <dt height="10%" style="">
                    Sample text 3
                </dt>
                <dt height="10%" style="">
                    Sample text 4
                </dt>
                <dt height="10%" style="">
                    Sample text 5
                </dt>
           </dl>
      </td>
  </tr>
</table>

edited Mar 6, 2017 at 10:16

Mukesh Ram

6,3684 gold badges21 silver badges37 bronze badges

answered Mar 6, 2017 at 10:15

shubham agrawal

3,5818 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vishnu Sadanandan Over a year ago

Which version of chrome that you are using . . Can you please run the code in latest chrome ??

shubham agrawal Over a year ago

I am running the latest version of chrome.What version are you running the code on?

Vishnu Sadanandan Over a year ago

Please go to this link for see how this works , and also now i am disabled the transform scale and enabled overflow hidden adserver.tistory.com

Vishnu Sadanandan Over a year ago

can you please add transform: scale(0.5,1); to the .textAdTitles dt:before element

Collectives™ on Stack Overflow

CSS transform property is not working properly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related