Link rond div werkt niet voor image - Softwareontwikkeling

vrijdag 15 oktober 2010 12:59

Acties:

Carpe Diem!

Topicstarter

Ik heb volgende html code, en dit werkt correct in FF. Alleen in IE doet zich een bizar gedrag voor. De image lijkt wel klikbaar, maar als erop geklikt wordt; dan gebeurd er niets. De rest is wel klikbaar.

HTML:

<div class="pushbutton">
    <a style="width: 100%; height: 100%; display: block;" href="/file/23292/&theme=theme14&page=1">
        <div class="pushbutton_image">
            <img height="50px" border="0" width="70px" src="/images/abc.jpg">
        </div>
        <div class="pushbutton_text">
            <p class="pushbutton_title">Titel</p>
            <p class="pushbutton_sub_title">Een subtitel</p>
        </div>
    </a>
</div>

Heeft dit iets te maken met IE specifieke markup of css die toegepast moeten worden?

vrijdag 15 oktober 2010 13:52

Acties:

Currahee

3 miles up, 3 miles down!

-FoX- schreef op vrijdag 15 oktober 2010 @ 12:59:
Heeft dit iets te maken met IE specifieke markup of css die toegepast moeten worden?

Het heeft te maken met de interpretatie van de verschillende browsers van de door jou opgegeven stylesheet. De fout die hier gemaakt wordt is dat je een <div> aanmaakt binnen de <a> tag. Volgens W3C is dit niet helemaal volgens de regels.

De oplossing is dus om de link te zetten binnen de divs. Dus dan krijg je de volgende code:

HTML:

<div class="pushbutton">    
        <div class="pushbutton_image">
            <a href="/file/23292/&theme=theme14&page=1"><img height="50px" border="0" width="70px" src="/images/abc.jpg"></a>
        </div>
        <div class="pushbutton_text">
            <p class="pushbutton_title"><a href="/file/23292/&theme=theme14&page=1">Titel</a></p>
            <p class="pushbutton_sub_title"><a href="/file/23292/&theme=theme14&page=1">Een subtite</a>l</p>
        </div>
    </a>
</div>

vrijdag 15 oktober 2010 13:53

Acties:

MoietyMe

zij/haar

Of je moet je doctype veranderen naar

HTML:

1	<!DOCTYPE html>

Dat is de HTML5 doctype, daar mag dit wel.

vrijdag 15 oktober 2010 15:51

Acties:

OkkE

CSS influencer :+

Het is inderdaad in HTML4 niet toegestaan om blocklevel elementen in een <a> te zetten. Je zou, zoals Good Fella al zegt, HTML5 kunnen gebruiken.

Maar als dit werkelijk de content is waar het om gaat, waarom bouw je het dan niet op deze manier op:

HTML:

<p class="pushbutton">
    <a href="/">
        <img src="/" alt="">
        <span class="title">Titel</span>
        <span class="subtitle">Sub titel</span>
    </a>
</p>

Ik streef er altijd naar zo min mogelijk overbodige elementen, class-names en IDs te gebruiken; afhankelijk van je design zou je uit mijn voorbeeld zelfs de <span> misschien weg kunnen laten.

[ Voor 18% gewijzigd door OkkE op 15-10-2010 15:54 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 15 oktober 2010 23:54

Acties:

X-Lars

Just GoT it.

Zoals de syntax highlighter al aangeeft, dien je de width en height attributen voor de img tag zonder "px" op te geven. En tekens als & dien je eigenlijk te escapen (& amp;)

zondag 17 oktober 2010 13:29

Acties:

R4gnax

Good Fella schreef op vrijdag 15 oktober 2010 @ 13:53:
Of je moet je doctype veranderen naar
HTML:
1
<!DOCTYPE html>
Dat is de HTML5 doctype, daar mag dit wel.

Los je daar alleen het probleem in IE wel mee op? IE < 9 ondersteunt HTML5 in zoverre dat deze het HTML5 doctype kan lezen en daarmee de browser in standards modus zet. (Wellicht niet eens de echte, maar de verborgen 'almost standards'-modus.)

Of ook de gewijzigde regels voor layout en document structuur in acht genomen worden is natuurlijk een heel ander verhaal.

zondag 17 oktober 2010 13:44

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

R4gnax schreef op zondag 17 oktober 2010 @ 13:29:
Los je daar alleen het probleem in IE wel mee op?

Je lost er helemaal niets mee op; er valt namelijk niets op te lossen. Ja, het valideert nu. Heb je daarmee iets opgelost?

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zondag 17 oktober 2010 13:56

Acties:

MoietyMe

zij/haar

R4gnax schreef op zondag 17 oktober 2010 @ 13:29:
[...]

Los je daar alleen het probleem in IE wel mee op? IE < 9 ondersteunt HTML5 in zoverre dat deze het HTML5 doctype kan lezen en daarmee de browser in standards modus zet. (Wellicht niet eens de echte, maar de verborgen 'almost standards'-modus.)

Of ook de gewijzigde regels voor layout en document structuur in acht genomen worden is natuurlijk een heel ander verhaal.

Of je dat probleem er mee oplost weet ik niet. Je maakt je code er in ieder geval weer valid wee

maandag 18 oktober 2010 00:03

Acties:

Bosmonster

*zucht*

RobIII schreef op zondag 17 oktober 2010 @ 13:44:
[...]

Je lost er helemaal niets mee op; er valt namelijk niets op te lossen. Ja, het valideert nu. Heb je daarmee iets opgelost?

Veel browsers corrigeren zelf de html, zoals Firefox. Je verkomt dus een hoop gezeik en zinloos debugwerk

maandag 18 oktober 2010 09:35

Acties:

moozzuzz

Currahee schreef op vrijdag 15 oktober 2010 @ 13:52:
HTML:
1
2
3
...
    </a>
...

Ik geloof dat de eindtag (uit de originele code) ook nog wel weg mag ;^). Verder lijkt me HTML5-documenttag gebruiken niet meteen de meest "educatieve" tip die hier meegegeven wordt, met de huidige browsersmix.

Verder met OkkE voor zover er geen JQuery of ander framework de DOM helemaal omspit met web2.0 effectjes (was mijn eerste idee bij de code).

maandag 18 oktober 2010 10:04

Acties:

Bosmonster

*zucht*

moozzuzz schreef op maandag 18 oktober 2010 @ 09:35:
[...]

Ik geloof dat de eindtag (uit de originele code) ook nog wel weg mag ;^). Verder lijkt me HTML5-documenttag gebruiken niet meteen de meest "educatieve" tip die hier meegegeven wordt, met de huidige browsersmix.

Waarom niet? Html5 doctype gebruiken is vandaag de dag denk ik de beste tip die je kunt geven. Dat je de doctype gebruikt (die 100% backwards compatible is en standardsmode triggered in alle browsers, zelfs IE6), wil natuurlijk niet zeggen dat je ook alle custom tags moet gebruiken.

De doctype alleen geeft je al genoeg voordelen boven XHTML strict of HTML4 strict om wat doctype betreft direct over te stappen.

maandag 18 oktober 2010 15:13

Acties:

-FoX-

Carpe Diem!

Topicstarter

Bedankt voor de feedback! Ik heb het intussen kunnen oplossen door de div-tag rond de image te verwijderen en de css aan te passen zodat deze rechtstreeks van toepassing is op de image.

Cascading Stylesheet:

1 2	.pushbutton img /* nieuw / .pushbutton_image / oud */

maandag 18 oktober 2010 15:35

Acties:

OkkE

CSS influencer :+

Hoe is dan nu je uiteindelijke code? Want als je uit het voorbeeld in de startpost alleen de <div> om de <img> weg haalt, zit je nog steeds met andere elementen binnen je <a> die niet mogen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 18 oktober 2010 17:20

Acties:

-FoX-

Carpe Diem!

Topicstarter

De uiteindelijke code is:

HTML:

<div class="pushbutton">
    <a style="width: 100%; height: 100%; display: block;" href="/file/23292/&amp;theme=theme14&amp;page=1">
        <img src="/images/image.jpg" width="70" border="0" height="50"/>
        <div class="pushbutton_text" style="color: black;">
            <p class="pushbutton_title">Titel</p>
            <p class="pushbutton_sub_title">Een subtieten</p>
        </div>
    </a>
</div>

En dit lijkt wel goed te werken in IE.

maandag 18 oktober 2010 17:42

Acties:

MoietyMe

zij/haar

Met de HTML 5 doctype?

maandag 18 oktober 2010 17:43

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

-FoX- schreef op maandag 18 oktober 2010 @ 17:20:
HTML:
1
<p class="pushbutton_sub_title">Een subtieten</p>

offtopic:
Hehe, hehe, he said tieten, hehe

Anyone who gets in between me and my morning coffee should be insecure.

maandag 18 oktober 2010 18:51

Acties:

OkkE

CSS influencer :+

-FoX- schreef op maandag 18 oktober 2010 @ 17:20:
De uiteindelijke code is:

HTML:

<div class="pushbutton">
    <a style="width: 100%; height: 100%; display: block;" href="/file/23292/&amp;theme=theme14&amp;page=1">
        <img src="/images/image.jpg" width="70" border="0" height="50"/>
        <div class="pushbutton_text" style="color: black;">
            <p class="pushbutton_title">Titel</p>
            <p class="pushbutton_sub_title">Een subtieten</p>
        </div>
    </a>
</div>

Dit is nog steeds geen valid HTML4, waarom de <div> en <p>'s nog binnen de <a>?

code:

1	Error Line 1, Column 114: document type does not allow element "DIV" here

Met de HTML die ik eerder voorstelde kun je qua opmaak het zelfde bereiken, en dan is het wel valid. Niet dat je perse 100% valid code hoeft te schrijven (liefst wel), maar ik zie niet in waarom je het niet zou doen als het simpel mogelijk is. Minder fouten in code betekend minder kans op verschillen in browsers...

En dit lijkt wel goed te werken in IE.

Nooit uit gaan van IE. Ik zou altijd uit gaan van browser(s) die zicht wél aan de specificatie houden en daarna, waar nodig, uitzonderingen maken voor IE.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 18 oktober 2010 19:55

Acties:

moozzuzz

-FoX- schreef op maandag 18 oktober 2010 @ 17:20:
De uiteindelijke code is:
HTML:
1

Basically is deze code helemaal niet veranderd lijkt me (nog steeds block in een inline element). oh well...

Ik heb alvast geleerd dat dit in HTML5 blijkbaar wel mag.