login  Naam:   Wachtwoord: 
Registreer je!
 Forum

display block fout in IE (Opgelost)

Offline marten - 09/11/2007 10:15 (laatste wijziging 09/11/2007 12:02)
Avatar van martenBeheerder Hey,

ik heb een css menu gemaakt. Deze wil ik over de hele breedte van het menu hebben. Deze heb ik dus een display block gegeven. In Firefox gaat dit wel goed. Maar in IE komt er een blauwe rand aan de linker kant.

Er staat nergens een padding-left. Zowel in de menu items niet en ook niet in de bovenliggende div's als het menu of de container.

De volgende afbeelding is goed:
http://194.123.100.201/test/marten/goed.jpg

De volgende afbeelding is fout:
http://194.123.100.201/test/marten/fout.jpg

Het is de volgende html code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. div id="menu">
  2. 		<li><a href="./?route=index" class="menu_hoofdnormal">Home</a></li>
  3.  
  4. 		<li><a href="./?route=nieuws" class="menu_hoofdnormal">Nieuws</a></li>
  5.  
  6. 		<li><a href="./?route=produkten" class="menu_hoofdnormal">Produkten</a></li>
  7.  
  8. 		<li><a href="./?route=sectoren" class="menu_hoofdnormal">Sectoren</a></li>
  9.  
  10. 		<li><a href="./?route=contact" class="menu_hoofdselected">&raquo; Contact</a></li>
  11.  
  12. 			<li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=13>email</a></li><li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=14>vestigingen</a></li><li class="submenu"><a class="menu_normal" href=?route=contact/submenu&subpage=15>teeltadviseurs</a></li>
  13. 		<li><a href="./?route=agunie" class="menu_hoofdnormal">Agrarische Unie</a></li>
  14.  
  15.     </div>


Dit is de css file:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu {
  2. 	position:			relative;
  3. 	float:				left;
  4. 	color: 				#001D39;
  5. 	width:				142px;
  6. 	padding-top:		95px;
  7. 	background-color:	#124982;
  8.  
  9. }
  10.  
  11. .menu_hoofdnormal {
  12. 	color: 				#FFF;
  13. 	display:			block;
  14. 	text-align:			right;
  15. 	height:				20px;
  16. 	padding-right:		10px;	
  17. 	padding-top:		4px;
  18. }
  19.  
  20. li {
  21. 	text-align:			right;
  22. 	list-style-type: 	none;
  23. 	display:			block;
  24.  
  25. 	height:				20px;
  26. }
  27.  
  28. .menu_hoofdselected {
  29. 	color:				#FFF;
  30. 	font-weight:		700;
  31. 	display:			block;
  32. 	background-color:	#54a421;
  33. 	text-align:			right;
  34. 	height:				20px;
  35. 	padding-right:		10px;
  36. 	padding-top:		4px;
  37. }
  38.  
  39. a {
  40. 	text-decoration:	none;
  41. }
  42.  
  43. li.submenu {
  44. 	display:			block;
  45. 	background-color:	#bbdba6;
  46. 	height:				20px;
  47. 	color:				#124982;
  48. 	padding-right:		10px;
  49. }
  50.  
  51. .menu_normal {
  52. 	color: 				#124982;
  53. 	display: 			block;
  54. }
  55.  
  56. .menu_selected {
  57. 	color:				#124982;
  58. 	font-weight:		700;
  59. 	white-space: 		nowrap;
  60. 	display:			block;
  61. }


Er zit een padding-right in van 10px om de code een beetje te scheiden van de rechter kant. Misschien dat in combinatie met het border box model niet goed is. Wie heeft er een oplossing om de blauwe rand aan de linker kant dus weg te halen? Als ik de breedte opgeef van zo'n item dan vergroot hij aan de rechter kant.

Bij voorbaat dank,

Oplossing

UL tag om de li zetten. En deze een padding-left meegeven van -40px; en in de menu div een overflow-x: hidden meegeven

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.17s