Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xHTML] Przerwa pod IE
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Balas
18.09.2006, 18:21:40 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. #menu_left ul, #menu_right ul {
  8.   padding: 0;
  9.   margin: 0;
  10.   margin-bottom: 5px;
  11.   list-style: none;    
  12. }
  13.  
  14. #menu_left li, #menu_right li {
  15.   padding: 0;
  16.   margin: 0;
  17.   font-size: 12px;
  18. }
  19.  
  20. #menu_left a, #menu_right a {
  21.   display: block;
  22.   height: 17px;
  23.   margin: 0px;
  24.   padding: 0px 2px 0px 14px;
  25.   background: url('./menu_item.png');
  26.   background-color: #cc0000;
  27.   text-decoration: none;
  28.   color: #dddddd;
  29.   border: 0px;
  30. }
  31.  
  32.  
  33. #menu_left a:hover, #menu_right a:hover {
  34.   background: url('./menu_item2.png');
  35.   background-color: #ff0000;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40.     <div id="menu_left">
  41.         <h3>Jakies menu</h3>
  42.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  43.         <h3>Jakies menu</h3>
  44.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  45.         <h3>Jakies menu</h3>
  46.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  47.  
  48.     </div>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext


Pod Opera i FF dziala OK, pod badzIEwiem sa dodatkowo marginesy na 1px wokolo linkow :|
ano
18.09.2006, 19:12:01
Usuń
[XML] pobierz, plaintext 
  1. height: 17px;
[XML] pobierz, plaintext

z #menu_left a, #menu_right a.
(wysokość <a /> kontroluj za pomocą paddingów)
Balas
18.09.2006, 19:33:36
Wiedzialem ze cos przeoczylem winksmiley.jpg Dzieki :]


Teraz kolejny error, wysokosc pod IE jest stała... i nie da sie jej zmniejszyc

[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body {
  8.   margin: 0px;
  9.   padding: 0px;
  10.   margin-top: 20px;
  11.   margin-bottom: 20px;
  12.   font-family: Tahoma;
  13.   background: url('./bg.png');
  14. }
  15.  
  16. img {
  17.    behavior: url('pngbehavior.htc');
  18. }
  19.  
  20. #container {
  21.   margin: auto;
  22.   border: 1px solid #000000;
  23.   width: 915px;
  24.   background: url('./bg_all.png');
  25. }
  26.  
  27. #top_left {
  28.   float: left;
  29.   width: 266px;
  30.   height: 198px;
  31.   background: url('./logo_left.png');
  32.   border-right: 1px solid #000000;
  33. }
  34. #top_right {
  35.   float: left;
  36.   width: 648px;
  37.   height: 198px;
  38.   background: url('./logo_right.png');
  39. }
  40. #top_menu {
  41.   width: 915px;
  42.   height: 28px;
  43.   background: url('./top_menu.png');
  44.   border-top: 1px solid #000000;
  45.   border-bottom: 1px solid #000000;
  46.   clear: both;
  47. }
  48. #logo {
  49.   position: absolute;
  50.   width: 202px;
  51.   height: 261px;
  52.   margin-left: 30px;
  53.   top: 10px;
  54. }
  55.  
  56. #menu_left {
  57.   float: left;
  58.   width: 128px;
  59.   margin-right: 10px;
  60.   padding-top: 25px;
  61. }
  62.  
  63. #menu_right {
  64.   float: left;
  65.   width: 128px;
  66.   padding-top: 25px;
  67. }
  68.  
  69. #body {
  70.   float: left;
  71.   width: 648px;
  72.   border-left: 1px solid #000000;
  73. }
  74.  
  75. #footer {
  76.   height: 28px;
  77.   background: url('./footer.png');
  78.   border-top: 1px solid #000000;
  79.   clear: both;
  80. }
  81.  
  82. #menu_left h3, #menu_right h3 {
  83.   margin: 0px;
  84.   padding: 0px;
  85.   display: block;
  86.   font-size: 12px;
  87.   padding: 7px 4px 9px 4px;
  88.   color: #dddddd;
  89.   background: url('./header.png');
  90. }
  91.  
  92. #menu_left ul, #menu_right ul {
  93.   padding: 0;
  94.   margin: 0;
  95.   margin-bottom: 5px;
  96.   list-style: none;    
  97. }
  98.  
  99. #menu_left li, #menu_right li {
  100.   padding: 0;
  101.   margin: 0;
  102.   font-size: 12px;
  103. }
  104.  
  105. #menu_left a, #menu_right a {
  106.   display: block;
  107.   margin: 0px;
  108.   padding: 1px 2px 2px 14px;
  109.   background: url('./menu_item.png');
  110.   background-color: #cc0000;
  111.   text-decoration: none;
  112.   color: #dddddd;
  113. }
  114.  
  115.  
  116. #menu_left a:hover, #menu_right a:hover {
  117.   background: url('./menu_item2.png');
  118.   background-color: #ff0000;
  119. }
  120. </style>
  121. </head>
  122. <body>
  123. <div id="container">
  124.     <div id="top_left"></div>
  125.     <div id="top_right"></div>
  126.     <div id="top_menu"></div>
  127.     <div id="menu_left">
  128.         <h3>Jakies menu</h3>
  129.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  130.         <h3>Jakies menu</h3>
  131.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  132.         <h3>Jakies menu</h3>
  133.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  134.  
  135.     </div>
  136.     <div id="menu_right">
  137.                 <h3>Jakies menu</h3>
  138.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  139.         <h3>Jakies menu</h3>
  140.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  141.         <h3>Jakies menu</h3>
  142.         <ul><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li><li><a href="#">Link1</a></li></ul>
  143.  
  144.     </div>
  145.     <div id="body"></div>
  146.     <div id="footer"></div>
  147.     <div id="logo"><img src="./logo.png" style="width: 202px; height: 261px;" alt="</span>" /><<span style='color:blue'>/div>
  148. </div>
  149. </body>
  150. </html>
[XML] pobierz, plaintext
ano
21.09.2006, 14:53:42
Wyspokość czego? Wrzuć tą stronę na serwer, to będzie można zobaczyć co jest nie tak tongue.gif
Balas
21.09.2006, 21:27:42
http://konopa.info/lay/xxx.html //bez podanej wysokosci
http://konopa.info/lay/test2.html //z podana wysokoscia
ano
22.09.2006, 14:05:35
U mnie http://konopa.info/lay/test2.html wygląda identycznie pod Operą i IE - wygląda dobrze... powiedz o wysokość CZEGO Ci chodzi.
pomek
7.12.2006, 09:44:55 
[PHP] pobierz, plaintext 
  1. <?php
  2. * { 
  3.   margin: 0; 
  4.   padding: 0; 
  5. }
  6. ?>
[PHP] pobierz, plaintext


Wpisz to przed body, w arkuszu CSS, powinno zminimalizować odstęp...
mike
7.12.2006, 09:58:38
Przy liczbach w CSS są wymagane jednostki miar.
Kod
* {
  margin: 0px;
  padding: 0px;
}

Tylko trzeba pamiętać że to wyzeruje marginesy wszystkim elementom na stronie.
revyag
7.12.2006, 11:03:15
Ale po co pisać jednostkę przy zerze ? Nie powiesz mi chyba że 0px i 0em to inne zero smile.gif Nigdy nie słyszałem o tym żeby to było wymagane. Mógłbyś zarzucić jakimś linkiem który by potwierdzał to co napisałeś ? smile.gif
mike
7.12.2006, 11:12:03
Przy zerze nie owszem nie ma to większego znaczenia, ale takie coś generuje złe nawyki tongue.gif
Ktoś przeczyta i OK, potem zechce zmienić i dostawi sobie: margin: 9;
Ludzka głupota nie zna granic biggrin.gif

O jednostkach można śmiało poczytać tutaj: CSS3 Values and Units
Ale jestem przekonany ~revyag, że znasz ten link winksmiley.jpg
revyag
7.12.2006, 11:28:08
smile.gif
Interesował mnie tylko o ten konkretny przypadek.
W sumie masz racje, ale problem dotyczy raczej świeżo upieczonych "łebmajsterów" smile.gif


---
Wybacz że się dopiszę, ale już nie chcę nabijać postów OT.
Moja wcześniejsza uwaga to profilaktyka, wole od razu uczyć ludzi dobrze
niż potem wybijać z głowy jakieś głupoty i zaszłości.
~mike_mech
pomek
7.12.2006, 19:59:24
Cytat
Przy liczbach w CSS są wymagane jednostki miar.
www.kurshtml.boo.pl - doczytaj winksmiley.jpg
mike
9.12.2006, 09:20:52
Cytat(pomek @ 7.12.2006, 19:59:24 ) *
www.kurshtml.boo.pl - doczytaj winksmiley.jpg

Jak chcesz kogoś poprawić to zrób to jak należy, podałeś linka do całości kursu a powinieneś podać link do konkretnej rzeczy.
Tym bardziej, że sam sobie doczytaj tongue.gif bo najnormalniej w świecie nie masz racji.

Przy liczbach w CSS są wymagane jednostki miar.
Nie można sobie ich pomijać tam gdzie są wymagane.

Jednostki
Cytat
Jednostki długości stosuje się w bardzo wielu poleceniach dotyczących stylów, np. wielkość czcionki, marginesów czy rozmiary elementów itd. Format wartości długości składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki. Po wartości długości 0 jednostka jest opcjonalna.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.