[HTML] Onvindbare bug in uitklapmenu - Softwareontwikkeling

maandag 29 september 2008 17:15

Acties:

Topicstarter

Hee Tweakers,

Voor mijn moeder heb ik een site gemaakt alleen krijg ik in Firefox en in InternetExplorer een hele andere uitkomst en kan er maar niet achter komen wat er fout gaat. Erg vervelend, ook na een aantal uurtjes zoeken op internet zonder resultaat..

Hier in FireFox:

Afbeeldingslocatie: http://fileserver1.dump.nu/keeemaawcakwa-Untitled-2.png

En in InternetExplorer:

Afbeeldingslocatie: http://fileserver1.dump.nu/keeemakakoedq-Untitled-1.png

Dit is mijn index.html pagina die op elke pagina zo te vinden is:

code:

<!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>:: Verloskundige Praktijk Wijchen ::</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="menu.js" type="text/javascript"></script>
    <!--[if lte IE 6]>
    <link href="IEfix.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <script type="text/javascript">
        function displayLeftSubMenu( id )
        {
            var elmt = document.getElementById(id);
            if ( elmt.style.display == 'none' ) {
                elmt.style.display = 'block';
            } else {
                elmt.style.display = 'none';
            }
        }
    </script>
</head>

<body>
<div id="margintop"></div>
<div id="container">
    <div id="header">
        <h1 class="invisible">Verloskundige Praktijk Wijchen</h1>
        <div id="leftmenu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="vragen.html">Vragen</a></li>

                <li><a href="links.html">Links</a></li>
                <li><a href="javascript:displayLeftSubMenu('submenu1');">Contact</a></li>
            <ul>

En het style.css bestand:

code:

#leftmenu{
    width: 200px;
    position:absolute;
}
.leftsubmenu ul li{
    font-family: Tahoma, arial, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}

#leftmenu ul li{
    display: block;
    float:left;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 2px;
    width: 200px;
    height: 23px;
    background-image: url(images/line.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

#leftmenu ul li a, #leftmenu ul li a:active, #leftmenu ul li a:visited{
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 16px;
    width: 200px;
    height: 23px;
    margin-left: 3px;
}

#leftmenu ul li a:hover{
    margin-left: 10px;
}

Ik kan er maar niet uitkomen hoe of wat ik fout doe, dus als iemand me hierbij zou willen helpen zou ik dit erg op prijs stellen $_/-\o_$ . Een levend voorbeeld is trouwens hier te vinden.

Guus

maandag 29 september 2008 17:20

Acties:

keur0000

-------- N O N E --------

de fout zit alleen in "contact", de rest werkt goed zo te zien onder IE7.

position:absolute;.................

[ Voor 21% gewijzigd door keur0000 op 29-09-2008 17:23 ]

Bron: SR. Engineer met +40 jaar ontwerp/werkervaring in het bouwen van o.a. datacenters ;)

maandag 29 september 2008 17:24

Acties:

disjfa

be

1. Waarom positioneer je je menu absoluut.
2. javascript: in je href?
3. je positioneert float je listitems terwijl je ze in hun oorspronkelijke manier gebruikt

Hoe breed is je menu, en hoe breed zijn de menuitems daarin

disjfa - disj·fa (meneer)
disjfa.nl

maandag 29 september 2008 18:21

Acties:

gxpower

Topicstarter

Ik heb nu position:absolute; weggehaald en in IE7 ziet het er goed uit en werkt ook prima alleen begint Firefox nu weer te zeuren aangezien het logo nu ergens midden in de pagina staat. Hoe los ik dat op(A)?

maandag 29 september 2008 19:16

Acties:

MBV

trial-and-error in Firebug: float:left op #logo uitzetten. Waarom dat uitmaakt snap ik niet precies, maargoed

maandag 29 september 2008 22:06

Acties:

Pkunk

Volgens mij kan je het beste dat logo als achtergrond in je menu div zetten (oh.. je hebt 2 keer id="leftmenu", da's niet zo netjes. Beter kan je gewoon 1 divje maken met daarin beide menu's, en 1 achtergrond), want dat is het immers ook. Dan heb je geen gezeur met floats, wat nu wel het geval is.

[ Voor 30% gewijzigd door Pkunk op 29-09-2008 22:11 ]

Hallo met Tim

maandag 29 september 2008 22:22

Acties:

StephanVierkant

offtopic: misschien de foto's/plaatjes beetje verkleinen? duurt nogal lang met laden momenteel

maandag 29 september 2008 23:57

Acties:

tonyisgaaf

Op regel 33 en 44 van de index heb je <ul> i.p.v. </ul>
Zoals hierboven al gezegd, je hebt 2x de id "leftmenu", wat niet mag, een id moet uniek zijn. Op te lossen d.m.v. classes.
Haal eerst maar eens door een validator!

Als je je afvraagt waarom je fouten krijgt op je onWhatEver attributes => die moeten in het fijne XHTML Strict doctype wat je hebt gekozen geheel "lowercase" zijn => onwhatever dus.

Voor een veel beter dropdown menu, i.p.v. het javascript menu dat je nu gebruikt in de div "contentMenu", zie Sons of Suckerfish. Semantisch correct, kun je achteraf d.m.v. JS wel delays etc. aan toevoegen.

Op regel 75 staat overigens Rraktijk i.p.v. Praktijk.

[ Voor 51% gewijzigd door tonyisgaaf op 30-09-2008 00:10 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

dinsdag 30 september 2008 08:48

Acties:

Verwijderd

Wellicht nog een kleine tip:

code:

1	<h1 class="invisible">Verloskundige Praktijk Wijchen</h1>

Ik neem aan dat er een display: none; ofzo achter zit. Voor Google (lees: SEO) is dit niet echt bevorderlijk.

dinsdag 30 september 2008 10:32

Acties:

Goodfellas

Verwijderd schreef op dinsdag 30 september 2008 @ 08:48:
Wellicht nog een kleine tip:
code:
1
 <h1 class="invisible">Verloskundige Praktijk Wijchen</h1>
Ik neem aan dat er een display: none; ofzo achter zit. Voor Google (lees: SEO) is dit niet echt bevorderlijk.

Sterker nog: dat mag niet.

Verder zou ik ook gewoon even kijken naar een css menu ipv een js menu, duidelijker en makkelijker.

dinsdag 30 september 2008 12:46

Acties:

tonyisgaaf

Goodfellas schreef op dinsdag 30 september 2008 @ 10:32:
[...]

Sterker nog: dat mag niet.

Verder zou ik ook gewoon even kijken naar een css menu ipv een js menu, duidelijker en makkelijker.

Wat "niet mag" is content verbergen voor de gebruiker zonder dat er alternatieve content met dezelfde inhoud getoond wordt. Oftewel: dat je de Googlebot andere content toont dan de gebruiker (webbrowser).
In dit geval staat duidelijk in de afbeeldingheader dezelfde tekst als in de <h1>, dus dat lijkt me allesbehalve een probleem.

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard