Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP][CSS]IE7 CSS
Forum PHP.pl > Forum > Przedszkole
Maciek1705
Witam serdecznie. Mam do Was pytanie techniczne:D Otóż zrobiłem stronę www działa w firefox wiadomo;p działa w IE8 sęk w tym że w IE8 wyświetla się idealnie tak jak powinna natomiast w IE7 menu się magicznie odsuwa itp. Chciałem się zapytać czy jest jakiś sposób żeby w starszych przeglądarkach typu IE7 i IE6 strona wyświetlała się tak jak w wersji 8. Kiedyś pamiętam że była taka biblioteka IE8.js załączam ją do swojej strony, testuje w programie ietester i nic bez zmian z biblioteką czy bez tak samo jest na to rada czy trzeba pisać osobno inny styl pod te przeglądarki? Z góry dziękuje za pomoc.Pozdrawiam
Mostrom
Gdzieś kiedyś była taka stronka super, gdzie miałeś wypisane wszystkie błędy wyświetlania w IE i jak temu zaradzić. Niestety gdzieś zgubiłem adres sad.gif
Marteen
Można zrobić tak:
  1. <!--[if lt IE 8]>
  2. Kod HTML wykonywany tylko w IE wcześniejszych od wersji 8
  3. <![endif]-->
  4.  
  5. <!--[if IE 8]>
  6. Kod HTML wykonywany tylko w IE 8
  7. <![endif]-->
  8.  
  9. <!--[if !IE]>-->
  10. Kod wykonywany w przeglądarkach innych niż IE
  11. <!--<![endif]-->
  12.  

Wtedy musisz napisać kod zoptymalizowany dla starszych wersji IE.
tehaha
tak jak kolega wyżej napisał możesz dodać oddzielny styl lub arkusz styli dla starszych silników IE np.
  1. <link type="text/css" rel="stylesheet" href="style.css" />
  2. <!--[if IE 6]>
  3. <link rel="stylesheet" href="styleIE6.css" type="text/css" />
  4. <![endif]-->

aczkolwiek w 99% używa się to tylko w celu naprawienia przeźroczystości pod IE6, pod IE7 praktycznie nie potrzeby stosowania takich tricków.

Pokaż kod i najlepiej stronę online, bo w kodzie leży przyczyna.

