Probleem met menu XHTML

**Kees -** · 15-03-2010, 20:21

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.

**Vicky Vandendriessche** · 16-03-2010, 14:47

Hallo,

ik heb even gekeken en uw code gebruikt in firebug maar het is moeilijk te zien omdat er geen afbeeldingen bij zitten.
Probeer anders met de hoogte van uw li en a in te stellen volgens de grootte van uw button.
Kijk even in firefox of het hetzelfde beeld geeft dan in internet explorer. Dat verschilt soms van browser tot browser.
u kunt het ook opsporen met firebug, een addon van firefox , heel handig :)

Met vriendelijke groet
Vicky Vandendriessche
ViTi Network

**Remi B** · 16-03-2010, 17:30

Beste,

In Google Chrome en Mozilla Firefox is dit probleem niet aanwezig. Het is dus weer een van de vervelende dingen van Internet Explorer. Echter, als u de eerste knop een height-attribuut toewijst en de height in het juiste aantal pixels opgeeft (28px), is dit probleem verholpen.

Met vriendelijke groet,

Remi B
Gracius.nl

Probleem met menu XHTML