login  Naam:   Wachtwoord: 
Registreer je!
 Forum

FF en IE7

Offline suniltje - 21/03/2008 16:31
Avatar van suniltjeNieuw lid Hey ik ben bezig met het maken van een layout met css.
Nou heb ik een balkje gemaakt en daarin komt een horizontaal menu.
Ik wil in de balkje de menu ong in het midden weergeven zeg maar met padding en margin werken. Als ik padding gebruik dan doet FF iets raars want die telt dan zeg maar het aantal pixels gewoon op bijv.

ALs de code is:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu  {
  2.    height: 30px;
  3.    text-align: center;
  4.  }


En als ik dan een link erin zet komt ie in het midden helemaal bovenaan. En dan doe ik dit:


css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu   {
  2.    height: 30px;
  3.    text-align: center;
  4.    padding-top: 4px;
  5.  }


Bij IE doet ie het goed dan gaat de link 4 px naar beneden maar bij FF telt ie er gewoon 4 px op bij de 30 px van bovenaf. Hoe moet je dit goed doen?

2 antwoorden

Gesponsorde links
Offline gothmog - 21/03/2008 17:51
Avatar van gothmog Lid Het is normaal dat die 4 pixels erbij worden opgeteld. Dus maak je van de height niet 30 maar 26
Offline suniltje - 21/03/2008 22:32 (laatste wijziging 22/03/2008 03:32)
Avatar van suniltje Nieuw lid oke maar kijk naar deze website ff heb daar die layout ff geupload:

website

bekijk ze in FF en IE7

is er geen andere manier om die layout zo te zetten dat die menu balk in allebei hetzelfde is?

Ik ging nog ff door en als jullie eenmaal naar die website kijken zullen jullie zien dat het nu helemaal gek doet die IE7 ik snap er nix meer van.

Dit is de css:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. /****************************************
  2. Auteur: Sunil Kisoensingh
  3. Website: http://www.remixfactory.nl
  4. Copyright: 2008 Alle Rechten Voorbehouden
  5. *****************************************/
  6.  
  7.  
  8. *		{
  9. 	margin: 0;
  10. 	padding: 0;
  11. 	}
  12.  
  13. body	{
  14. 	background: #fff url('img/bg.gif');
  15. 	font-family: Tahoma;
  16. 	font-size: 12px;
  17. 	color: #212121;
  18. 	text-align: center;
  19. 	}
  20.  
  21. .wrapper	{
  22. 	background-color: #fff;
  23. 	border: 1px solid #333;
  24. 	min-height: 860px;
  25. 	width: 760px;
  26. 	margin: auto;
  27. 	margin-top: 10px;
  28. 	margin-bottom: 10px;
  29. 	text-align: left;
  30. 	}
  31.  
  32. * html .wrapper	{
  33. 	height: 860px;
  34. 	}
  35.  
  36. .header		{
  37. 	background-color: #eee;
  38. 	height: 100px;
  39. 	width: 760px;
  40. 	border-bottom: 1px solid #333;
  41. 	text-align: left;
  42. 	}
  43.  
  44. .menu		{
  45. 	background-color: #3399cc;
  46. 	height: 24px;
  47. 	width: 760px;
  48. 	border-bottom: 1px solid #333;
  49. 	text-align: center;
  50. 	color: #fff;
  51. 	padding-top: 4px;
  52. 	}
  53.  
  54. a:link, a:visited	{
  55. 	color: #ffffff;
  56. 	text-decoration: none;
  57. 	}
  58.  
  59. a:hover		{
  60. 	color: #000000;
  61. 	text-decoration: underline;
  62. 	}
  63.  
  64. .zoeken		{
  65. 	background-color: #eee;
  66. 	height: 35px;
  67. 	width: 760px;
  68. 	border-bottom: 1px solid #333;
  69. 	text-align: right;
  70. 	color: #000000;
  71. 	}
  72.  
  73. .nieuws		{
  74. 	background-color: #fff;
  75. 	height: 150px;
  76. 	width: 400px;
  77. 	border: 1px solid #333;
  78. 	text-align: left;
  79. 	margin-top: 5px;
  80. 	margin-left: 5px;
  81. 	color: #000000;
  82. 	}
  83.  
  84. .nieuwsb	{
  85. 	background-color: #eee;
  86. 	height: 20px;
  87. 	width: 400px;
  88. 	border-bottom: 1px solid #333;
  89. 	text-align: left;
  90. 	}
  91.  
  92. .nieuwst	{
  93. 	margin-top: 5px;
  94. 	margin-left: 5px;
  95. 	}
  96.  
  97. .video		{
  98. 	float: right;
  99. 	background-color: #fff;
  100. 	height: 300px;
  101. 	width: 340px;
  102. 	border: 1px solid #333;
  103. 	text-align: center;
  104. 	margin-top: 5px;
  105. 	margin-left: 10px;
  106. 	margin-right: 5px;
  107. 	}
  108.  
  109. .uploaden	{
  110. 	background-color: #fff;
  111. 	height: 145px;
  112. 	width: 400px;
  113. 	color: #000000;
  114. 	text-align: center;
  115. 	margin-top: 5px;
  116. 	margin-left: 5px;
  117. 	border: 1px solid #333;
  118. 	}


Dit is de html:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <title>RemixFactory: De Jongste Muziek Site Van Nederland...</title>
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. </head>
  8.  
  10.   	<div class="wrapper">
  11. 		<div class="header"></div>
  12. 		<div class="menu"><strong><a href="index.php">Home</a></strong></div>
  13. 		<div class="zoeken"></div>
  14. 		<div class="video"></div>
  15. 		<div class="nieuws">
  16. 			<div class="nieuwsb"><font class="nieuwst"><strong>Nieuws</strong></font></div>
  17. 		</div>
  18. 		<div class="uploaden"></div>
  19. 	</div>
  20. </body>
  21. </html>


Ik heb dat tweede probleem opgelost maar ik ben nog steeds benieuwd als ik niet iets kan doen om de layout in FF als in IE hetzelfde te laten uitzien zonder kleine afwijkingen enz.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.196s