Czy wyzerowałeś style? przeglądarki mają różne wartości domyślne i strzelam, że stąd właśnie bierze się Twoja Magia.
Maciek1705
zdjęcia firefox: http://img835.imageshack.us/i/21661077.jpg/
zdjęcia ie7 http://img826.imageshack.us/i/10834212.jpg/
być może już pokazuje kod strony o to on:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
  2. <body>
  3. <div id="wrapper">
  4. <div id="header">
  5.  
  6. </div>
  7. <div id="middle">
  8. <div id="menu">
  9. <ul id="sliding-navigation">
  10. <li class="sliding-element"><h3>MENU&nbsp;</h3></li>
  11. <li class="sliding-element" id="blabla1"><a href="#">OFERTA WWW</a></li>
  12. <li class="sliding-element" id="blabla2"><a href="#">FOTOGRAFIA</a></li>
  13. <li class="sliding-element" id="blabla3"><a href="#">GALERIA</a></li>
  14. <li class="sliding-element" id="blabla4"><a href="#">CENNIK</a></li>
  15. <li class="sliding-element" id="blabla5"><a href="#">KONTAKT</a></li>
  16. </ul>
  17. </div>
  18.  
  19. <div id="content">
  20. <div id="contact">
  21. <div id="map">
  22. <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pl/maps/ms?hl=pl&amp;ie=UTF8&amp;msa=0&amp;msid=115348303524170739255.00048db6cdcd33d3d4c9a&amp;ll=50.8954,15.719676&amp;spn=0.008121,0.012875&amp;z=15&amp;output=embed"></iframe><br /><small>Pokaż <a href="http://maps.google.pl/maps/ms?hl=pl&amp;ie=UTF8&amp;msa=0&amp;msid=115348303524170739255.00048db6cdcd33d3d4c9a&amp;ll=50.8954,15.719676&amp;spn=0.008121,0.012875&amp;z=15&amp;source=embed" style="color:#0000FF;text-align:left">Galeon</a> na większej mapie</small>
  23. </div>
  24. <div id="form-container">
  25. <form id="contact-form" name="contact-form" method="post" action="submit.php">
  26. <table width="100%" border="0" cellspacing="0" cellpadding="5">
  27. <tr>
  28. <td width="15%"><label for="name">Imię</label></td>
  29. <td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
  30. <td width="15%" id="errOffset">&nbsp;</td>
  31. </tr>
  32.  
  33. <tr>
  34. <td><label for="email">E-mail</label></td>
  35. <td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
  36. <td>&nbsp;</td>
  37. </tr>
  38.  
  39. <tr>
  40. <td><label for="subject">Temat</label></td>
  41. <td><select name="subject" id="subject">
  42. <option value="" selected="selected"> - Wybierz -</option>
  43. <option value="Question">Pytanie</option>
  44. <option value="Business proposal">Propozycja biznesu</option>
  45. <option value="Advertisement">Reklama</option>
  46. <option value="Complaint">Skarga</option>
  47. </select></td>
  48. <td>&nbsp;</td>
  49. </tr>
  50.  
  51. <tr>
  52. <td valign="top"><label for="message">Wiadomość</label></td>
  53. <td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
  54. <td valign="top">&nbsp;</td>
  55. </tr>
  56.  
  57. <tr>
  58. <td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
  59. <td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
  60. <td valign="top">&nbsp;</td>
  61. </tr>
  62.  
  63. <tr>
  64. <td valign="top">&nbsp;</td>
  65. <td colspan="2"><input type="submit" name="button" id="button" value="Wyślij" />
  66. <input type="reset" name="button2" id="button2" value="Kasuj" />
  67. <?=$str?><img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
  68. </tr>
  69. </table>
  70. </form>
  71. <?=$success?>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <div id="footer">
  77. <table id="w3c"><tr><td><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a></td>
  78. <td><a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Poprawny CSS!" /></a></td></tr></table>
  79. </div>
  80. </div>
  81. </body>
  82. </html>



