Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> IE exceptions
flashdev
post 18.06.2009, 19:04:10
Post #1





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X---- 

[HTML] pobierz, plaintext 
  1. <div style="width:200px; background-color:#f00;">
  2. text
  3. <div style="width:100px; height:100px; background-color:#ff0; margin:20px auto 20px auto;">
  4. text
  5. </div>
  6. </div>
[HTML] pobierz, plaintext


Opera, Chrome etc.


IE


Jak to jakoś sensownie rozwiązać?


ps. Będzie tu kiedyś hosting grafiki zintegrowany z forum?


--------------------
generator haseł
Go to the top of the page
+Quote Post
erix
post 18.06.2009, 19:14:23
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Daj dla rodzica text-align: center.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
flashdev
post 18.06.2009, 19:21:58
Post #3





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X---- 

[HTML] pobierz, plaintext 
  1. <div style="width:200px; background-color:#f00; text-align:center;">
  2. text
  3. <ul style="width:100px; height:100px; background-color:#ff0; margin:20px auto 20px auto;">
  4. <li>opt 1</li>
  5. <li>opt 2</li>
  6. <li>opt 3</li>
  7. </ul>
  8. </div>
[HTML] pobierz, plaintext




A skąd się bierze to magiczne przesunięcie, i jak mu zapobiec?


--------------------
generator haseł
Go to the top of the page
+Quote Post
Crozin
post 18.06.2009, 19:27:49
Post #4





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

IE obsługuje margin-left, margin-left ustawione na auto chyba że jest w tzw. quirks-mode. Mógłbyś pokazać cały kod tego dokumentu?
Go to the top of the page
+Quote Post
flashdev
post 18.06.2009, 19:31:43
Post #5





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

Cytat(Crozin @ 18.06.2009, 20:27:49 ) *
IE obsługuje margin-left, margin-left ustawione na auto chyba że jest w tzw. quirks-mode. Mógłbyś pokazać cały kod tego dokumentu?


Uprzedzając Twoje pytanie, to właśnie zrobiłem (w poprzednim poście) smile.gif


--------------------
generator haseł
Go to the top of the page
+Quote Post
erix
post 18.06.2009, 19:42:11
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
A z overflow: hidden to samo? Podejrzewam, że wypływa margines listy.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Crozin
post 18.06.2009, 19:44:45
Post #7





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

Jeżeli kod z 3-ego postu to pełen kod dokumentu to IE przejdzie w quirks-mode. Sprawdź sobie:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Przykładowy dokument</title>
    
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<div style="width:200px; background-color:#f00; text-align:center;">
text
<ul style="width:100px; height:100px; background-color:#ff0; margin:20px auto 20px auto;">
<li>opt 1</li>
<li>opt 2</li>
<li>opt 3</li>
</ul>
</div>    
</body>
</html>
Go to the top of the page
+Quote Post
flashdev
post 18.06.2009, 20:22:12
Post #8





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

dzięki @Crozin
To działa, ale niestety dla mojego konkretnego przypadku nie mogę sobie jednak z tym poradzić, wiec zamieszczam całość kodu tutaj, bez zbędnej treści:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. 	<title>...</title>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" </head>
  6. 	<link rel="Stylesheet" type="text/css" href="test.css" />
  7. <body>
  8. <div id="top">
  9. <div id="header">
  10. top
  11. </div>
  12. <div id="menu">
  13. <ul id="leftMenu">
  14. <li><a href="1">home</a></li>
  15. <li><a href="2">opcje</a></li>
  16. <li><a href="3">kontakt</a></li></ul>
  17. </div>
  18. <div id="main">
  19. main
  20. </div>
  21.  
  22. <div id="footer">footer</a></div>
  23.  
  24. </div>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext


test.css
[HTML] pobierz, plaintext 
  1. html, body	{
  2. 	color: #000;
  3. 	text-align: justify;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7.  
  8. #top	{
  9. 	background-color: #00F;
  10. 	width: 780px;
  11. 	margin: 20px auto 20px auto;
  12. }
  13.  
  14. #header	{
  15. 	height: 100px;
  16. }
  17.  
  18. #menu	{
  19. 	width: 180px;
  20. 	float: left;
  21. 	overflow: hidden;
  22. 	text-align: center;
  23. 	min-height: 400px;
  24. 	background-color: #cfc;
  25. }
  26.  
  27. #main	{
  28. 	background-color: #f80;
  29. 	width: 560px;
  30. 	padding: 20px;
  31. 	float: left;
  32. 	overflow: hidden;
  33. }
  34.  
  35. #footer{
  36. 	clear: both;
  37. 	width: 100%;
  38. 	padding: 10px 0 10px 0px;
  39. 	background-color: #f8f;
  40. 	text-align: center;
  41. }
  42.  
  43. #leftMenu, #leftMenu li	{
  44. 	display: block;
  45. 	list-style: none;
  46. 	padding: 0;
  47. 	text-align: center;
  48. }
  49.  
  50. #leftMenu		{
  51. 	background-color: #ff0000;
  52. }
  53.  
  54. #leftMenu a:link, #leftMenu a:visited	{
  55. 	display: block;
  56. 	width: 140px;
  57. 	text-decoration: none;
  58. 	background-color: #FFF;
  59. 	color: #420;
  60. 	padding: 6px;
  61. 	margin: 9px auto 9px auto;
  62. 	border: 2px outset #ccc;
  63. }
  64.  
  65. #leftMenu a:hover	{
  66. 	border-style: inset;
  67. 	padding: 8px 4px 4px 8px;
  68. }
[HTML] pobierz, plaintext


I przy okazji można jakoś sprawić aby pomarańczowy obszar rozciągnął się do samego dołu (do stopki)?


--------------------
generator haseł
Go to the top of the page
+Quote Post
erix
post 18.06.2009, 21:09:04
Post #9





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Cytat
I przy okazji można jakoś sprawić aby pomarańczowy obszar rozciągnął się do samego dołu (do stopki)?

AFAIK:
Kod
html, body
{width: 100%; height: 100%; }

#element
{height: 100%; }


A jeśli nie działa:
Kod
#element
{ height: expression(eval(document.documentElement.runtimeStyle.height)+'px'); }

Wiem, podłe. [;


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 17.06.2025 - 10:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn