Problem z rozjeżdżające się menu w CSS

[nikipiki]

Witam

to jest moja pierwsza strona wiec prosze od razu nie krzyczec.. wszystko mniej więcej działa tak jak bym chciał.. ale menu ciągle mi się rozjezdza pod firefoxem wszystko jest ok ale pod IE nie wszystko rozjechane. Jest na to jakis sposob z góry dzięki.. http://teri.xtreemhost.com/

KOD STYLI.CSS

Kod:

BODY {
      background: url(Image/tlo.jpg);
      background-repeat: repeat;
      }

      
    IMG {border: 0px;}

      #top {
      position: relative;
      background-repeat: no-repeat;
      width: 800px;
      height: 500px;
      margin: 0 auto;
      }
      
      #top h2 {
      position: absolute;
      display: block;
      top: 150px;
      left: 350px;      
      }
      
      #b1{
      position: absolute;
      display: block;
      top: 90px;
      left: 110px;
      color: #e1941a;
      width: 480px;
      }
      
      #srodek {
      position: relative;
      background-repeat: no-repeat;
      width: 760px;
      height: 420px;
      margin: 0 auto;
      }
      
      #srodek h2 {
      position: absolute;
      display: block;
      top: 50px;
      left: 380px;      
      }
      
      #srodek h3 {
      position: absolute;
      display: block;
      top: 20px;
      left: 70px;      
      }
      

      /* menu    */
  
      #menu_gora ul
      {
      position: absolute;
      display: block;
      top: 330px;
      left: 230px;
      }
      
      #menu_gora ul li{ float: left;
      display: inline;
      white-space: nowrap;
      }
        
      #menu_gora ul li a
      {
      
      padding: 0px 25px;
      color: #ffffff;  
      font-size: 14px;
      font-family: Arial;    
      text-decoration: none;
      }

[nikipiki]

i co nikt nie pomoze..

[R_Rafalsky]

Image/kropka.png - obrazek nie wyświetla się.
Pod Operą też to będzie fatalnie wyglądać. Napraw lub usuń link do obrazka kropka.png i wszystko ładnie się ułoży. Przeglądarki poza FF wrzucają mały obrazek, który informuje o błędzie przy wczytywaniu obrazka (przykładowo krzyżyk) i to jest przyczyną rozchodzenia się menu.

Kod:

<div id="menu_gora">
  
          
          <ul>
          <li><a href="index.html">Główna </a></li>
          <li><a href="galeria.html">Galeria </a></li>
          <li><a href="kontakt.php">Kontakt </a></li>
          </ul>
          
  </div>

To mi się dobrze wyświetla.

[nikipiki]

faktycznie tego nie zauważyłem.. ale i tak nie jest dobrze.. dlaczego tak się dzieje.. każda przeglądarka inaczej interpretuje pozycjonowanie..? teraz chodzi o odległość od góry.. pod Firefoxem może być ale pod IE np już jest rozjechane.. musi być na to jakiś sposób.. z góry dzięki

[R_Rafalsky]

IE8 wyświetla prawidłowo, w IE7 jest problem. Nie wiem jak jest w IE6 ale tej przeglądarki nie pilnuję
Rozwiązaniem jest tylko dodanie formatowania warunkowego skierowanego tylko do tej przeglądarki

Kod:

<!--[if lte IE 7]>
Tu wstawiamy style CSS skierowane do przeglądarek IE w wersji 7 i starszych
<![endif]-->

Obniż jeszcze trochę elementy H1. Ogólnie masz bardzo dziwną budowę strony. Dlaczego w H1 jest obrazek? H2 i H3 to samo. Tak się nie robi. Hn to nagłówek n-tego stopnia, nie powinno być tam żadnego obrazku tylko tekst nagłówkowy. Zamiast nagłówków Hn zamień je na DIV, dodaj do DIVów klasy lub id (w zależności od uznania) i wypozycjonuj te elementy w CSS. Możliwe, że taka struktura strony powoduje, że starsze przeglądarki źle je interpretują i widzisz takie cuda.

Każda przeglądarka inaczej interpretuje pozycjonowanie?

Prawda, są różnice w interpretacji stylów przez przeglądarki. By te różnice usunąć korzysta się z tzw. Frameworków CSS (zestaw styli uogólniających widok wszystkich elementów). Jednak w Twoim przypadku raczej zaważyła nieprawidłowa budowa samej strony - przeglądarki starają się poprawiać te błędy na swój sposób - stąd te różnice.

[testw]

dodaj margin, powinno pomoc

Kod:

#menu_gora ul
{
position: absolute;
display: block;
top: 330px;
left: 230px;
margin:10px 230px;
}