css natomiast ma się tak:
  1. body{
  2. margin:0;
  3. padding:0;
  4. color:#a4a4a4;
  5. cursor:default;
  6. font-size:11px;
  7. background-color:#2c2c2b;
  8. font-family:Tahoma, sans-serif;
  9.  
  10. }
  11. #wrapper{
  12. width:1024px;
  13. margin:0px auto;
  14. position:relative;
  15. padding:0px;
  16. background-image:url('images/wrapper.jpg');
  17. background-repeat:no-repeat;
  18. background-position:bottom;
  19. }
  20. #header{
  21. height:399px;
  22. width:1024px;
  23. background:url('images/header.png') no-repeat;
  24. }
  25. a:link, a:visited{
  26. color:#fff;
  27. text-decoration:none;
  28. }
  29. a img{
  30. border:0;
  31. }
  32. div#top div#nav{
  33. float:left;
  34. clear:both;
  35. width:993px;
  36. height:52px;
  37. margin:22px 0 0;
  38. }
  39. div#top div#nav ul{
  40. float:left;
  41. width:700px;
  42. height:52px;
  43. list-style-type:none;
  44. }
  45. div#nav ul li{
  46. float:left;
  47. height:52px;
  48. }
  49. div#nav ul li a{
  50. border:0;
  51. height:52px;
  52. display:block;
  53. line-height:52px;
  54. text-indent:-9999px;
  55. }
  56. div#video-header{
  57. height:683px;
  58. margin:-1px 0 0;
  59. }
  60. div#slide-holder {
  61. z-index:40;
  62. margin-top:100px;
  63. margin-left:25px;
  64. width:974px;
  65. height:299px;
  66. position:absolute;
  67. }
  68. div#slide-holder div#slide-runner{
  69. top:0px;
  70. left:0px;
  71. width:973px;
  72. height:278px;
  73. overflow:hidden;
  74. position:absolute;
  75. }
  76. div#slide-holder img{
  77. margin:0;
  78. display:none;
  79. position:absolute;
  80. }
  81. div#slide-holder div#slide-controls{
  82. left:0;
  83. bottom:228px;
  84. width:973px;
  85. height:46px;
  86. display:none;
  87. position:absolute;
  88. background:url('images/slide-bg.png') 0 0;
  89. }
  90. div#slide-holder div#slide-controls p.text{
  91. float:left;
  92. color:#fff;
  93. display:inline;
  94. font-size:10px;
  95. margin:15px 0 0 20px;
  96. text-transform:uppercase;
  97. }
  98. div#slide-holder div#slide-controls p#slide-nav{
  99. float:right;
  100. height:24px;
  101. display:inline;
  102. margin:11px 15px 0 0;
  103. }
  104. div#slide-holder div#slide-controls p#slide-nav a{
  105. float:left;
  106. width:24px;
  107. height:24px;
  108. display:inline;
  109. font-size:11px;
  110. margin:0 5px 0 0;
  111. line-height:24px;
  112. font-weight:bold;
  113. text-align:center;
  114. text-decoration:none;
  115. background-position:0 0;
  116. background-repeat:no-repeat;
  117. }
  118. div#slide-holder div#slide-controls p#slide-nav a.on{
  119. background-position:0 -24px;
  120. }
  121. div#slide-holder div#slide-controls p#slide-nav a{
  122. background-image:url('images/silde-nav.png');
  123. }
  124. div#nav ul li a{
  125. background:url('images/nav.png') no-repeat;
  126. }
  127. #middle{
  128. position:relative;
  129. height:689px;
  130. }
  131. #menu{
  132. position:absolute;
  133. width:220px;
  134. font-family:"Lucida Grande", Verdana, sans-serif;
  135. font-size:150%;
  136. text-align:left;
  137. }
  138. ul#sliding-navigation{
  139. list-style:none;
  140. font-size:.75em;
  141. margin:10px 0;
  142. padding:0;
  143. }
  144. ul#sliding-navigation li.sliding-element h3, ul#sliding-navigation li.sliding-element a{
  145. display:block;
  146. width:150px;
  147. padding:5px 18px;
  148. margin:0;
  149. margin-bottom:5px;
  150. }
  151. ul#sliding-navigation li.sliding-element h3{
  152. color:#fff;
  153. background:#333 url('images/heading_bg.jpg') repeat-y;
  154. font-weight:normal;
  155. }
  156. ul#sliding-navigation li.sliding-element a{
  157. color:#999;
  158. background:#222 url('images/tab_bg.jpg') repeat-y;
  159. border:1px solid #1a1a1a;
  160. text-decoration:none;
  161. }
  162. ul#sliding-navigation li.sliding-element a:hover{
  163. color:#ffff66;
  164. border-left:6px solid #09f;
  165. border-color:#09f;
  166. }
  167. #content{
  168. width:824px;
  169. margin-left:200px;
  170. }
  171. #contact{
  172. position:relative;
  173. width:700px;
  174. height:420px;
  175. background:url('images/contact_bg.png') no-repeat;
  176. background-position:center;
  177. }
  178. #map{
  179. margin-left:19px;
  180. margin-top:100px;
  181. float:left;
  182. }
  183. #form-container form,input,label{
  184. margin:0px;
  185. padding:0px;
  186. }
  187. .clear{
  188. clear:both;
  189. }
  190. #form-container{
  191. width:350px;
  192. height:320px;
  193. margin-left:340px;
  194. margin-top:65px;
  195. color:#555555;
  196. font-size:13px;
  197. font-family:Arial, Helvetica, sans-serif;
  198. padding:15px;
  199. position:absolute;
  200. }
  201. #contact-form td{
  202. white-space:nowrap;
  203. }
  204. #contact-form label{
  205. text-transform:uppercase;
  206. font-size:10px;
  207. font-family:Tahoma,Arial,Sans-serif;
  208. }
  209. #contact-form textarea{
  210. color:#404040;
  211. font-family:Arial,Helvetica,sans-serif;
  212. font-size:12px;
  213. }
  214. #contact-form td > button{
  215. text-indent:8px;
  216. }
  217. .error{
  218. background-color:#AB0000;
  219. color:white;
  220. font-size:10px;
  221. font-weight:bold;
  222. margin-top:10px;
  223. padding:10px;
  224. text-transform:uppercase;
  225. width:240px;
  226. }
  227. #loading{
  228. position:relative;
  229. bottom:9px;
  230. visibility:hidden;
  231. }
  232. #footer{
  233. height:62px;
  234. background:url('images/footer.png') no-repeat;
  235. }
  236. #w3c{
  237. margin-top:15px;
  238. margin-left:15px;
  239. }
