Probleem met menu

Status
Niet open voor verdere reacties.
K

kees11

Gebruiker
Lid geworden
7 jun 2004
Berichten
35
Hallo,

Ik ben tijdje terug begonnen met Xhtml. Maar ik heb een probleem waar ik niet uitkom.

Zie foto



Iedere keer is de eerste button zo misvormt. Maakt dus niet uit welke.


Wie kan me verder helpen want kom hier dus echt niet uit. Gewoonweg omdat ik mijn eigen fout niet vind....


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="nl" />
<title>Win die te gekke prijzen!</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>

<!-- CONTAINER -->
<div id="container">

<!-- LAYOUT BG -->
<div id="layout_bg">

<!-- TOP MENU -->
<ul id="topmenu">
<li><a href="#" class="top_beginpagina">Beginpagina</a></li>
<li><a href="#" class="top_deelnemen">Deelnemen</a></li>
<li><a href="#" class="top_prijzen">Prijzen</a></li>
<li><a href="#" class="top_contact">Contact</a></li>
</ul>
<!-- EINDE TOP MENU -->

<!-- CONTENT -->
<div id="content">
<span style="font-size: 24px"><b>Ja,</b></span> ik wil kans maken op die prijzen!<br/> 
<span style="font-size: 12px"><b>€1000,- Cash, Playstation 3 + spellen, LCD TV, Laptop</b></span> door me aan te melden bij de Prijsvragenweb nieuwsbrief en twee keer per maand een nieuwsbrief met de leukste prijsvragen te ontvangen!
Vul hieronder jouw gegevens in om kans te maken op deze prijzen!<br/><br/>
door me aan te melden bij de Prijsvragenweb nieuwsbrief en twee keer per maand een nieuwsbrief met de leukste prijsvragen te ontvangen!
Vul hieronder jouw gegevens in om kans te maken op deze prijzen!<br/><br/>
door me aan te melden bij de Prijsvragenweb nieuwsbrief en twee keer per maand een nieuwsbrief met de leukste prijsvragen te ontvangen!
Vul hieronder jouw gegevens in om kans te maken op deze prijzen!<br/><br/>
door me aan te melden bij de Prijsvragenweb nieuwsbrief en twee keer per maand een nieuwsbrief met de leukste prijsvragen te ontvangen!
Vul hieronder jouw gegevens in om kans te maken op deze prijzen!<br/><br/>
door me aan te melden bij de Prijsvragenweb nieuwsbrief en twee keer per maand een nieuwsbrief met de leukste prijsvragen te ontvangen!
Vul hieronder jouw gegevens in om kans te maken op deze prijzen!<br/><br/>
<center><img src="images/lijn.gif" alt="" /></center><br/>
</td>
</tr>
</table>
<center><br/>
<input name="add" type="hidden" value="1">
<input class="button" name="verzonden_nieuw" type="submit" id="submit" value="Aanmelden" />
<input class="button" name="reset" type="reset" id="reset" value="Wissen" />
</center>
</form>

</td>
</tr>

</table>

</div>
<!-- EINDE CONTENT -->

<!-- BOTTOM TEKST -->
<p class="bottom_txt">Copyright 2010 DID. WWW.DID.NL</p>
<!-- EINDE BOTTOM TEKST -->

</div>
<!-- EINDE LAYOUT BG -->

</div>
<!-- EINDE CONTAINER -->

Hierboven is de INDEX


En hieronder de STYLE:

Code: 
/* Standaard Waarden */
* {
	margin: 0;
	padding: 0px;
	list-style: none;
	border: 0px;
}
html {
	background: #daf4ff url(images/htmlbg.gif) repeat-x top left;
	margin: 0;
	font: 11px Tahoma, Arial, Verdana, sans-serif;
	color: #013444;
	line-height: 5mm;
	scrollbar-face-color:#79e0f7;
	scrollbar-shadow-color:#FFFFFF;
	scrollbar-highlight-color:#79e0f7;
	scrollbar-3dlight-color:#FFFFFF;
	scrollbar-darkshadow-color:#79e0f7;
	scrollbar-track-color:#46d5f5;
	scrollbar-arrow-color:#FFFFFF;
}
#container {
	position: relative;
	margin: 0px auto;
	width: 850px;
}

