Problemen met verschillende browsers
Voor mijn website heb ik de volgende css3-code gebruikt:
Code (php)
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
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;
}
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
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)
1
2
3
2
3
white-space: nowrap;
border-top: solid 1px #CC071E;
border-bottom: solid 1px #CC071E;
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
De collapse geeft geen effect. Ik ga nu de oplossing van Frank uitproberen
Sluit goed aan bij 'uitverkocht'.
Gekopieerd of verkeerd overgetypt?
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
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.