Firefox renderbug (denk ik?)

[F97]

Jeej, na een vreemd iets in IE is er nu ook iets vreemd in Firefox! Jaja. Misschien is het hier iets aan m'n Firefox lokaal, ik weet het niet, ik hoop van wel. Feit is, het bestand ziet er zowel lokaal als op de server gelijk uit, met twee blauwe lijnen dus.



De code zal ik hier niet copy pasten, 'k heb dan ook geen flauw idee waar de fout kan zitten (dus lijkt me madness om gewoon alles te posten). css staat wel in de pagina zelf.

Iemand die een idee heeft? Scheelt het aan Firefox of doe ik iets gevaarlijk?

[ Voor 4% gewijzigd door F97 op 03-08-2004 13:31 ]

[DizzyWeb]

Het heeft te maken met de links. Dat logo en dat Royal Canin, klik er op en houd de muis ingedrukt en je ziet de blauwe lijnen oranje worden.

Hoop dat het je helpt

[lohost]

De eerste blauwe link haal je weg met de volgende css toevoeging:

h1 a {
text-decoration: none;
}

[F97]

DizzyWeb schreef op 03 augustus 2004 @ 13:39:
Het heeft te maken met de links. Dat logo en dat Royal Canin, klik er op en houd de muis ingedrukt en je ziet de blauwe lijnen oranje worden.

Hoop dat het je helpt

Fuck, soms is't leven zo simpel. Had ik maar eens geklikt ofzo ... Thanks, opgelost :-)

Cascading Stylesheet:

a { text-decoration: none; }

[Rickets]

Dit toevoegen aan de elementen waarop je die text-indent toepast helpt ook.

Cascading Stylesheet:

overflow: hidden;

[lohost]

Ow, d'r was al een soortgelijke reactie.
De tweede kun je fixen door een class ofzo te declareren op die link naar royal nogiets. De betreffende class ook de text-decoration: none; meegeven.
En als je het helemaal tactvol doet hoef je dus geen h1 a aan te maken, maar enkel een apparte class die je op beide plaatjes toepast.

[F97]

Jeps, iedereen bedankt hoor. Na de post van DizzyWeb had ik het ook door :-)

En lohost, niet te veel classes maken als het met selectors kan enzo. Ooit eens Tantek of Meyer gelezen, daarmee ... :-) Die zeggen dat, en ze hebben gelijk.

[RwD]

is dit trouwens niet de oorzaak?

Cascading Stylesheet:

h1{
    text-indent: -9999px;
    margin: 0;
    padding: 0;
    border: 0;
    }

Maar omdat het al opgelost is dit terzijde

[ Voor 7% gewijzigd door RwD op 03-08-2004 13:48 ]

[André]

Dat is symptoombestrijding terwijl je eigenlijk naar de oorzaak moet kijken. Waarom loopt die onderstreping over de hele pagina? Waarschijnlijk omdat je een link in een header element geplaatst had, en jouw header element heeft een text-indent van -9999px ???

[Rickets]

André schreef op 03 augustus 2004 @ 13:48:
Dat is symptoombestrijding terwijl je eigenlijk naar de oorzaak moet kijken. Waarom loopt die onderstreping over de hele pagina? Waarschijnlijk omdat je een link in een header element geplaatst had, en jouw header element heeft een text-indent van -9999px ???

Dat is een methode om tekst binnen headers te vervangen door achtergrond-plaatjes. Hij heeft het alleen niet compleet toegepast, overflow:hidden; vergeten

[F97]

André schreef op 03 augustus 2004 @ 13:48:
Dat is symptoombestrijding terwijl je eigenlijk naar de oorzaak moet kijken. Waarom loopt die onderstreping over de hele pagina? Waarschijnlijk omdat je een link in een header element geplaatst had, en jouw header element heeft een text-indent van -9999px ???

Ja? FIR maar dan beter? Zet je styles eens uit enzo. Is gewoon om een header image te hebben in m'n h1, zonder dat tekst van h1 zichtbaar is ...

(Edit: en ja, 'k had moeten kijken hoe het kwam, maar ik zag niet dat het met die twee links te maken had. Ik zag het niet, dus kon ik het ook niet vangen. Mja.)

[ Voor 16% gewijzigd door F97 op 03-08-2004 13:54 ]

[André]

Rickets schreef op 03 augustus 2004 @ 13:50:
[...]

Dat is een methode om tekst binnen headers te vervangen door achtergrond-plaatjes. Hij heeft het alleen niet compleet toegepast, overflow:hidden; vergeten

Daarvoor kun je toch ook gewone plaatjes gebruiken? Door middel van de alt en title attributen kunnen zowel stijlloze als imageloze browsers er mee omgaan. In het eerste geval zul je alleen een plaatje zien, in het 2de alleen een tekst.

[F97]

André schreef op 03 augustus 2004 @ 14:04:
[...]

Daarvoor kun je toch ook gewone plaatjes gebruiken? Door middel van de alt en title attributen kunnen zowel stijlloze als imageloze browsers er mee omgaan. In het eerste geval zul je alleen een plaatje zien, in het 2de alleen een tekst.

code:

<h1><img alt="Ladadi titel" /></h1>

Zo dan?

Nu kan ik wel nog m'n achtergrond wijzigen met een hover hé, als ik gewoon m'n tekst laat verdwijnen en m'n background-image in h1 gebruik? Met bovenstaande code niet, tenzij met javascript. Of met img:hover, maar dat werkt in sommige browsers niet.

Edit: En zo kan ik ook m'n border-color veranderen. Belangrijk.

[ Voor 9% gewijzigd door F97 op 03-08-2004 14:11 ]

[Verwijderd]

dan vind ik het nog steeds netter om

code:

<h1><span style="visibility: hidden">heading</span></h1>

te doen

offtopic:
een hondenschool naar Martin Gaus vernoemen?

[ Voor 37% gewijzigd door Verwijderd op 03-08-2004 15:20 ]

[bRight]

offtopic:
denk dat die school van Gaus is

[Verwijderd]

offtopic:
Hoe kom je aan dat heerlijke loze business-geblaat waar je je pagina mee gevuld hebt?

[André]

offtopic:
Gebruik dan gewoon Lorum Ipsum

[Rickets]

Verwijderd schreef op 03 augustus 2004 @ 15:18:
dan vind ik het nog steeds netter om

code:

<h1><span style="visibility: hidden">heading</span></h1>

te doen

Het is een afweging die je maakt. Of je 'vervuilt' je document met extra markup, zoals span's, of je accepteert de problemen die zich voordoen bij image replacement (de ene methode laat niks zien als plaatjes uit staan en css aan, een andere methode werkt niet in IE5, etc). Netter vind ik het zelf niet eigenlijk

[disjfa]

offtopic:
Zet er dan ook een linkje bij: www.lipsum.com

[Verwijderd]

Rickets schreef op 03 augustus 2004 @ 15:52:
[...]

Het is een afweging die je maakt. Of je 'vervuilt' je document met extra markup, zoals span's, of je accepteert de problemen die zich voordoen bij image replacement (de ene methode laat niks zien als plaatjes uit staan en css aan, een andere methode werkt niet in IE5, etc). Netter vind ik het zelf niet eigenlijk

ik heb nu 3 methoden voorbij zien komen:
• img ipv text
- semantisch zeer netjes, plaatje zichtbaar in non css browsers, text zichtbaar in non img browsers

• background + text indent:
- semantisch ook netjes, text zichtbaar in non css en non img browsers, alleen je hide de text niet, maar gooit hem buiten beeld, dat vind ik een beetje vies

• background + hidden span:
- als je text niet wil laten zien, hide hem dan ook en plaats hem niet buiten beeld imho, text zichtbaar in non-css en non img browsers

dan wil ik graag nog een optie aandragen:
• img + hidden span
- img met lege alt, width en hight op 0, gereset met css, en een hidden span. Dit is best eng, maar resulteert in een plaatje op de print (gaat niet met backgrounds), non css browers laten het plaatje niet zien, text wel, non img browsers laten text zien.

(aangenomen dat non img browsers ook niet aan css doen, da's niet altijd triviaal, in dat geval is de eerste optie toch de beste denk ik)

[ Voor 5% gewijzigd door Verwijderd op 03-08-2004 16:13 ]

[Rickets]

Verwijderd schreef op 03 augustus 2004 @ 16:11:
ik heb nu 3 methoden voorbij zien komen:
• img ipv text
- semantisch zeer netjes, plaatje zichtbaar in non css browsers, text zichtbaar in non img browsers

Punt is hierbij dat je een grotere koppeling hebt tussen je document en de presentatie ervan. Qua toegankelijkheid is het netjes, maar mijn voorkeur heeft het niet.

• background + text indent:
- semantisch ook netjes, text zichtbaar in non css en non img browsers, alleen je hide de text niet, maar gooit hem buiten beeld, dat vind ik een beetje vies
• background + hidden span:
- als je text niet wil laten zien, hide hem dan ook en plaats hem niet buiten beeld imho, text zichtbaar in non-css en non img browsers
dan wil ik graag nog een optie aandragen:
• img + hidden span
- img met lege alt, width en hight op 0, gereset met css, en een hidden span. Dit is best eng, maar resulteert in een plaatje op de print (gaat niet met backgrounds), non css browers laten het plaatje niet zien, text wel, non img browsers laten text zien.
(aangenomen dat non img browsers ook niet aan css doen, da's niet altijd triviaal, in dat geval is de eerste optie toch de beste denk ik)

Er zijn nog meer manieren, zie http://mezzoblue.com/tests/revised-image-replacement. Hier staan de meeste wel opgesomd, met de voor- en nadelen. Hierbij valt op dat er op alle manieren wel iets aan te merken is.

Het is eigenlijk wachten op iets dat er nog niet helemaal is (zoals zo vaak), namelijk het genereren van content met de content-property.
Tot die tijd gebruik ik de oplossing met de minste problemen, namelijk geen images voor headers: geen overbodige markup, geen toegankelijkheids-issues en het werkt zeker in alle browsers.

[F97]

Verwijderd schreef op 03 augustus 2004 @ 15:18:
dan vind ik het nog steeds netter om

code:

<h1><span style="visibility: hidden">heading</span></h1>

te doen

Omdat dat in Jaws (of andere screenreaders) dacht ik niet zichtbaar is? Daarom dat ik (ik niet alleen, uiteraard) text-indent gebruiken natuurlijk. Anders gebruikte ik ook wel display: none of visibility: hidden.
Ik denk ook wel na :-)

Maar alles zal inderdaad wel zijn pro's en cons hebben. Als't maar overal leesbaar is, nietwaar? Toegankelijk enzo. (Enige con hier is denk ik dat er niets staat als images uit staan. Maar da's overkomelijk. 'k Vind het erger als blinden niets kunnen lezen, bijvoorbeeld.)

OneOfBorg: die tekst is een euh, hoe noemt dat, zo'n ding dat je in Dreamweaver kan bij gooien. 't Is eens iets anders dan Lorem Ipsum. 'k Gebruik ook wel eens teksten van Shakespeare, een sonnetje ofzo. (Net even hard gezocht, 't heet Lorem and more, Dreamweaver Extension is het dus)

[ Voor 13% gewijzigd door F97 op 03-08-2004 18:43 ]