Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: IE7 pokazuje poprawnie, pozostałe nie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
windman
23.10.2008, 16:52:17
Witam,

Napotkałem na dziwny błąd...

Mam element DIV CONTENT zawierający 2 inne. CONTENT_LEFT i CONTENT_RIGHT
CONTENT ma tlo koloru czerwonego tak. Niestety tło widoczne jest tylko pod IE! CONTENT_LEFT i CONTENT_RIGHT nie maja zdefiniowanego koloru tła więc powinno byc widoczne tło z CONTENT!

Podaję kod:

[HTML] pobierz, plaintext 
  1. <body>
  2.     <!-- CONTAINER -->
  3.     <div id="container">     
  4.  
  5.       <!-- HEADER -->
  6.       <div id="header"> 
  7.  
  8.         <!-- MENU_TOP -->
  9.         <div id="menu_top">
  10.  
  11.           <div id="menu_top_left"></div>
  12.  
  13.           <div id="menu_top_right"></div>
  14.  
  15.         </div>
  16.         <!-- MENU_TOP -->
  17.  
  18.         <!-- MENU_BOTTOM -->
  19.         <div id="menu_bottom"></div>
  20.         <!-- MENU_BOTTOM -->
  21.  
  22.       </div>
  23.       <!-- HEADER -->
  24.  
  25.  
  26.  
  27.       <!-- CONTENT -->
  28.       <div id="content">      
  29.  
  30.         <!-- CONTENT_LEFT -->
  31.         <div id="content_left"></div>
  32.         <!-- CONTENT_LEFT -->
  33.  
  34.  
  35.         <!-- CONTENT_RIGHT -->
  36.         <div id="content_right"></div>
  37.         <!-- CONTENT_RIGHT -->      
  38.  
  39.       </div>
  40.       <!-- CONTENT -->
  41.  
  42.  
  43.  
  44.  
  45.       <!-- FOOTER -->
  46.       <div id="footer">    
  47.  
  48.         <div id="footer_left">   
  49.           <p>&copy;2008 Möller-Tools</p>     
  50.         </div>
  51.  
  52.         <div id="footer_right"> </div>
  53.  
  54.       </div>
  55.       <!-- FOOTER -->   
  56.  
  57.  
  58.     </div>
  59.     <!-- CONTAINER -->
  60.  
  61.   </body>
[HTML] pobierz, plaintext


