Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z wyświetlaniem boksów
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Drakula
25.12.2008, 17:26:34
Witam,
mam taki problem, pod IE mi boksy informacyjne na stronie wyswietla ok. Pod Opera jest troche gorzej, a pod Firefoxem poprostu masakra...

http://grojeckie.info/new/menu_prawe.html

[HTML] pobierz, plaintext 
  1. <HTML>
  2. <HEAD>
  3. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
  4. <link rel="stylesheet" href="sheet.css" type="text/css" />
  5.   <!--[if IE]>
  6.   <link rel="stylesheet" href="sheet2.css" type="text/css" />
  7.   <![endif]-->
  8. <script type="text/JavaScript" src="zmianaobrazkow.js"></SCRIPT>
  9. </HEAD>
  10. <BODY> 
  11.  
  12.  <div class="naglowek1"></div>
  13. <div id="boks1">	
  14.  <div class="boks2wiadomosci">Święto odzyskania Niepodległości</div>
  15.  <div class="boks3"><IMG SRC="images/obrazek3.jpg" WIDTH="90" HEIGHT="70" BORDER="0" ALIGN="LEFT" /><A HREF="">Burmistrz Gminy i Miasta Grójec zaprasza na Uroczystości Obchodów Rocznicy Odzyskania przez Polskę Niepodległości.</A></div>
  16.  <div class="boks4">
  17.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> <A HREF="">Zawiadomienie o Sesji Rady Powiatu</A> <br>
  18.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Nowa siedziba PUP w czerwcu <br>
  19.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Piraci poszli z torbami <br>
  20.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Głupi żart kary wart <br>
  21.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Morawscy odzyskali klucz do pałacu<br> 
  22.  </div>
  23. </div>
  24.  
  25.  
  26.  <div class="naglowek2"></div>
  27. <div id="boks1">	
  28.  <div class="boks2sport">Nagroda Imienia Bartosza</div>
  29.  <div class="boks3"><IMG SRC="images/obrazek.jpg" WIDTH="90" HEIGHT="70" BORDER="0" ALIGN="LEFT" /><A HREF="">Już po raz trzeci rozdano Nagrody Imienia Bartosza Kizierowskiego. Tegorocznymi laureatami zostali Agata Mróz-Olszewska (pośmiertnie) oraz Bogdan Wenta.</A></div>
  30.  <div class="boks4">
  31.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> <A HREF="">ALPS: przedświąteczne mecze</A> <br>
  32.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Piłkarski weekend w Jasieńcu <br>
  33.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> MazowszeGrojec.pl: Plebiscyt 2008<br>
  34.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Dzieci w maskach<br>
  35.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Ważą się losy trenera Seremaka<br> 
  36.  </div>
  37. </div>
  38.  
  39.  
  40.  
  41.  <div class="naglowek3"></div>
  42.  
  43. <div id="boks1">	
  44.  <div class="boks2kultura">DKF "Jasminum": Na krawędzi nieba (reż. Fatih Akin)</div>
  45.  <div class="boks3"><IMG SRC="images/obrazek2.jpg" WIDTH="90" HEIGHT="70" BORDER="0" ALIGN="LEFT" /><A HREF="">Na kolejnym spotkaniu Dyskusyjnego Klubu Filmowego "Jasminum" działającego w Grójeckim Ośrodku Kultury zaprezentujemy Państwu jeden z najlepszych europejskich filmów roku 2007 pt. NA KRAWĘDZI NIEBA. Szczególne uznanie zdobył scenariusz autorstwa słynnego, tureckiego reżysera Fatiha Akina. Złota Palma w Cannes i nagroda Europejskiej Akademii Filmowej są zapewne wystarczającą rekomendacją tego dzieła. Hollywood Reporter: "Bardzo złożony i poruszający dramat o walce, jaką jest życie, pełne niezwykłych zbiegów okoliczności i sytuacji, w których mijamy się o krok." ZAPRASZAMY!!!</A></div>
  46.  <div class="boks4">
  47.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> <A HREF="">ALPS: przedświąteczne mecze</A> <br>
  48.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Piłkarski weekend w Jasieńcu <br>
  49.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> MazowszeGrojec.pl: Plebiscyt 2008<br>
  50.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Dzieci w maskach<br>
  51.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Ważą się losy trenera Seremaka<br> 
  52.  </div>
  53. </div> 
  54.  
  55.  
  56.  
  57.   <div class="naglowek4"></div>
  58. <div id="boks1">	
  59.  <div class="boks2publicystyka">Remont traktu już w czerwcu</div>
  60.  <div class="boks3"><IMG SRC="images/obrazek4.jpg" WIDTH="90" HEIGHT="70" BORDER="0" ALIGN="LEFT" /><A HREF="">Z początkiem wakacji ruszy modernizacja drogi Grójec - Goszczyn.</A></div>
  61.  <div class="boks4">
  62.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> <A HREF="">ALPS: przedświąteczne mecze</A> <br>
  63.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Piłkarski weekend w Jasieńcu <br>
  64.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> MazowszeGrojec.pl: Plebiscyt 2008<br>
  65.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Dzieci w maskach<br>
  66.  <IMG SRC="images/kropka_menu.jpg" WIDTH="7" HEIGHT="9" BORDER="0"> Ważą się losy trenera Seremaka<br> 
  67.   </div>