tehaha
najlepiej jakbyś pokazał to online, wklej jeszcze style css bo sam html nie wiele mówi
Maciek1705
Cytat(tehaha @ 14.08.2010, 21:20:18 ) *
najlepiej jakbyś pokazał to online, wklej jeszcze style css bo sam html nie wiele mówi


zdjęcia są na górze o to one:
zdjęcia firefox: http://img835.imageshack.us/i/21661077.jpg/
zdjęcia ie7 http://img826.imageshack.us/i/10834212.jpg/

póki co testuje na lokalnym serwerze

co do css-a też jest wyżej zaraz po znacznikach php sam sprawdźbiggrin.gif
tehaha
przede wszystkim błędne jest użycie tutaj position:absolute dla menu i tego formularza, powinno być wszystko na float, z podanym width, bo jak masz pozycjonowanie absolutne to wtedy każdy taki box jest niezależny i się inne boxy nie rozciągają. Jeżeli jednak już używasz position:absolute; to musisz podać też: top lub bottom, left lub right

spróbuj ten kod:
  1. <style type="text/css">
  2. body{
  3. margin:0;
  4. padding:0;
  5. color:#a4a4a4;
  6. cursor:default;
  7. font-size:11px;
  8. background-color:#2c2c2b;
  9. font-family:Tahoma, sans-serif;
  10.  
  11. }
  12. #wrapper{
  13. width:1024px;
  14. margin:0px auto;
  15. position:relative;
  16. padding:0px;
  17. background-image:url('images/wrapper.jpg');
  18. background-repeat:no-repeat;
  19. background-position:bottom;
  20. }
  21. #header{
  22. height:399px;
  23. width:1024px;
  24. background:url('images/header.png') no-repeat;
  25. }
  26. a:link, a:visited{
  27. color:#fff;
  28. text-decoration:none;
  29. }
  30. a img{
  31. border:0;
  32. }
  33. div#top div#nav{
  34. float:left;
  35. clear:both;
  36. width:993px;
  37. height:52px;
  38. margin:22px 0 0;
  39. }
  40. div#top div#nav ul{
  41. float:left;
  42. width:700px;
  43. height:52px;
  44. list-style-type:none;
  45. }
  46. div#nav ul li{
  47. float:left;
  48. height:52px;
  49. }
  50. div#nav ul li a{
  51. border:0;
  52. height:52px;
  53. display:block;
  54. line-height:52px;
  55. text-indent:-9999px;
  56. }
  57. div#video-header{
  58. height:683px;
  59. margin:-1px 0 0;
  60. }
  61. div#slide-holder {
  62. z-index:40;
  63. margin-top:100px;
  64. margin-left:25px;
  65. width:974px;
  66. height:299px;
  67. position:absolute;
  68. }
  69. div#slide-holder div#slide-runner{
  70. top:0px;
  71. left:0px;
  72. width:973px;
  73. height:278px;
  74. overflow:hidden;
  75. position:absolute;
  76. }
  77. div#slide-holder img{
  78. margin:0;
  79. display:none;
  80. position:absolute;
  81. }
  82. div#slide-holder div#slide-controls{
  83. left:0;
  84. bottom:228px;
  85. width:973px;
  86. height:46px;
  87. display:none;
  88. position:absolute;
  89. background:url('images/slide-bg.png') 0 0;
  90. }
  91. div#slide-holder div#slide-controls p.text{
  92. float:left;
  93. color:#fff;
  94. display:inline;
  95. font-size:10px;
  96. margin:15px 0 0 20px;
  97. text-transform:uppercase;
  98. }
  99. div#slide-holder div#slide-controls p#slide-nav{
  100. float:right;
  101. height:24px;
  102. display:inline;
  103. margin:11px 15px 0 0;
  104. }
  105. div#slide-holder div#slide-controls p#slide-nav a{
  106. float:left;
  107. width:24px;
  108. height:24px;
  109. display:inline;
  110. font-size:11px;
  111. margin:0 5px 0 0;
  112. line-height:24px;
  113. font-weight:bold;
  114. text-align:center;
  115. text-decoration:none;
  116. background-position:0 0;
  117. background-repeat:no-repeat;
  118. }
  119. div#slide-holder div#slide-controls p#slide-nav a.on{
  120. background-position:0 -24px;
  121. }
  122. div#slide-holder div#slide-controls p#slide-nav a{
  123. background-image:url('images/silde-nav.png');
  124. }
  125. div#nav ul li a{
  126. background:url('images/nav.png') no-repeat;
  127. }
  128. #middle{
  129. position:relative;
  130. height:689px;
  131. }
  132. #menu{
  133. position:absolute;
  134. width:220px;
  135. font-family:"Lucida Grande", Verdana, sans-serif;
  136. font-size:150%;
  137. text-align:left;
  138. left:0;
  139. top0;
  140. }
  141. ul#sliding-navigation{
  142. list-style:none;
  143. font-size:.75em;
  144. margin:10px 0;
  145. padding:0;
  146. }
  147. ul#sliding-navigation li.sliding-element h3, ul#sliding-navigation li.sliding-element a{
  148. display:block;
  149. width:150px;
  150. padding:5px 18px;
  151. margin:0;
  152. margin-bottom:5px;
  153. }
  154. ul#sliding-navigation li.sliding-element h3{
  155. color:#fff;
  156. background:#333 url('images/heading_bg.jpg') repeat-y;
  157. font-weight:normal;
  158. }
  159. ul#sliding-navigation li.sliding-element a{
  160. color:#999;
  161. background:#222 url('images/tab_bg.jpg') repeat-y;
  162. border:1px solid #1a1a1a;
  163. text-decoration:none;
  164. }
  165. ul#sliding-navigation li.sliding-element a:hover{
  166. color:#ffff66;
  167. border-left:6px solid #09f;
  168. border-color:#09f;
  169. }
  170. #content{
  171. width:824px;
  172. margin-left:200px;
  173. }
  174. #contact{
  175. position:relative;
  176. width:700px;
  177. height:420px;
  178. background:url('images/contact_bg.png') no-repeat;
  179. background-position:center;
  180. }
  181. #map{
  182. margin-left:19px;
  183. margin-top:100px;
  184. float:left;
  185. display:inline;
  186. }
  187. #form-container form,input,label{
  188. margin:0px;
  189. padding:0px;
  190. }
  191. .clear{
  192. clear:both;
  193. }
  194. #form-container{
  195. width:350px;
  196. height:320px;
  197. margin-left:340px;
  198. margin-top:65px;
  199. color:#555555;
  200. font-size:13px;
  201. font-family:Arial, Helvetica, sans-serif;
  202. padding:15px;
  203. position:absolute;
  204. right:0;
  205. top:0;
  206. }
  207. #contact-form td{
  208. white-space:nowrap;
  209. }
  210. #contact-form label{
  211. text-transform:uppercase;
  212. font-size:10px;
  213. font-family:Tahoma,Arial,Sans-serif;
  214. }
  215. #contact-form textarea{
  216. color:#404040;
  217. font-family:Arial,Helvetica,sans-serif;
  218. font-size:12px;
  219. }
  220. #contact-form td > button{
  221. text-indent:8px;
  222. }
  223. .error{
  224. background-color:#AB0000;
  225. color:white;
  226. font-size:10px;
  227. font-weight:bold;
  228. margin-top:10px;
  229. padding:10px;
  230. text-transform:uppercase;
  231. width:240px;
  232. }
  233. #loading{
  234. position:relative;
  235. bottom:9px;
  236. visibility:hidden;
  237. }
  238. #footer{
  239. height:62px;
  240. background:url('images/footer.png') no-repeat;
  241. }
  242. #w3c{
  243. margin-top:15px;
  244. margin-left:15px;
  245. }
  246.  
Maciek1705
Dziękuje bardzo. Pomogło! Nie miałem pojęcia że trzeba także podawać top, right itp. ohmy.gif totalne zaskoczenie. Oczywiście masz pomógł jeszcze raz dziękuję.
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.