oraz CSS:
[HTML] pobierz, plaintext 
  1. body{
  2.   background-color: #fff;
  3.   background-image: url(../bilder/bg_body.gif);
  4.   background-repeat: repeat-x;
  5.   background-position: top;
  6.   margin:0;
  7.   padding:0;
  8.   font-family:verdana, arial;
  9.   font-size:12px;
  10.   color:#4e4e4e;  
  11. }
  12.  
  13. p{
  14.   margin:0;
  15.   padding:0;
  16.   margin-bottom:10px;
  17.   line-height:20px;
  18. }
  19.  
  20. h1{
  21.   margin:0;
  22.   padding:0;
  23.   margin-bottom:10px;
  24.   font-size: 18px;
  25.   color: #006699;
  26. }
  27.  
  28. a{
  29.   color:#006699;
  30.   text-decoration:none;
  31. }
  32.  
  33. a:hover{
  34.   color:#4e4e4e;
  35.   text-decoration:underline;
  36. }
  37.  
  38. #container{
  39.   width:965px;
  40.   margin:0 auto;  
  41.  
  42. }
  43.  
  44. #header{
  45.   width:100%;
  46.   height:174px;
  47. }
  48.  
  49. #content{
  50.   width:965px;
  51.   background-color:red;
  52. }
  53.  
  54. #content_left{
  55.   width:580px;
  56.   float:left;
  57.   margin-bottom:22px;
  58.   padding-left:58px;
  59.   padding-right:24px;
  60. }
  61.  
  62. #content_right{
  63.   width:221px;
  64.   float:right;
  65.   margin-bottom:22px;
  66.   padding-left:24px;
  67.   padding-right:58px;
  68. }
  69.  
  70.  
  71.  
  72. #footer{
  73.   clear:both;
  74.   width:100%;
  75.   height:34px;
  76.   background-image: url(../bilder/bg_footer.gif);
  77.   background-repeat: no-repeat;
  78.   background-position:top;  
  79.   font-family:arial;
  80.   font-size:11px;
  81. }
  82.  
  83. #footer_left{
  84.   float:left;
  85.   height:100%;
  86.   width:424px;
  87.   padding-top:15px;
  88.   padding-left:58px;
  89. }
  90.  
  91. #footer_right{
  92.   float:right;
  93.   height:100%;
  94.   width:425px;
  95.   text-align:right;
  96.   padding-top:15px;
  97.   padding-right:58px;
  98. }
  99.  
  100. #footer_right ul{
  101.   padding:0;
  102.   margin:0;
  103. }
  104.  
  105. #footer_right li{
  106.   display:inline;
  107.   padding:0;
  108.   margin:0;
  109.   margin-left:7px;
  110. }
  111.  
  112. #footer_right a{
  113.   color:#4e4e4e;
  114.   text-decoration:none;
  115. }
  116.  
  117. #footer_right a:hover{
  118.   color:#006699;
  119.   text-decoration:underline;
  120. }
  121.  
  122. #menu_top{
  123.   width:965px;
  124.   height:133px;
  125.   background-image: url(../bilder/bg_menu_top.gif);
  126.   background-repeat:no-repeat;
  127.   background-position:bottom;  
  128. }
  129.  
  130. #menu_top_left{
  131.   float:left;
  132.   width:326px;
  133.   height:100%;
  134. }
  135.  
  136. #menu_top_right{
  137.   float:right;
  138.   width:639px;
  139.   padding-top:90px;
  140. }
  141.  
  142. #menu_top_right ul{
  143.   padding:0;
  144.   margin:0;
  145. }
  146.  
  147. #menu_top_right li{
  148.   display:inline;
  149.   font-family:verdana;
  150.   font-size:15px;
  151.   font-weight:normal;
  152. }
  153.  
  154. #menu_top_right li a{
  155.   display:block;
  156.   float:left;
  157.   padding-top:10px;
  158.   padding-left:20px;
  159.   padding-right:20px;  
  160.   height:32px;
  161.   text-decoration:none;
  162. }
  163.  
  164. #menu_top_right li.menu_e1_activ a{
  165.   display:block;
  166.   float:left;
  167.   padding-top:10px;
  168.   padding-left:19px;
  169.   padding-right:19px;
  170.   border: solid 1px #cecece;
  171.   border-bottom:0;
  172.   color:#4e4e4e;    
  173.   background-color:#fff;
  174.   background-image: url(../bilder/bg_menu_top_a.gif);
  175.   background-repeat:repeat-x;
  176.   background-position:top;
  177.   text-decoration:none;
  178. }
  179.  
  180. #menu_top_right li.menu_activ a:hover{
  181.   text-decoration:none;
  182. }
  183.  
  184. #menu_bottom{
  185.   width:965px;
  186.   height:41px;
  187.   padding-top:8px;
  188.   text-align:center;
  189. }
  190.  
  191. #menu_bottom ul{
  192.   padding:0;
  193.   margin:0;
  194. }
  195.  
  196. #menu_bottom li{
  197.   display:inline;
  198.   font-family:verdana;
  199.   font-size:12px;
  200.   font-weight:normal;
  201.   margin-left:10px;
  202.   margin-right:10px;
  203. }
  204.  
  205. #menu_bottom li a{
  206.     display:inline;
  207.     font-family:verdana;
  208.     font-size:12px;
  209.     font-weight:normal;
  210.     margin-left:10px;
  211.     margin-right:10px;
  212.     text-decoration:none;
  213.     color:#4e4e4e;
  214. }
  215.  
  216. #menu_bottom li a:hover{
  217.     color:#006699;
  218. }
  219.  
  220. #menu_bottom li.menu_e2_activ a{
  221.     color:#006699;
  222. }
[HTML] pobierz, plaintext


Kodu trochę jest ale wystarczy odszukac wlasciwy identyfikator.
Jak znajdziecie chwilkę to zerknijcie.
grzesiek_g
23.10.2008, 17:04:04
Nie działa bo wewnętrzne elementy mają pływanie (float). Dodaj do content float:left - wtedy do header też będzie potrzebny float, bądź dla content daj overflow:hidden.
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.