[HTML] pobierz, plaintext



sheet.css
[XML] pobierz, plaintext 
  1. .naglowek1 {
  2.             background-image: url(images/prawe_wiadomosci.jpg);
  3.         width: 35px;
  4.             height: 23px; 
  5.           background-repeat: no-repeat;   
  6.              margin: 2 0 3px;             
  7. }
  8.  
  9. .naglowek2 {
  10.             background-image: url(images/prawe_sport.jpg);
  11.         width: 350px;
  12.             height: 23px; 
  13.           background-repeat: no-repeat;   
  14.              margin: 2 0 3px;             
  15. }
  16.  
  17. .naglowek3 {
  18.             background-image: url(images/prawe_kultura.jpg);
  19.         width: 350px;
  20.             height: 23px; 
  21.           background-repeat: no-repeat;   
  22.              margin: 2 0 3px;             
  23. }
  24.  
  25. .naglowek4 {
  26.             background-image: url(images/prawe_publicystyka.jpg);
  27.         width: 350px;
  28.             height: 23px; 
  29.           background-repeat: no-repeat;   
  30.              margin: 2 0 3px;             
  31. }
  32.  
  33. #boks1 {        
  34.         background-color: EBEDEA;
  35.         background-repeat: no-repeat;
  36.         width: 350px;
  37.         font-family: Tahoma;
  38.         font-size: 11;
  39.         text-align: justify;        
  40.         margin: 0 0 10px;            
  41.         padding-top: 5;
  42.         padding-bottom: 5;
  43.         padding-right: 10;
  44.         padding-left: 10;
  45. }
  46.  
  47. #boks1 .boks2wiadomosci {
  48.         font-family: Tahoma;
  49.         font-size: 11;
  50.         font-weight: bold;
  51.         vertical-align: baseline;
  52.         text-align: justify;
  53.         color: #B15252;
  54. }
  55.  
  56. #boks1 .boks2sport {
  57.         font-family: Tahoma;
  58.         font-size: 11;
  59.         font-weight: bold;
  60.         vertical-align: baseline;
  61.         text-align: justify;
  62.         color: #2874C7;
  63. }
  64.  
  65. .boks2kultura {
  66.         font-family: Tahoma;
  67.         font-size: 11;
  68.         font-weight: bold;
  69.         vertical-align: baseline;
  70.         text-align: justify;
  71.         color: #C78628;
  72. }
  73.  
  74. #boks1 .boks2publicystyka {
  75.         font-family: Tahoma;
  76.         font-size: 11;
  77.         font-weight: bold;
  78.         vertical-align: baseline;
  79.         text-align: justify;
  80.         color: #185A13;
  81. }
  82.  
  83. #boks1 .boks3 {
  84.         float: left;
  85.         overflow: visible;
  86.         font-family: Tahoma;
  87.         font-size: 11;
  88.         vertical-align: baseline;
  89.         text-align: justify;
  90. }
  91.  
  92. #boks1 .boks4 {
  93.         padding-right: 0;
  94.         padding-left: 0;
  95.         float: left;
  96.         overflow: visible;
  97.         font-family: Tahoma;
  98.         font-size: 11;
  99.         vertical-align: baseline;
  100.         text-align: justify;
  101. }
[XML] pobierz, plaintext


prosze o pomoc, jak to poprawic?
Gryf
25.12.2008, 20:37:07
ehh...
Przede wszystkim daj DOCTYPE zmień kodowanie na utf-8
wszystkie style daj do css'a i zacznij pisać zgodnie z logiką
identyfikator ma być niepowtarzalny a ja widzę 4x"boks1"
a każdemu z głównych pojemników daj clear:both;
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.