login  Naam:   Wachtwoord: 
Registreer je!
 Forum

padding en margin in verschillende browsers

Offline Murderer - 14/01/2011 20:33 (laatste wijziging 14/01/2011 20:34)
Avatar van MurdererLid Ik ben bezig een website in elkaar te knutselen en in principe is het redelijk goed gegaan. Zie hier de website en hier het bijbehorende css stylesheet. Alleen loop ik tegen een vervelend probleem aan bij het controleren van de compatibiliteit in verschillende browsers.

In Firefox is de website nu eigenlijk precies zoals ik hem wil hebben. Een klein dingentje nog is dat de menu balk waarover deze thread zal gaan, nog niet helemaal gecentreerd is t.o.v. de elementen erboven en eronder. Aangezien die elementen wel mooi gecentreerd staan, moet het ook lukken met de menu balk.

Met de menubalk bedoel ik, voor de zekerheid, de horizontale tekst die begint met Home en eindigt met contact. Ik heb dit gedaan door er een list van te maken in een div element. Zoals je in FF kan zien, is het eigenlijk precies zoals ik wil. In IE en Chrome is dit echter nog niet het geval. Andere browsers heb ik nog niet gecontroleerd. In IE geeft het nav id niet dezelfde margin onder als boven, terwijl ik dit volgens mij wel heb meegegeven. Er is dus geen ruimte tussen het 'twitter-element' en het 'facebook-element' terwijl ik dit wel wil. In chrome en ff gaat dit wel goed. Hoe komt dat?

Het andere probleem zit vreemd genoeg alleen in Chrome. Zoals je kan zien maak ik in het menu, de lijst gebruik van een a:hover. Als je met de muis over de tekst (die hyperlinks zijn) heengaat verandert de achtergrond kleur en tekst. Zoals je in FF en IE kan zien heb ik hier padding en line-height eigenschappen aan meegegeven zodat de achtergrondkleur aan de boven- en zijkanten verder doorloopt. Op een of andere manier stopt de achtergrondkleur in Chrome echter bij de laatste letter. Ik heb hier al uren aan besteed maar kom er maar niet achter. Kunnen jullie me helpen bij bovenstaande problemen? Ik hoop het!

Ik hoor het graag.

Als er meer duidelijkheid nodig is, hoor ik het graag. Hieronder nog de codes waar het precies om gaat.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="header">
  2.  
  3. 				<a href="index.php?p=1" class="logo">
  4. 					<div id="logo">
  5. 					</div>
  6. 					<div id="subtitel">
  7. 					</div>
  8. 				</a>
  9.  
  10. 			</div>
  11.  
  12. 			<div id="menu">
  13.  
  14. 				<div id="nav">
  15. 					<ul><li class="nav1">
  16. 						<a href="index.php?p=1">
  17. 							Home
  18. 						</a>	
  19. 					</li>
  20. 					<li>
  21. 						<a href="index.php?p=2">	
  22. 							Wie ben ik?
  23. 						</a>
  24. 					</li>
  25. 					<li>
  26. 						<a href="index.php?p=3">
  27. 							Wat kan ik voor u betekenen?
  28. 						</a>
  29. 					</li>
  30. 					<li>
  31. 						<a href="index.php?p=4">
  32. 							Gepubliceerde titels
  33. 						</a>
  34. 					</li>
  35. 					<li>
  36. 						<a href="index.php?p=5">
  37. 							Contact
  38. 						</a>
  39. 					</li></ul>
  40. 				</div>
  41.  
  42. 			</div>
  43.  
  44. 			<div id="belly">
  45.  
  46. 				<div id="twitwid">
  47. 					<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
  48. 					<script type="text/javascript" src="includes/twitwid.js"></script>
  49. 				</div>
  50.  
  51. 				<div id="content">
  52. 					<?php
  53. 					$p = $_GET['p'];
  54.                       if(isset($p)){
  55. 					  if($p == "1"){
  56.                       include("home.php");
  57.                       }
  58. 					  if($p == "2"){
  59. 					  include("about.php");
  60. 					  }
  61. 					  if($p == "3"){
  62. 					  include("prod.php");
  63. 					  }
  64. 					  if($p == "4"){
  65. 					  include("pub.php");
  66. 					  }
  67. 					  if($p == "5"){
  68. 					  include("contact.php");
  69. 					  }
  70. 					  } else {
  71. 				      include("home.php");
  72. 					  }
  73. 					?>
  74. 				</div>
  75.  
  76. 				<div id="footer">
  77. 					<a href="index.php">Wijnplezier.nl</a> is een website van wijnjournalist <a href="index.php?p=2">Gert Crum</a> 
  78. 					| &copy; Copyright 2003 - 2011 | 
  79. 					Deze website is gemaakt door <a href="http://www.bartcrum.com/" target="_blank">Bart Crum</a>
  80. 				</div>
  81.  
  82. 			</div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu {
  2. width: 1024px;
  3. margin: auto;
  4. border-top: 2px dotted #453734;
  5. }
  6. #nav {
  7. position: relative;
  8. float: left;
  9. margin: 20px 0;
  10. width: 100%;
  11. }
  12. #nav ul {
  13. margin: 0;
  14. float: left;
  15. list-style-type: none;
  16. }
  17. #nav li {
  18. line-height: 50px;
  19. text-align: center;
  20. height: 50px;
  21. float: left;
  22. }
  23. #nav li a {
  24. font-size: 21px;
  25. font-weight: bold;
  26. padding: 15px 25px;
  27. color: #453734;
  28. text-decoration: none;
  29. }
  30. #nav li a:hover {
  31. background-color: #9e2e3e;
  32. color: white;
  33. }
  34. #belly {
  35. width: 1024px;
  36. margin:0 auto 20px auto;
  37. }

2 antwoorden

Gesponsorde links
Offline Kevin - 15/01/2011 15:58
Avatar van Kevin Crew Ajax/REST Afhankelijk ook van welke versie van IE, is de kans groot dat je last hebt van de dubbele-margin bug. Deze was dacht ik voornamelijk in IE7 van toepassing.
Je kan dit oplossen door op je verspringend element een "display: inline" te gebruiken.
Offline Realtec - 15/01/2011 19:05
Avatar van Realtec HTML interesse Daarnaast ff de juiste doctype gebruiken dat wil ook wel is helpen.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s