#layout_bg {
	float: left;
	width: 850px;
	height: 600px;
	background: url(images/layout_bg.jpg) no-repeat;
}

/* Topmenu */
.topmenu {
	float: left;
	height: 28px;
}
ul#topmenu {
	height: 28px;
	margin: 57px 0px 0px 446px;
}
ul#topmenu li {
	float: left;
	height: 100%;
}
ul#topmenu li a {
	display: block;
	height: 100%;
	text-indent: -999999999px;
	overflow: hidden;
}
ul#topmenu li a.top_beginpagina { width: 120px; background: url('images/beginpagina_off.gif') no-repeat top left; margin-right: 5px; }
ul#topmenu li a.top_beginpagina:hover { background: url('images/beginpagina_on.gif') no-repeat bottom left; }
ul#topmenu li a.top_deelnemen { width: 99px; background: url('images/deelnemen_off.gif') no-repeat top left; margin-right: 5px; }
ul#topmenu li a.top_deelnemen:hover { background: url('images/deelnemen_on.gif') no-repeat bottom left; }
ul#topmenu li a.top_prijzen { width: 75px; background: url('images/prijzen_off.gif') no-repeat top left; margin-right: 5px; }
ul#topmenu li a.top_prijzen:hover { background: url('images/prijzen_on.gif') no-repeat bottom left; }
ul#topmenu li a.top_contact { width: 90px; background: url('images/contact_off.gif') no-repeat top left; margin-right: 5px; }
ul#topmenu li a.top_contact:hover { background: url('images/contact_on.gif') no-repeat bottom left; }


/* CONTENT */
#content {
 	position:absolute;
	top: 160px;
 	left: 225px;
 	height: 340px;
 	width: 560px;
 	background: #46d5f5 url(images/content_bg.gif) repeat-x top left;
 	overflow: auto; 	
 	text-align: left;
}

/* Bottom tekst */
.bottom_txt {
	margin: 475px 0px 0px 630px;
	color: #FFFFFF;
	font-weight: bold;
}
.bottom_txt a{
	color: #afe7ff;
	font-weight: bold;
	text-decoration: none;
}
.bottom_txt a:hover{
	color: #034968;
	font-weight: bold;
	text-decoration: none;
}

/* Input textarea en select */
input, textarea, select { 
	font-family: Tahoma; 
	font-size: 11px; 
	color: #15376E; 
	padding: 0px 2px 0px 2px;
	border-top: 1px solid #2a698f; 
	border-left: 1px solid #2a698f; 
	border-right: 1px solid #FFFFFF; 
	border-bottom: 1px solid #FFFFFF; 
	background: #c9ecff; 
}
.button { 
	font-family: Tahoma; 
	font-size: 11px; 
	color: #FFFFFF;
	font-weight: bold;
	border: none;
	width: 104px;
	height: 29px;
	background: #c9ecff url(images/button.gif) no-repeat; 
}



Aan de buttons ligt het dus niet want hij doet het met alle buttons. Het is gewoon altijd de eerste. Bedankt alvast.
 
Het lijkt erop dat er iets over die button heen staat. Maar zonder afbeeldingen is dat niet te zeggen.
Er staat in je html 'n serie fouten die ermee te maken kunnen hebben. O.a. 'n hele serie </td> en </tr> en </table> zonder openingstag. IE is daar nogal gevoelig voor.
Haal je pagina maar 'ns door de validator op http://validator.w3.org/
Als je de fouten repareert, doet hij het met 'n beetje geluk.
Anders graag 'n link naar de code, want zonder afbeeldingen is er niets van te zeggen.
 
In Firefox, Opera, Google Chrome (en dus waarschijnlijk ook in Safari) en Internet Explorer 6 is de knop in orde.
Maar die fouten zitten er nog in. Voor ik in Internet Explorer 8 ga kijken (is meer werk, staat op 'n andere machine), moeten eerst die fouten die de validator aangeeft eruit. Het kan prima dat daar de oorzaak van het probleem ligt, dus het heeft geen enkel nut te gaan zoeken naar 'n oplossing als die fouten er nog in zitten.
En aangezien het in al die andere browsers goed werkt, is er 'n hele grote kans dat het ook in IE 8 goed gaat als die fouten eruit zijn.
 
Moet de deur uit, even snel. Ga er maar vanuit dat die test klopt.
Je hebt inderdaad alles keurig afgesloten. Dat is ook het probleem: je hebt <table>, <td> en <tr> meerdere malen afgesloten, maar die zijn nergens geopend. Dat is wat de validator bedoelt met bijvoorbeeld
Line 41, Column 5: end tag for element "td" which is not open
Klik om te vergroten...
Van dat soort dingen kan 'n browser aardig op hol slaan.
 
het probleem is bij die lijnen niet dat je niet afsluit maar dat je niet opent. Er staan </td>, </table> in je html zonder de bijbehorende <td> en <table> (niet de enige fouten, dit zijnmmaar voorbeelden). Ook missen de alfsuitende body en html tag van je document.

Ik heb voor de aardigheid even je html valide gemaakt en hier bijgevoegd (gewoon even .txt in .html veranderen, het forum laat me geen html uploaden.) Ik zit hier o Linux dus ik kan niet voor je testen of hij nu wel werkt in IE8 maar het is in elk geval het proberen waard.
 

Bijlagen

Laatst bewerkt:
Hoi,

Bedankt voor de moeite. Ik heb het geplaats maar helaas zonder resultaat.

Zie:

http://www.ringbits.nl/prijsvraag

Hmmm ik heb echt geen idee meer nu.

Als ik de button beginpagina weg laat, is de button Deelnemen door de helft gedeeld.

:shocked::shocked:
 
Ik weet het niet zeker, maar misschien heb ik de oplossing. (Pech trouwens dat die fouten weghalen 't niet oplosten. Vaak is dat al voldoende.)
Je moet het maar even proberen. Voor mij is dat vrij veel werk omdat ik dan eerst alles van internet moet plukken. Werkt het niet, dan horen we 't wel.
(Lees eerst even de onderste oplossing voor je deze gaat proberen.)

Als je bij ul#topmenu li a de hoogte verandert van 100% naar 28px, lijkt het in alle browsers te werken. Dat lijkt 'n bug in IE 8, want er is geen enkele reden waarom hij 't zou halveren bij de eerste knop.

Bij nader inzien is er misschien wel 'n reden. Je hebt 'n negatieve text-indent van 999.999.999 px gegeven. Dat is ongeveer 1 miljoen monitors naast elkaar...
Firebug vertaalt dat naar 1e+9px. Google Chrome negeert het.
Ik vermoed dat dit de oorzaak is. Browsers gaan er waarschijnlijk vanuit dat 'n monitor iets minder breed is dan zo'n 300 kilometer (als ik me niet vergis, is 1 miljard px ongeveer zo breed).
Ik weet niet uit m'n hoofd of er 'n maximum is voor 't aantal px dat gebruikt mag worden. 't Zou best kunnen dat dat 'n veelvoud van 2 is en rond de 64.000 ligt.
'n Negatieve text-indent van -2000px is zat. Ik zou dit 'ns proberen, mogelijk is dan 't probleem opgelost.
En anders kun je wat hierboven staat proberen: die hoogte van 28px.
Als ook dat niet werkt, horen we 't wel.
 
Bedankt!!! De eerste methode werkte perfect en de tweede had geen resultaat.

Hartstikke bedankt!!
 
Mooi. Maar ik zou die text-indent toch wel even verminderen naar -2000px of zo, want zo'n groot getal is beslist niet gezond voor 'n browser.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan