[HTML/IE] links op pagina werken niet - Softwareontwikkeling

woensdag 17 december 2008 09:47

Acties:

0 Henk 'm!

Topicstarter

Ik heb dus net een site gemaakt die ik nog niet kan laten zien, maar het komt er op neer dat het uit een aantal blokken bestaat die zijn gefloat naar left. Nu heb ik bovenaan de pagina een aantal links naar deze blokken. In alle browsers behalve IE (zowel 6 als 7) wil hij niet naar dat blok springen. Ik heb een voorbeeldje gemaakt die het probleem illustreert

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div {
                width: 100%;
                height: 200px;
                float: left;
            }
        </style>
    </head>
    <body>
        <a href="#red">Rood</a>
        <a href="#white">Wit</a>
        <a href="#blue">Blauw</a>
        <a href="#orange">Oranje</a>
        <a href="#green">Groen</a>
        <a href="#purple">Paars</a>
        <div id="red" style="background-color: red"></div>
        <div id="white" style="background-color: white"></div>
        <div id="blue" style="background-color: blue"></div>
        <div id="orange" style="background-color: orange"></div>
        <div id="green" style="background-color: green"></div>
        <div id="purple" style="background-color: purple"></div>
    </body>
</head>

zoals je ziet werkt dit niet in IE, wel in andere browsers. Als je de float: left weghaalt dan werkt het wel in IE. Is er een manier waarop ik dit werkend kan krijgen waarbij de elementen nog wel naar links floaten? Of moet ik de css gewoon een beetje aanpassen om dit nog werkend te krijgen, of extra elementen toevoegen?

hallo

woensdag 17 december 2008 09:49

Acties:

0 Henk 'm!

killercow

eth0

probeer eens name=""

openkat.nl al gezien?

woensdag 17 december 2008 09:55

Acties:

0 Henk 'm!

truegrit

Topicstarter

Dat werkt dus ook niet, had ik eigenlijk moet zeggen dat ik dat ook geprobeerd heb. Dit werkt dus ook niet:

HTML:

<a name="red"></a>
        <div id="red" name="red" style="background-color: red"></div>
        <a name="white"></a>
        <div id="white" name="white" style="background-color: white"></div>
        <a name="blue"></a>
        <div id="blue" name="blue" style="background-color: blue"></div>
        <a name="orange"></a>
        <div id="orange" name="orange" style="background-color: orange"></div>
        <a name="green"></a>
        <div id="green" name="green" style="background-color: green"></div>
        <a name="purple"></a>
        <div id="purple" name="purple" style="background-color: purple"></div>

Ok het probleem was dus dat ik die elementen moest floaten omdat er een banner aan de rechterkant moest komen. Daardoor kon IE blijkbaar de lokatie van die elementen niet vinden. Nou heb ik er een grote div omheen gedaan met alle blokken, en de banner daarbuiten. De wrapper krijgt dan een float: left mee, de blokken waar naar gelinkt wordt niet (zodat IE weet waar ze zijn), wat prima werkt.

Vind het alleen nog steeds gek dat IE daar weer een probleem van maakt terwijl andere browsers het wel uitvoeren, maar aan de andere kant had ik ook niet anders verwacht. Het feit dat ik een pagina had gemaakt die zonder hacks in zowel IE6, IE7 en alle andere browsers werkte vertrouwde ik al niet, dus er moest wel iets zijn wat het niet deed

[ Voor 35% gewijzigd door truegrit op 17-12-2008 10:24 ]

hallo

woensdag 17 december 2008 10:22

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

IE kan alleen fragments linken naar elementen die 'layout' hebben; vervelende bug inderdaad...

Intentionally left blank

woensdag 17 december 2008 10:50

Acties:

0 Henk 'm!

denbuzze

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            div {
                width: 100%;
                height: 200px;
                float: left;
            }
            </style>
    </head>
    <body>
        <p id="menu">
            <a href="#red">Rood</a>
            <a href="#white">Wit</a>
            <a href="#blue">Blauw</a>
            <a href="#orange">Oranje</a>
            <a href="#green">Groen</a>
            <a href="#purple">Paars</a>
        </p>
        <div id="red" style="background-color: red">&nbsp;</div>
        <div id="white" style="background-color: white">&nbsp;</div>
        <div id="blue" style="background-color: blue">&nbsp;</div>
        <div id="orange" style="background-color: orange">&nbsp;</div>
        <div id="green" style="background-color: green">&nbsp;</div>
        <div id="purple" style="background-color: purple">&nbsp;</div>
    </body>
</html>

De bovenstaande code werkt gewoon bij mij.
Ik heb de volgende aanpassingen gedaan:

xmlns & content type toegevoegd
p tag rond de a tags gezet (je mag normaal gezien niet rechtstreeks een a tag in de body zetten)
Een non-breaking space in de divs gezet.
HTML:
1
 
je laatste tag verandert in </html> ipv </head>

De 'bug' ligt volgens mij aan het feit dat de divs niets van content hadden.
Een non-breaking space toevoegen was de oplossing.

[ Voor 2% gewijzigd door denbuzze op 17-12-2008 10:51 . Reden: uitlijning html ]

woensdag 17 december 2008 11:07

Acties:

0 Henk 'm!

truegrit

Topicstarter

Mhm ja dat klopt inderdaad, met content doet hij het wel. Het probleem in mijn originele pagina was dat de content bestond uit 2 divjes, die beide "float: left" hadden omdat ze naast elkaar moesten staan. Zou dit dan er voor zorgen dat IE denkt dat er geen inhoud in de blokken zit omdat de content ook gefloat is?

hallo

woensdag 17 december 2008 12:25

Acties:

0 Henk 'm!

imp4ct

'k Snap ook niet de bedoeling van al die DIV's, kan je niet gewoon via JS de background-color doorgeven? En zet standaard de DIV in bv. de rode background color via CSS

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <ul id="menu">
            <li onClick="document.getElementById('content').style.backgroundColor='red';">Rood</li>
            <li onClick="document.getElementById('content').style.backgroundColor='white';">Wit</a>
            <li onClick="document.getElementById('content').style.backgroundColor='blue';">Blauw</a>
            <li onClick="document.getElementById('content').style.backgroundColor='orange';">Oranje</a>
            <li onClick="document.getElementById('content').style.backgroundColor='green';">Groen</a>
            <li onClick="document.getElementById('content').style.backgroundColor='purple';">Paars</a>
        </ul>
        <div id="conten">&nbsp;</div>
    </body>
</html>

Best wel een scriptje voor schrijven, of jQuery of MooTools gebruiken om het nog vlotter en misschien wat cooler aan te pakken, bv. fading tussen de kleuren.

[ Voor 6% gewijzigd door imp4ct op 17-12-2008 12:28 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

woensdag 17 december 2008 12:39

Acties:

0 Henk 'm!

Noork

Waarom los je het niet op met een echte <a> (anker)tag?

zoiets:

HTML:

1 2	<a href="#purple">Paars</a> <div id="id_purple" style="background-color: purple"><a name="purple"></a></div>

[ Voor 3% gewijzigd door Noork op 17-12-2008 12:50 ]