Problemen met verschillende browsers

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

05/09/2014 17:19:42
Quote Anchor link
Hallo allemaal,

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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#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.
Afbeelding

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

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


George
 
PHP hulp

PHP hulp

28/03/2024 13:19:35
 
Ward van der Put
Moderator

Ward van der Put

05/09/2014 18:03:51
Quote Anchor link
Voeg eens border-collapse: collapse toe?
 
Frank Conijn

Frank Conijn

07/09/2014 23:11:12
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
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.
Gewijzigd op 08/09/2014 04:57:55 door Frank Conijn
 
George van Baasbank

George van Baasbank

08/09/2014 09:37:26
Quote Anchor link
Ward,

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

Eddy E

08/09/2014 13:42:58
Quote Anchor link
Leuke class-aanduiding: uitverocht.
Sluit goed aan bij 'uitverkocht'.

Gekopieerd of verkeerd overgetypt?
 
George van Baasbank

George van Baasbank

08/09/2014 16:37:36
Quote Anchor link
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
Gewijzigd op 08/09/2014 16:38:06 door George van Baasbank
 
Frank Conijn

Frank Conijn

08/09/2014 19:44:57
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.