Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Poprawność vs. FireFox, wyśrodkowanie..., float: left działa, ale bez tego... :(
strife
post
Post #1





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

Ostrzeżenie: (0%)
-----

Witam,

Najpierw pozwolicie że umieszczę poniżej kod, zanim przejdę do rzeczy:

style.css
[XML] pobierz, plaintext 
  1. body{
  2.  
  3.  background: white;
  4.  margin: auto;
  5.  font-family: Verdana;
  6.  font-size: 12px;
  7.  
  8. }
  9.  
  10. #center{
  11.  
  12.  
  13.   float: left;
  14.   margin: auto;
  15.   border: solid 1px;
  16.   padding: 2px 2px 2px 2px;
  17.   width: 500px;
  18.  
  19. }
  20.  
  21. #Mheader{
  22.  
  23.  
  24.  margin-bottom: 10px;
  25.  background-color: #F0F0F0;
  26.  border: solid 1px;
  27.  border-color: black;
  28.  padding-left: 4px;
  29.  padding-right: 4px;
  30.  padding-bottom: 2px;
  31.  padding-top: 2px;
  32.  
  33.  
  34.  
  35. }
  36.  
  37. #MMenu{
  38.  
  39.    float: left;
  40.  
  41. }
  42.  
  43. #MTopic{
  44.  
  45.  margin-left: 4px;
  46.  background-color: #F0F0F0;
  47.  border: solid 1px;
  48.  border-color: black;
  49.  padding-left: 4px;
  50.  padding-right: 4px;
  51.  padding-bottom: 2px;
  52.  padding-top: 2px;
  53.  width: 100px;
  54.  
  55. }
[XML] pobierz, plaintext


index.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <title>Test</title>
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body >
  10.  
  11. <div id="center">
  12.         <div id="Mheader">
  13.          Header
  14.         </div>
  15.  
  16.         <div id="MMenu">
  17.                 <div id="MTopic">
  18.                     Menu
  19.                 </div>
  20.         </div>
  21.  
  22.          <div id="MMenu">
  23.                 <div id="MTopic">
  24.                     Menu
  25.                 </div>
  26.         </div>
  27.  
  28. </div>
  29. </body>
  30. </html>
[HTML] pobierz, plaintext


Tak więc chodzi mi aby kolumny Menu były koło siebie, aby to zrobić użyłem:
[XML] pobierz, plaintext 
  1. float: left;
[XML] pobierz, plaintext


Jest wszystko dobrze na Operze i IE, ale po włączeniu FireFox'a obramowanie zawarte w:
[XML] pobierz, plaintext 
  1. #center{
  2.   margin: auto;
  3.   border: solid 1px;
  4.   padding: 2px 2px 2px 2px;
  5.   width: 500px;
  6. }
[XML] pobierz, plaintext

Nie obejmuje całej treści, problem udało mi się rozwiązać wpisując właśnie w #center, float: left; - ale po takiej operacji centrowanie strony juz nie działa...

Jeśli ktoś wie jak temu zaradzić, a konkretniej jak usunąć ten problem z Firefox'a będe wdzięczny.

Pozdrawiam!

BTW.

Przepraszam że tak długo...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
yavaho
post
Post #2





Grupa: Zarejestrowani
Postów: 449
Pomógł: 0
Dołączył: 26.05.2004
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

Uważam ze wszystko sie miesza z powodu "padding".
Jezeli uzywasz tego stylu do elementow blokowych(div, span, itp) to rozne przegladarki roznie to interpretuja. Dla IE paddind to jest wewnetrzy margines od krawedzi bloku, Netscape znowu powieksza caly blok o wartosc jaka jest w padding, a Opera nawet odsuwa tekst od krawedzi bloku o wartosc 2x wieksza niz wartosc w padding.
Dla mnie to jest nienormalne bo wkoncu mamy jakiś standard. Ale aby strona wygladala normalnie we wszystkich przegladarkach to trzeba czasem rezygnowac z pewnych stylow.
A wiec tak: nie uzywaj "padding" dla elementow blokowych (div, span). Uzywaj tego stylu dla tekstu i obrazkow.

Ponizej jest taki prosty przyklad gdzie w jednym miejscu jest okreslony styl tekstu i bloku w ktorym znajduje sie wlasnie ten tekst.
Na kazdej przegladarce inaczej to wyglada (IE, Netscape, Opera) a wiec ktora z nich to prawidłowo wyświetla :?:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. .blok {
  6.   background:#0000ff;
  7.   width:100px;
  8.   height:100px;
  9.   padding:20px;
  10.   margin:50px;
  11.   font-size:14pt;
  12.   color:#93d5fa;
  13. }
  14. -->
  15. </style>
  16. </head>
  17. <body>
  18.    <div class="blok">
  19.        <p>przykładowy tekst</p>
  20.    </div>
  21. </body>
  22. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- strife   Poprawność vs. FireFox, wyśrodkowanie...   15.02.2005, 22:44:33
- - xarr   Fatalny ten kod, dlatego nie chce mi sie z nim nic...   16.02.2005, 08:56:33
- - strife   No dobrze a co mam wpisać w min-height: Połączyłe...   16.02.2005, 23:15:50
- - xarr   Nie min-height, bo tego nie skuma IE. Chodzilo mi ...   17.02.2005, 08:35:39
- - yavaho   Uważam ze wszystko sie miesza z powodu "paddi...   17.02.2005, 14:14:15
- - strife   Pierwsza rzecz to taka że chcę podziękować serdecz...   18.02.2005, 01:23:30
- - xarr   Dzisas to o taki efekt ci chodzilo? A ja myslalem ...   18.02.2005, 07:17:32
- - wassago   jessuuu... co za ludzie...   19.02.2005, 17:34:36

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 14.10.2025 - 06:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn