Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: IE exceptions
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
flashdev
18.06.2009, 19:04:10 
[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?
erix
18.06.2009, 19:14:23
Daj dla rodzica text-align: center.
flashdev
18.06.2009, 19:21:58 
[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?
Crozin
18.06.2009, 19: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?
flashdev
18.06.2009, 19:31:43
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
erix
18.06.2009, 19:42:11
A z overflow: hidden to samo? Podejrzewam, że wypływa margines listy.
Crozin
18.06.2009, 19:44:45
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>
flashdev
18.06.2009, 20:22:12
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)?
erix
18.06.2009, 21:09:04
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. [;
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.