Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]rozjeżdżające się zakładki
Forum PHP.pl > Forum > Przedszkole
ABDOO
14.06.2014, 11:14:50
Witam,
układ dwóch zakładek zrobionych na input radio w fierefoxie doprowadza do najeżdżania label na div z treścią, a w chromie się rozjeżdża tworząc minimalną, ale jednak lukę O_o
Ktoś coś może widzi, czego ja nie widzę, co pomogłoby zlikwidować problem

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .tabs {
  5.       position: relative;   
  6.       height: 300px; /* This part sucks */
  7.       clear: both;
  8.       margin: 25px 0;
  9.     }
  10.     .tab {
  11.       float: left;
  12.     }
  13.     .tab label {
  14.       background: rgba(113, 139, 176, 0.8); 
  15.       padding: 8px 50px; 
  16.       border: 0px solid rgba(48, 80, 127, 0.5); 
  17.       margin-right: 15px; 
  18.       margin-left: -1px;
  19.       position: relative;
  20.       left: 1px; 
  21.     }
  22.     .tab [type=radio] {
  23.       display: none;   
  24.     }
  25.     .content {
  26.       position: absolute;
  27.       display:none;
  28.       top: 28px;
  29.       left: 0;
  30.       background: rgba(48, 80, 127, 0.8);
  31.       right: 0;
  32.       bottom: 0;
  33.       padding: 0px 20px;
  34.       border: 0px solid #30507f; 
  35.     }
  36.     [type=radio]:checked ~ label {
  37.       background: rgba(48, 80, 127, 0.8);
  38.       border-bottom: 0px solid rgba(48, 80, 127, 0.8);
  39.       z-index: 2;
  40.  
  41.     }
  42.     [type=radio]:checked ~ label ~ .content {
  43.       z-index: 1;
  44.       display:block
  45.     }
  46.  
  47. </style>
  48. </head>
  49. <body>
  50. <div class="tabs">
  51.  
  52.        <div class="tab">
  53.            <input type="radio" id="tab-1" name="tab-group-1" checked>
  54.            <label for="tab-1">BUY</label>
  55.  
  56.            <div class="content">
  57.                		<jdoc:include type="modules" name="buy" style="xhtml" />
  58.  
  59.            </div> 
  60.        </div>
  61.  
  62.        <div class="tab">
  63.            <input type="radio" id="tab-2" name="tab-group-1">
  64.            <label for="tab-2">RENT</label>
  65.  
  66.            <div class="content">
  67.               <jdoc:include type="modules" name="rent" style="xhtml" />
  68.            </div> 
  69.        </div>
  70. </body>
  71. </html>
[HTML] pobierz, plaintext




fate
14.06.2014, 19:58:41
zrobić font-size w px
ABDOO
16.06.2014, 10:08:36
pomogło ustawienie wysokości dla elementu label i dodanie display:inline-block smile.gif
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.