Skocz do zawartości

Przesunięte div-y w IE

jinksthehousecat

Przez jinksthehousecat
w HTML i CSS

Rekomendowane odpowiedzi

jinksthehousecat Newbie

jinksthehousecat

Opublikowano
Opublikowano

To mój pierwszy post na tym forum zatem WITAM WSZYSTKICH SERDECZNIE :)

właśnie kończe swoja pierwszą stronę internetową i niestety natknąłem się na problem, którego nie potrafię sam rozwiązać. Szukałem rozwiązania prze google, ale niestety nie znalazłem. Dlatego zwracam się do was z ogromną prośbą o pomoc!

Stronę robię w Dreamweaverze i w Operze otwiera się ona dokładnie w taki sam sposób jak w programie. Niestety w IE i Firefoxie kilka div-ów jest przesuniętych. W IE v7 o 1 pixel w lewo a w IE v6 o1 pixel do góry a w FF o 1 pixel w prawo. Przesunnięte elementy są wewnątrz diva, który jakby chciał zza nich wyjrzeć. Czy ktoś wie co może być przyczyną?załanczam screeny dla lepszego zobrazowania problemu.

IE v7

https://img238.imageshack.us/img238/8915/iev7ke6.jpg

Opera

https://img132.imageshack.us/img132/2834/opera961yn3.jpg

link do strony testowej: www.jinks.yoyo.pl

kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title><meta name="keywords" content="test" />

<style type="text/css">

<!--

-->

</style>

<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

a:link {

text-decoration: none;

color: #666666;

}

a:visited {

text-decoration: none;

color: #666666;

}

a:hover {

text-decoration: none;

color: #000000;

}

a:active {

text-decoration: none;

color: #666666;

}

.style2 {font-size: 15px}

-->

</style>

</head>

<body>

<div id="outer_wrapper">

<div id="inner_wrapper">

<div id="content_wrapper">

<div id="nag"></div>

<div id="logo"></div>

<div id="pasek"></div>

</div>

<div id="stop_wrapper">

<div id="stop"></div>

</div>

</div>

</div>

</body>

</html>

plik css:

@charset "utf-8";

body,td,th {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

}

body {

background-color: #333333;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#outer_wrapper {

background-color: #d0d0d0;

background-repeat: repeat;

text-align: center;

margin-right: auto;

margin-left: auto;

padding-top: 50px;

padding-bottom: 50px;

height: 500px;

}

#stop {

background-image: url(images/bg_12.jpg);

background-repeat: no-repeat;

background-position: center;

width: 900px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

height: 7px;

margin-right: auto;

margin-left: auto;

border-top-width: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

#nag {

background-image: url(images/bg_01.jpg);

background-position: center center;

background-repeat: no-repeat;

margin: 0px auto;

padding: 0px;

height: 7px;

width: 900px;

border-right-width: 0px;

border-right-style: none;

border-top-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

border-top-style: none;

border-bottom-style: none;

border-left-style: none;

}

#stop_wrapper {

clear: both;

width: 900px;

margin: auto;

}

#logo {

padding: 50px;

margin-right: auto;

margin-left: auto;

}

#pasek {

background-image: url(images/bg_09.jpg);

background-repeat: repeat-x;

width: 855px;

height: 39px;

background-position: center center;

padding-left: 45px;

}

#stopka {

padding: 5px;

width: 900px;

margin-right: auto;

margin-left: auto;

background-color: #D0D0D0;

text-align: center;

font-size: 10px;

}

#inner_wrapper {

background-image: url(images/bg_02.jpg);

background-repeat: repeat-y;

padding: 0px;

text-align: center;

margin-right: auto;

margin-left: auto;

clear: both;

background-position: center;

height: 400px;

}

#content_wrapper {

height: 400px;

width: 900px;

text-align: center;

margin-right: auto;

margin-left: auto;

clear: both;

}

Bardzo proszę o pomoc, bo niestety sam nie daję rady :) Nie zwracajcie też uwagi na nazewnictwo div-ów :) z pewnością coś pomieszałem.

Odnośnik do komentarza
Udostępnij na innych stronach
Flanker Newbie

Flanker

Opublikowano
Opublikowano

Spróbuję Ci pomóc, jednak na razie nie wiem w czym dokładnie rzecz. Spróbuj zrobić tak:

#content_wrapper - dopisz padding:0;

#logo - zamiast margin-left:auto; margin-right:auto; wpisz margin:0;

Mogę dać Ci jeszcze jedną radę, div #nag jest w kodzie zupełnie niepotrzebny, zamiast niego grafike odpowiedzialną za zaokrąglenie górnej części tego białego pola umieszczasz w divie #content_wrapper lub #logo jako: background:url(images/bg_01.jpg) no-repeat center top;

Jeszcze jedna sprawa, moim zdaniem div #outer_wrapper również jest zbędny, większość jego atrybutów możesz podpiąć bezpośrednio pod body. Jedynie height:500px; chyba nie zadziała (choć pewny nie jestem) ale myślę, że nie jest ci to polecenie potrzebne.

katalog sklepów - darmowy katalog PR4 porady, artykuły, produkty.

Atrakcje turystyczne - wyjade.pl

Odnośnik do komentarza
Udostępnij na innych stronach
jinksthehousecat Newbie

jinksthehousecat

Opublikowano
  • Autor
Opublikowano
Spróbuję Ci pomóc, jednak na razie nie wiem w czym dokładnie rzecz. Spróbuj zrobić tak:

#content_wrapper - dopisz padding:0;

#logo - zamiast margin-left:auto; margin-right:auto; wpisz margin:0;

Mogę dać Ci jeszcze jedną radę, div #nag jest w kodzie zupełnie niepotrzebny, zamiast niego grafike odpowiedzialną za zaokrąglenie górnej części tego białego pola umieszczasz w divie #content_wrapper lub #logo jako: background:url(images/bg_01.jpg) no-repeat center top;

Jeszcze jedna sprawa, moim zdaniem div #outer_wrapper również jest zbędny, większość jego atrybutów możesz podpiąć bezpośrednio pod body. Jedynie height:500px; chyba nie zadziała (choć pewny nie jestem) ale myślę, że nie jest ci to polecenie potrzebne.

Dziękuję Ci bardzo! Niestety to, czy to działa będe mógł sprawdzić dopiero w przyszłym tygodniu :) ale mam wrażenie, że problem powinno sie rozwiązć właśnie przez uproszczenie tego kodu. Tak jak pisałem to moja pierwsza stronka i chyba niepotrzebnie ją zagmatwałem. Odpiszę najszybciej jak tylko będe mógł jakie są rezultaty. Pozdrawiam!

Odnośnik do komentarza
Udostępnij na innych stronach
  • 2 tygodnie później...
jinksthehousecat Newbie

jinksthehousecat

Opublikowano
  • Autor
Opublikowano

Dzięki za rady odnośnie uproszczenia strony. Jednak przyczyną przesunięcia divów było coś innego. Wystarczyło wpisać w css-div #innerwrapper - w zakładce box i positioning wartość parametru width na 900pix, czyli tyle ile ma grafika z tym białym zaokrągleniem dużego prostokąta ;)

Dzieki raz jeszcze Flanker za pomoc!

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności