Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak to zrobić pod IE?
Forum PHP.pl > Forum > Po stronie przeglądarki
Jabol
30.07.2005, 13:02:15
Chciałbym uzyskać identyczne wyświetlanie następującej strony pod IE jak pod Mozillą. Pod IE jak na razie bardzo się rozjeżdża, jeżeli chcecie zobaczyć jak powinna wyglądać poprawnie otwórzcie w mozilli.
index.html
[HTML] pobierz, plaintext 
  1. <?xml version="1.1" encoding="iso-8859-1"?>
  2. <?xml-stylesheet type="text/css" href="style.css"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  4.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  6.  <head>
  7.   <meta http-equiv="Content-Language" content="de" />
  8.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9.   <meta name="description" content="Die HompePage des Deutsch-Polnischen Gymnasiums in L&ouml;cknitz. Wir laden Alle herzlich ein !!!" />
  10.   <meta name="keywords" content="schule, dpg, loecknitz, locknitz, scal" />
  11.   <link rel="stylesheet" type="text/css" href="style.css" />
  12.   <title>DPG - L&ouml;cknitz</title>
  13.  
  14.   <script type="text/javascript">
  15.    <!-- Hide it
  16.    // Returns today's date in a string with full day and month names
  17.    // by Roger C. Scudder Jr. on 10-2-98
  18.    // corrected for Netscape by Grzegorz Golebiewski
  19.    DayName = new Array(7)
  20.    DayName[0] = "Sonntag "
  21.    DayName[1] = "Montag "
  22.    DayName[2] = "Dienstag "
  23.    DayName[3] = "Mittwoch "
  24.    DayName[4] = "Donnerstag "
  25.    DayName[5] = "Freitag "
  26.    DayName[6] = "Samstag "
  27.  
  28.    MonthName = new Array(12)
  29.    MonthName[0] = "Januar "
  30.    MonthName[1] = "Februar "
  31.    MonthName[2] = "M&auml;rz "
  32.    MonthName[3] = "April "
  33.    MonthName[4] = "Mai "
  34.    MonthName[5] = "Juni "
  35.    MonthName[6] = "Juli "
  36.    MonthName[7] = "August "
  37.    MonthName[8] = "September "
  38.    MonthName[9] = "Oktober "
  39.    MonthName[10] = "November "
  40.    MonthName[11] = "Dezember "
  41.  
  42.    function getDateStr(){
  43.        var Today = new Date()
  44.        var WeekDay = Today.getDay()
  45.        var Month = Today.getMonth()
  46.        var Day = Today.getDate()
  47.        var Year = Today.getYear()
  48.  
  49.        if(Year <= 2000)
  50.            Year += 1900
  51.  
  52.        return DayName[WeekDay] + "," + " " + Day + " " + MonthName[Month] + ", " + Year
  53.    }
  54.    //-->
  55.   </script>
  56.   <script type="text/javascript">
  57.    <!-- Hide it
  58.    var clockid=new Array()
  59.    var clockidoutside=new Array()
  60.    var i_clock=-1
  61.    var thistime= new Date()
  62.    var hours=thistime.getHours()
  63.    var minutes=thistime.getMinutes()
  64.    if (eval(hours) <10) {hours="0"+hours}
  65.    if (eval(minutes) < 10) {minutes="0"+minutes}
  66.    var thistime = hours+":"+minutes
  67. 	   function writeclock() {
  68.       i_clock++
  69.       if (document.all || document.getElementById || document.layers) {
  70. 	      clockid[i_clock]="clock"+i_clock
  71.          document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
  72.       }
  73.    }
  74.  
  75.    function clockon() {
  76.       thistime= new Date()
  77.       hours=thistime.getHours()
  78.       minutes=thistime.getMinutes()
  79.       if (eval(hours) <10) {hours="0"+hours}
  80.       if (eval(minutes) < 10) {minutes="0"+minutes}
  81.       thistime = hours+":"+minutes
  82.       if (document.all) {
  83.       for (i=0;i<=clockid.length-1;i++) {
  84.          var thisclock=eval(clockid[i])
  85.          thisclock.innerHTML=thistime
  86.       }  
  87.    }
  88.  
  89.       if (document.getElementById) {
  90.          for (i=0;i<=clockid.length-1;i++) {
  91.             document.getElementById(clockid[i]).innerHTML=thistime
  92.          }
  93.       }
  94.       var timer=setTimeout("clockon()",1000)
  95.    }
  96.    window.onload=clockon();
  97.    //-->
  98.   </script>
  99.  </head>
  100.  <body xml:lang="de">
  101.   <div>
  102.    <!-- head -->
  103.    <div class="head">
  104.     <script type="text/javascript">document.write(" " + getDateStr())</script>.<span style="color: #FFFFFF; font-face: Verdana; font-size: 10px;">&nbsp; Uhrzeit&nbsp;<script type="text/javascript">writeclock()</script></span>
  105.  
  106.    </div>
  107.    <!-- /head -->
  108.    <!-- main -->
  109.    <div class="main">
  110.     <!-- mainmenu -->
  111.     <a class="menu" href="index.htm">menu</a><a class="menu" href="index.htm">menu</a><a class="menu" href="index.htm">menu</a>
  112.     <!-- /mainmenu -->
  113.  
  114.     <br />
  115.      <div class="cell" style="margin-right: 5%; width: 85%;">
  116.       <h2>INHALT, TODO, XXX</h2>
  117.       <p>
  118.        INHALT, TODO, XXX
  119.        INHALT, TODO, XXX
  120.        INHALT, TODO, XXX
  121.        INHALT, TODO, XXX
  122.        INHALT, TODO, XXX
  123.        INHALT, TODO, XXX
  124.        INHALT, TODO, XXX
  125.        INHALT, TODO, XXX
  126.        INHALT, TODO, XXX
  127.        INHALT, TODO, XXX
  128.        INHALT, TODO, XXX
  129.        INHALT, TODO, XXX
  130.        INHALT, TODO, XXX
  131.        INHALT, TODO, XXX
  132.        INHALT, TODO, XXX
  133.        INHALT, TODO, XXX
  134.        INHALT, TODO, XXX
  135.        INHALT, TODO, XXX
  136.        INHALT, TODO, XXX
  137.        INHALT, TODO, XXX
  138.        INHALT, TODO, XXX
  139.        INHALT, TODO, XXX
  140.        INHALT, TODO, XXX
  141.        INHALT, TODO, XXX
  142.        INHALT, TODO, XXX
  143.        INHALT, TODO, XXX
  144.        INHALT, TODO, XXX
  145.        INHALT, TODO, XXX
  146.        INHALT, TODO, XXX
  147.        INHALT, TODO, XXX
  148.        INHALT, TODO, XXX
  149.        INHALT, TODO, XXX
  150.        INHALT, TODO, XXX
  151.        INHALT, TODO, XXX
  152.       </p>
  153.      </div>
  154.      <div class="cell" style="width: 10%;">
  155.       <a class="smenu" href="index.htm">submenu</a><a class="smenu" href="index.htm">submenu</a><a class="smenu" href="index.htm">submenu</a>
  156.  
  157.      </div>
  158.     <br style="clear: both;" />
  159.     <!-- submenu -->
  160.     <a class="menu" href="index.htm">menu</a><a class="menu" href="index.htm">menu</a><a class="menu" href="index.htm">menu</a>
  161.     <!-- /submenu -->
  162.    </div>
  163.    <!-- /main -->
  164.  
  165.    <!--foot -->
  166.    <div class="foot">
  167.     <address>&nbsp;designed by <a href="mailto:XXX?subject=DPG - Loecknitz  - - - Problem">XXX</a>&copy; for DPG L&ouml;cknitz</address><address>php enginge by <a href="mailto:XXX?subject=DPG - Loecknitz  - - - Problem">XXX</a> for DPG L&ouml;cknitz</address>
  168.    </div>
  169.  
  170.    <!-- /foot -->
  171.   </div>
  172.  </body>
  173. </html>
[HTML] pobierz, plaintext

style.css
Kod
body {
background-color: #E6F0FF;
font-family: Tahoma, Arial CE, Helvetica;
font-size: 8pt;
min-width: 700px;
text-align: center;
}
h2, h3, h4 {
background-color: #8CAAE6;
}
a{
color: inherit;
}
a:hover {
color: #E6F0FF;
}
a:visited {
color: #C3D2F5;
}
a:active {
color: #33CCFF;
}
a.menu {
background-color: #8CAAE6;
color: inherit;
display: inline;
font-size: 10pt;
font-weight: bold;
padding: 0px 10px;
text-align: center;
text-decoration: none;
}
a.menu:hover {
background-color: #C3D2F5;
}
a.smenu {
background-color: #8CAAE6;
color: inherit;
display: block;
font-size: 10pt;
font-weight: bold;
text-align: center;
text-decoration: none;
width: 80px;
}
a.smenu:hover {
background-color: #C3D2F5;
}
div.head {
background-color: #C3D2F5;
display: block;
height: 52px;
margin: 0px auto;
text-align: right;
width: 90%;
}
div.main {
display: block;
margin: 0px auto;
text-align: center;
width: 70%;
}
div.foot {
background-color: #C3D2F5;
color: #243F84;
display: block;
margin: 0px auto;
text-align: center;
width: 90%;
}
div.cell {
float: left;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
.sub {
vertical-align: sub;
}
.sup {
vertical-align: super;
}
Ciekawi mnie, czy problemy z wyświetlaniem to kwestia jakiegoś szczegółu, czy też trzeba wszystko od nowa napisać? Efekt jaki chciałbym uzyskać to wyświetlanie tej strony zarówno pod IE jak i pod Mozillą w taki sam sposób w jaki jest teraz wyświetnlana pod mozillą zachowując kompatybilność z XHTML 1.1 oraz CSS 2.
Proszę o pomoc, z góry dzięki.
revyag
1.08.2005, 08:54:50
Problem tkwi w procentach snitch.gif
Zawsze pojawi się przy ustawianiu szerokości w ten sposób. Jeśli chcesz mieć pewność że będzie to wyglądać ok, trzeba ustawić szerokość w pikselach.
Poza tym, IE inaczej interpretuje rozmiar czcionki nagłówków, dlatego należy podać rozmiar czcionki dla nich, no i kolor dla odnośników też musi być ustawiony, bo przejęcie wartości rodzica nie zadziała.
Jabol
1.08.2005, 10:34:51
Wielkie dzięki. Wypróbuje jak tylko będę miał dostęp do IE. Szkoda, że jest tak jak mówisz, bo świetnie mi działało to co zrobiłem (a te procenty nawet wyliczałem na kalkulatorze sad.gif ) i bardzo lubie ten kod. No ale cóż - taki jest IE.
popo
1.08.2005, 15:51:26
ie ponizej 6 ma problemy z interpretacja box model wyjasnienie jak przynajmniej czesciowo to obejsc (EN)
v6x chyba tez jesli w naglowku znajdzie xml.... sporo info jest na tamtej stronce
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.