Probleem: Verschil tussen browsers

[RienkK]

Hallo Tweakers,

Normaal als ik vragen had ging ik altijd naar stack overflow, voor de verandering ga ik is een vraag stellen bij tweakers .

Twee zaken op mijn website worden anders weergeven op verschillende browsers ondanks dat ik een 'stylesheet' reset heb.

Ik kan zelf niet vinden waarom het op een andere browser er anders uitziet aangezien het hier niet over lastige codes gaat, het gaat over: margin-top, height, & padding bottom.

[Het gaat hier om de extra (groene) pixel rij aan de onderkant bij het hoveren over home]

Weergave op Edge/Firefox/Ie (Juist)


Weergave op Chrome (Onjuist)


Het gaat hier om de hoogte van de hamburger lijnen en het verschil tussen hoogte bij de hamburger lijnen.

Weergave op Firefox / Chrome (Juist)


Weergave op IE (Onjuist)


Weergave op Edge (Onjuist)


Codes van 'hover over Home':

Html:

<ul class="navigatie">

<li><a href="">Home</a></li>

</ul>

Css:

.navigatie {
color: white;
}

.navigatie li {
float: left;
padding: 28px 0px 33px 0px;
}

.navigatie li:hover {
background: green;
color: black;
transition: 600ms;
}

.navigatie a {
padding: 28px 20px 32px 20px;
}

Codes van de hamburger:

Html:

<div class="hamburger_wrapper">

<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>

</div>

Css

.hamburger_wrapper {
display: none;
position: absolute;
top: 20px;
left: 10px;
}

.hamburger {
width: 26px;
height: 3px;
background: white;
margin-top: 5px;
}

Codes die ik gebruik om mijn stylesheet te resetten:
html body { margin: 0px; padding: 0px; border: 0px; }
a { margin: 0px; padding: 0px; border: 0px; }
li { list-style-type: none; margin: 0px; padding: 0px;}
textarea:focus, input:focus { outline: 0; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; color: #fff !important; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0;}
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea { margin: 0; padding: 0; text-decoration: none; color: inherit;}
blockquote { margin: 1.25em; padding: 1.25em }
q { font-style: italic; }
acronym, abbr { cursor: help; border-bottom: 1px dashed; }
img { border: none; }
table { margin: 0; padding: 0; border: none; }
form { margin: 0; padding: 0; display: inline; }
label { cursor: pointer; }
textarea, input { outline: none; font-family: inherit; font-size: inherit; color:inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

[ Voor 18% gewijzigd door RienkK op 31-07-2015 20:20 ]

[DJMaze]

En hoe zien deze er uit?
http://codepen.io/chriscoyier/pen/fzsqm

[RienkK]

@DJMaze

Deze zien er wel gewoon normaal uit

[johnkeates]

Ik zou gewoon allebei inspecten, CSS properties exporteren en een diff doen. Weet je precies waar het verschil zit.

[RienkK]

johnkeates schreef op vrijdag 31 juli 2015 @ 22:10:
Ik zou gewoon allebei inspecten, CSS properties exporteren en een diff doen. Weet je precies waar het verschil zit.

Wat bedoel je met 'een diff doen' ?

Edit:
Het heeft te maken met de zoom, als je meer ingezoomd bent op een webpagina dan wordt deze niet juist weergeven, meer uitgezoomd zijn resulteert er in dat het juist weergeven wordt. Nu is dit bij verschillende browsers automatisch 'anders'.

Weet iemand een oplossing om te voorkomen dat bij verschillende zoom instellingen die toch de zelfde output geeft?

[ Voor 40% gewijzigd door RienkK op 31-07-2015 22:32 ]

[TERW_DAN]

RienkK schreef op vrijdag 31 juli 2015 @ 22:16:
Weet iemand een oplossing om te voorkomen dat bij verschillende zoom instellingen die toch de zelfde output geeft?

Ik denk dat je daar geen pixel-perfect manier voor gaat vinden.
Stel je hebt 125 pixels, een zoomlevel van 170%, dan krijg je 212,5 pixels. Dat kun je afronden naar 212 of naar 213. Als niet alle browsers dat op dezelfde manier doen, dan ontkom je er bijna niet aan dat je wel eens pixelverschuivingen gaat zien.

Misschien als je dingen procentueel in de CSS zet (al vermoed ik dat je daar gewoon weer hetzelfde probleem tegen zult komen.

[johnkeates]

Gebruik em's ipv. percentages of pixels.

En diff zou je als developer toch moeten weten of zelf moeten kunnen opzoeken

[RienkK]

johnkeates schreef op vrijdag 31 juli 2015 @ 23:27:
Gebruik em's ipv. percentages of pixels.

En diff zou je als developer toch moeten weten of zelf moeten kunnen opzoeken

Ik ben geen 'echte' developer, ik maak websites voor mijn eigen plezier .

Ik weet nu wat een diff is maar had eerst het idee dat het een soort afkorting was voor iets anders wat je bedoelde.

[sypie]

diff=verschil. Oftewel: kijk waar de verschillen zitten in de code. Daar waar verschillen zitten in de code zal vast ook een deel van je oplossing liggen. Het schijnt dat er ook code-editors zijn die verschillen kunnen aangeven, hoewel ik deze zelf niet ken, daarvoor script ik te weinig en is het maatwerk wat ik doe.

[RienkK]

Voor mensen die dit in de toekomst lezen:

Oplossing was:

Voor extra pixelrij bij hover geswitch van 77 PX naar EM
Voor hamburger menu gebruik ik nu pseudo elementen ipv 3 verschillende divs.

Dank voor de hulp allemaal!