login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Tabs

Offline BladiN - 21/07/2005 20:43 (laatste wijziging 21/07/2005 23:54)
Avatar van BladiNGouden medailleGouden medaille

Grafische gevorderde		 Hmm ik zit met een aanzienlijk probleem met IE (zoals gewoonlijk -_-)
als je naar http://www.aycewebdesign.com/v3 gaat in beide FF en IE, zie je dat in IE van de 'up' button boven 2px is afgesneden, en links en rechts 1px. Ik vind dit zelf vaag :S want margin negatief moet toch gewoon werken?

Mijn CSS
php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* Navigation */
  2. .nav-bar {
  3.         position: relative;
  4.         margin-left: 1px;
  5.         height: 22px;
  6. }
  7. .nav-bar ul {
  8.         list-style-type: none;
  9.         margin: 0;
  10.         padding: 0;
  11. }
  12. .nav-bar ul li {
  13.         display: inline;
  14.         margin: 0;
  15.         padding: 0;
  16. }
  17. .nav-bar ul li a.down {
  18.         float: left;
  19.         background-image: url("gfx/button-down.gif");
  20.         background-repeat: no-repeat;
  21.         font-size: 10px;
  22.         font-weight: bold;
  23.         text-align: center;
  24.         text-transform: uppercase;
  25.         padding-top: 6px;
  26.         width: 100px;
  27.         height: 20px;
  28. }
  29. .nav-bar ul li a:hover, .up {
  30.         float: left;
  31.         background-image: url("gfx/button-up.gif");
  32.         background-repeat: no-repeat;
  33.         font-size: 11px;
  34.         font-weight: bold;
  35.         text-align: center;
  36.         text-transform: uppercase;
  37.         padding-top: 6px;
  38.         margin-top: -2px;
  39.         margin-left: -1px;
  40.         margin-right: -1px;
  41.         width: 102px;
  42.         height: 27px;
  43. }


Mijn XHTML
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>AYCE Webdesign</title>
  5. <link rel="stylesheet" href="style.css" type="text/css" />
  6. <script type="text/javascript" src="javascript.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <div class="back-cont"><!-- Back-gradient --></div>
  11. <div class="text-cont">
  12.         <div class="nav-bar">
  13.                 <ul class="nav-list">
  14.                         <li id="active"><a id="current" class="up" href="#">Home</a></li>
  15.                         <li><a class="down" onMouseOver="changeTab(0);" onMouseOut="changeTab(1);" href="#">Services</a></li>
  16.                         <li><a class="down" onMouseOver="changeTab(0);" onMouseOut="changeTab(1);" href="#">AYCE</a></li>
  17.                         <li><a class="down" onMouseOver="changeTab(0);" onMouseOut="changeTab(1);" href="#">Portfolio</a></li>
  18.                 </ul>
  19.         </div>
  20. </div>
  21. </body>
  22.  
  23. </html>


Hoe kan ik dit oplossen?

1 antwoord

Gesponsorde links
Offline Metalhead - 22/07/2005 14:25
Avatar van Metalhead HTML gevorderde Margin is de afstand van de rand (uiterlijke object) tot de inhoud (innerlijke object) -> als je die negatief maakt kan het wel kloppen dat er iets weg valt, lijkt me...

Beter zou zijn om de padding van het innerlijke object negatief te maken...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s