Problemen met verschillende browsers

Door George van Baasbank op 05-09-2014 17:19

2.303 views

Hallo allemaal,

Voor mijn website heb ik de volgende css3-code gebruikt:


#uitverocht {
   display: inline-block;
   font-family: "TitilliumWebBold", Sans serif;
   font-weight: bolder;
   text-align: center;
   color: whitesmoke;
   background-color: #CC071E;
   text-transform: uppercase;
   font-size: 14px;

   -webkit-transform: skew(-20deg) rotate(-20deg) translatez(0);
   -moz-transform: skew(-20deg) rotate(-20deg) translatez(0);
   -o-transform: skew(-20deg) rotate(-20deg) translatez(0);
   -ms-transform: skew(-20deg) rotate(-20deg) translatez(0);
   transform: skew(-20deg) rotate(-20deg) translatez(0);
   position: absolute;
   top: 200px;
   z-index: 5;
   white-space: nowrap;
   border-top: solid 1px #CC071E;
   border-bottom: solid 1px #CC071E;
   line-height: 30px;
   margin-left: 0px;
   margin-right: 30px;
   padding-left: 50px;
   padding-right: 41px;
}

Deze code plaatst een banner op het scherm onder een bepaalde hoek. Als ik het scherm bekijk via Google Chrome dan ziet dat er gelikt uit.

Bekijk ik de pagina met Safari (Apple) dan lijnt de banner ineens niet meer goed uit.

Terwijl ik toch in mijn css3-code de verschillende browsersinstellingen heb meegegeven.
Wie weet een oplossing of aanvulling?

George

Ward van der Put

05-09-2014 18:03

Voeg eens border-collapse: collapse toe?

Frank Conijn

07-09-2014 23:11 gewijzigd op 08-09-2014 04:57

Dat lijkt me te liggen aan de grotere 'horizontale' ruimte die UITVERKOCHT inneemt in Safari, doordat die de letters dikker maakt, i.c.m. de L- en R-padding. Probeer het eerst even met het weghalen van die paddings, want met text-align:center heb je die niet nodig.

Ook zou ik font-weight: bold i.p.v. font-weight: bolder doen, voor een zo gelijk mogelijke weergave.

Verder lijk je nog een paar overbodige declaraties te hebben:


white-space: nowrap;
border-top: solid 1px #CC071E;
border-bottom: solid 1px #CC071E;

Er is ruimte genoeg, dus wrappen zal de tekst niet. En als je de line-height met 2px vergroot, heb je de borders ook niet nodig.

George van Baasbank

08-09-2014 09:37

Ward,

De collapse geeft geen effect. Ik ga nu de oplossing van Frank uitproberen

Eddy E

08-09-2014 13:42

Leuke class-aanduiding: uitverocht.
Sluit goed aan bij 'uitverkocht'.

Gekopieerd of verkeerd overgetypt?

George van Baasbank

08-09-2014 16:37 gewijzigd op 08-09-2014 16:38

Frank,

De paddings (links en rechts) heb ik nodig om een rood vlak naast de tekst te krijgen. (Getest met en zonder paddings)
De white-space kon inderdaad vervallen
En de borders (top en bottom) konden ook weg

Frank Conijn

08-09-2014 19:44

George,

Je hebt gelijk, want het is een inline-block, geen block. Probeer hem echter even een breedte te geven, dan heb je nog steeds de L- en R-padding niet nodig. En dan blijft de oplossing voor je probleem het eenvoudigst.

Reageren

Inloggen om te reageren