[sIFR] sizing issues / loze ruimte*

[Verwijderd]

Beste DEV-ers,

op http://test.monlog.nl/ staat telkens onder de H2-tag (met een image replacement) een loze ruimte, die ik voor het gemak telkens grijs gemaakt heb. Of beter gezegd: de H2 tag loopt nog door onder het plaatje van de image replacement (vandaar ook de titel; van mijn vraag: ik vermoed dat er ergens een padding zit, al heb ik geen idee waar).

Als je echter op http://test.monlog.nl/test.php kijkt (met min of meer dezelfde code, alleen veel simpeler), is er geen loze ruimte onder de H2-tag.

Die loze ruimte probeer ik weg te krijgen, maar dat lukt me niet.

In IE6 (is wellicht een teken dat ik iets verkeerd doe ) ziet het eruit zoals het de bedoeling is, in het genoemde testbestand ook.


Iemand suggesties?

M.v.g.,

[ Voor 28% gewijzigd door Verwijderd op 22-10-2006 00:34 ]

[crisp]

Wellicht default margin van je P-element?

[Verwijderd]

nope,
de class .logitem p {} staat al op margin-top:0

de grijze balk die je onder de kop ziet, hoort ook bij de h2-tag, die heb ik een grijze achtergrondkleur gegeven:
h2 { background: #666; }

het gekke is: de h2-tag is grijs, maar wordt overschreven door de image replacement die een witte achtergrondkleur heeft. Maar er blijft dus nog een stukje grijs over. Het grijs weghalen is het punt niet, dat is simpelweg de achtergrondkleur veranderen, maar het gaat juist om die ruimte waarin het grijs overblijft. Die loze ruimte van de h2-tag moet weg

als je op http://test.monlog.nl/test.php kijkt, zie je dat het goed gaat, terwijl daarbij ongeveer dezelfde code staat. Snap ut nie

[Verwijderd]

Ik heb eigenlijk alle padding en margin-opties die mogelijk zijn inmiddels weg gehaald en weer toegevoegd met telkens hetzelfde resultaat

Het gekke is, dat in IE6 die afbeelding wel aansluit op de tekst eronder en op de testpagina ook. Daar zou toch een hint moeten zitten, alleen zie ik 'm nie

[crisp]

Dit is de boosdoener:

Cascading Stylesheet:

.sIFR-hasFlash h2 {
    visibility: hidden;
    letter-spacing: -9px;
    font-size: 55px;
}

[Verwijderd]

Dank voor de suggestie!

Maar hoe is dat de boosdoener? Als ik dat stuk in de css uitcomment of verwijder, blijft er nog steeds loze ruimte onder de h2/image staan; alleen de h2/image zelf is een stuk kleiner geworden.

Als ik de waarden verander, bijvoorbeeld
letter-spacing:-9 naar iets anders, gebeurt er niets of de afbeelding wordt groter
als ik de font-size van h2 verander, idem dito

[ Voor 16% gewijzigd door Verwijderd op 22-10-2006 12:58 ]

[Verwijderd]

Ik denk trouwens dat je goed gezien hebt dat daar wel het probleem kan zitten. In de documentatie van sIFR* staat:

the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles

*Voor de eventuele nieuwe lezers: sIFR is een hippe techniek die het mogelijk maakt om 'unobtrusive' teksten in html-elementen (bijvoorbeeld h2's in dit geval) te vervangen door een mooie flashafbeelding. Zie http://www.mikeindustries.com/sifr/

[ Voor 23% gewijzigd door Verwijderd op 22-10-2006 13:01 ]

[Verwijderd]

Beste Crisp,

misschien is het een idee om de titel van dit topic te veranderen; in ieder geval zodanig dat het duidelijk is dat er ook 'iets' aan de hand is met een image-replacement techniek? Ik neem aan dat jij dat als mod kunt doen?

grt

[crisp]

Titelfix

[Not Pingu]

Kijk eens naar de line-height property, zet deze gelijk aan de font-size die je opgeeft. Als ik in FF de default browser styles uitzet, is de grijze ruimte onder de headers op http://test.monlog.nl/ grotedeels weg.

[Verwijderd]

Dat zou 'm kunnen zijn... Ik ga het uitproberen. Thnx!

[Verwijderd]

Hmm, lijkt niet te helpen ...

het vreemde is, bij precies dezelfde stylesheet werkt het wel op http://test.monlog.nl/test.php

[Verwijderd]

Boem! Toen had ik 'm!

Cascading Stylesheet:

.sIFR-hasFlash h2 {
    visibility: hidden;
    letter-spacing: -9px;
    font-size: 55px;
    line-height: -9;
}

Dank voor de waardevolle suggesties heren! \0/

[ Voor 5% gewijzigd door Verwijderd op 23-10-2006 13:17 ]

[Verwijderd]

Ow Iets te vroeg gejuicht. Nu is het weer. Wat vaag!

[Verwijderd]

The font size of the Flash text is determined by the line height of the HTML element. This might be counterintuitive, however, there is a trick to set the line height equal to the font size as declared in the CSS. Here's a "decoy" style declaring a specific size:

.sIFR-hasFlash h2 {
font-family: Verdana;
font-size: 18px;
line-height: 1em;
visibility: hidden;
}

Because the line height is 1em, sIFR will use the font size of 18px as its guide.

Staat op http://wiki.novemberborn.net/sifr3/How+to+use. Pff, ik zit daar allemaal mee te klooien, maar snap niet waarom ie het de ene keer wel en de andere keer niet doet...

[Verwijderd]

M.b.t. de post hieronder: mijn excuses, de post 'omhoog halen' was niet mijn bedoeling. Dacht er simpelweg niet over na dat deze dan telkens boven zou komen te staan in het overzicht.. Anyway; wat mij betreft kan dit topic op slot; heb een workaround bedacht door een ander lettertype te gebruiken en de css eromheen aan te passen.

[ Voor 134% gewijzigd door Verwijderd op 23-10-2006 14:15 ]

[Yoozer]

Even een stille hint: in plaats van 6 posts achter elkaar te maken kun je beter < deze knop gebruiken. Dat staat minder opdringerig. Zie ook de FAQ en dan het stukje over topics omhooghalen .