ie8 en margin

[Baljuin]

Nu heb ik wel een echte vraag

Ik heb op een pagina een div met een vaste hoogte en breedte en een padding van 28px. Daarbinnen heb ik 4 a containers (inline-block) naast elkaar laten floaten die ook allemaal een vaste hoogte en breedte hebben. De eerste drie hebben een margin van 20 pixels. De laatste heeft een :last-child en voor oude browsers een extra .last class met margin-right:0. De website ziet er overal prima uit. De blokken staan allemaal keurig naast elkaar in ie6, ie7 en ie9. Maar ie8 vindt het nodig om het laatste blok eronder te zetten.
Daar baal ik van, want ie8 wordt best nog veel gebruikt. Wat gaat er hier mis?

Dit is overigens de pagina: http://royromviel.nl/proef/

Wie o wie heeft er een oplossing?

 

[csshunter]

Hoi Baljuin,
Ik heb geen "Argenta" font op mijn kast staan, en bij mij geeft IE7 dit niet weer. In plaats ervan komt een veel te groot default-font. Volgens Netrenderer doet IE8 hetzelfde; IE9 geeft wel de goede Argenta.

Maar dit is het niet: als ik het letterformaat aanpas, blijft IE8 het laatste blokje er onder zetten.
Wat wel helpt:

• de rechter-padding uit de .slider-nav halen,
• en die padding bij de breedte optellen; daarmee zit de inhoud er niet zo krap in.

.slider-nav {
	...
/*	width: 924px; */
	width: 952px;
/*	padding-right: 28px; */
	padding-right: 0;
}

• Test: idtz-nw.htm
• Volgens Netrenderer werkt het zo in alle IE-versies; en de rest heeft er geen last van.

En als het goed is, zou je ook de .slider-nav a:last-child resp de .last met een aangepaste margin-right van 0px niet meer nodig hebben: met een margin-right van 20px zou dit er bij een beschikbare breedte van 28px zeker op moeten passen. Ook al pikt IE8 daar 1 of 2 pixeltjes van af.

Met vriendelijke groet,
CSShunter
___________
PS: Ik vind de "I" van het Argenta-font veel te veel op een "J" lijken:

Ik lees hier "Jetje" en geen "Ietje".
Misschien toch een standaard-font gebruiken? Of anders een image? Dan ben je meteen van alle gedoe met de lettergrootte af (het gaat nu ook mis als de bezoeker inzoomt met Extra Groot letterformaat).

 

[Baljuin]

Dag CSShunter,

Bedankt voor je pluiswerk. Ik snap het. padding-right was de boosdoener. Bedankt.

En @font-face doet het zeker niet in ie8 en ie7? Dan zoek ik daar wel een andere oplossing voor. een plaatje of zo. En wat betreft die J/I kwestie. Je hebt helemaal gelijk. Ik zal de vormgever eens vragen voor een alternatief.


Bedankt voor je hulp!

Met vriendelijke groet,
Roy

 

[csshunter]

Hoi Roy,
Je hebt in je css staan:

@font-face {
    font-family: 'Argenta';
    src: src: url('fonts/Argenta.eot');
    src: local('Argenta'), 
          url('fonts/Argenta.otf') format("opentype"), 
          url('fonts/Argenta.ttf') format('truetype'),
          url('fonts/Argenta.svg#font') format('svg'); 
}

Bij de eot-regel (voor IE) staat er twee keer "src:", 1 keer lijkt me genoeg.

Maar in principe zou de eot het moeten doen.
Op deze testpagina schoolbord-lettertype-AtFontFace.htm heb ik een iets andere css (met een "#iefix" erbij, geen idee hoe die werkt):

@font-face {
   font-family: 'EraserRegular';
   src: url('stylesheets/EraserRegular-webfont.eot');
   src: url('stylesheets/EraserRegular-webfont.eot?#iefix') format('embedded-opentype'),
        url('stylesheets/EraserRegular-webfont.woff') format('woff'),
        url('stylesheets/EraserRegular-webfont.ttf') format('truetype'),
        url('stylesheets/EraserRegular-webfont.svg#EraserRegular') format('svg');
   font-weight: normal;
   font-style: normal;
   }

Die draait ook correct in IE7 en IE8.

Google Webfonts?
Anders zou je ook nog eens bij de Google Webfonts kunnen kijken of daar in de Handwriting iets vergelijkbaars bij zit (de "Argenta" hebben ze daar niet). Bv. de "Loved by the King".
Of dat erg mooi wordt, vraag ik me af (geen anti-alias bij niet-IE, dus nogal rafelig):

En van het vergrotingsprobleem ben je dan ook niet af.

• Zie hier een nog een G-webfont toepassing: schoolbord-lettertype-GoogleWebFonts.htm
• Met in dit topic het commentaar!

Google doet het trouwens als volgt:

@font-face {
  font-family: 'Loved by the King';
  font-style: normal;
  font-weight: normal;
  src: local('Loved by the King'), local('LovedbytheKing'), url('http://themes.googleusercontent.com/static/fonts/lovedbytheking/v3/wg03xD4cWigj4YDufLBSr8SuHxUvEE05hEBp-kiqXZE.woff') format('woff');
}

Dat is de uitkomst in bv. Firefox. En bij openen in IE7 wordt het:

@font-face {
  font-family: 'Loved by the King';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/static/fonts/lovedbytheking/v3/wg03xD4cWigj4YDufLBSryLa3ihe9LR-DKneXrhUwXo.eot');
  src: local('Loved by the King'), local('LovedbytheKing'), url('http://themes.googleusercontent.com/static/fonts/lovedbytheking/v3/wg03xD4cWigj4YDufLBSryLa3ihe9LR-DKneXrhUwXo.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/lovedbytheking/v3/wg03xD4cWigj4YDufLBSr8SuHxUvEE05hEBp-kiqXZE.woff') format('woff');
}

Conclusie:
Een mooi img lijkt we wel zo goed gaan: nergens problemen mee en het scheelt ook weer in pagina-snelheid, want het custom-font hoeft niet gedownload te worden.
Voor de toegankelijkheid en Google kan je er een hidden tekst bij zetten in een spannetje.

Met vriendelijke groet,
CSShunter

 

[csshunter]

PS
De "Freehand575 BT" lijkt me nog niet zo slecht als img:

Omdat het tekenwerk is, kan je de afspatiëring tussen de I en de etje ook nog mooier maken.