Forums
View unanswered posts | View active topics It is currently Tue Dec 12, 2017 7:45 pm



Reply to topic  [ 1 post ] 
 pseudo class :after ie8 bug 
Author Message

Joined: Wed Sep 14, 2011 9:27 am
Posts: 1
Post pseudo class :after ie8 bug
Hi

i try to understand a issue that happen whit ie8 (ie7 not support the pseudo :after and ie9 and ie10 works well)
when i try to add to a char (">") to an input element ie at the first impact renderize well the the char but when i move the mouse the char disappear or change the position or the color, why? maybe i make something wrong whit PIE?
anybody can help me...

this is the code generate using compass

Code:
.button {
    color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    padding: 5px;
    outline: medium none;
    cursor: pointer;
    display: inline-block;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    @include box-shadow(0 1px 3px rgba(0,0,0,0.5));
    @include border-radius(4px);
    .no-borderradius &,.no-boxshadow &{
     @include pie-element(relative);
    }
    @include background(linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.13) 20%) 0 0% no-repeat #000000);
     -pie-background: linear-gradient(#ffffff, #000000 20%) 0 0% no-repeat #000000;
     .ie9 &{
       background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5NTkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIG9mZnNldD0iMC4yIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzk1OSkiIC8+Cjwvc3ZnPg==);
     }
     border: 2px solid #414040;
     background-color: #000000;
    &:hover{
      @include background(linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%) 98% 50% no-repeat #414040);
      -pie-background: linear-gradient(#A6A5A5, #555454 50%, #414040 100%) 98% 50% no-repeat #414040;
      .ie9 &{
         background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc0MjgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNBNkE1QTUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1NTU0NTQiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzQxNDA0MCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzQyOCkiIC8+Cjwvc3ZnPg==);
      }
     
    }
   
    &.small{
       font-size:9px;
     }
   
    &.arrow{
     &:after{
      content:"›";
      font-size:20px;
      border:0px;
      background-color:transparent;
      color:#ffffff;
      float:right;
      display: inline-block;
      vertical-align:top;
      padding:0;
      margin-top:-1px;
      padding-left:4px;
      &.small:after{
       font-size:9px;
      }
     }
    }}


Wed Sep 14, 2011 9:35 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Bing [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.