Różnica w wyświetlaniu w IE i Firefox

ola001

Avatar: ola001

2008-06-12 12:22

Mam problem, którego nie mogę rozwiązać (siedzę nad nim kilka dni):
ustawiam szerokość dla elementów #content, #page i #page div.content.
Chcę żeby zawartosc prawej częsci strony wyświetlała się z taką sama szerokością w obu przeglądarkach: w IE i Firefoxie.
Mam tam taki kod w pliku default.css:


/* RIGHT COLUMN STYLES */
#content{float:left;width:578px;text-align:left;border:1px red solid;padding:0px;}
#page{width:538px;height:auto;margin:17px 0px 0px 20px;text-align:left;font:12px;padding:0px;border:1px red solid;}

#page h3, .message h3{font-size:13px;background:url(img/pasek_menu_p_1.jpg) no-repeat left top;width:500px;height:20px;float:left;color:white;text-align:left;font-weight:bold;margin-bottom:0px;padding:2px 0 0 5px;}
#page div.content{font:12px arial;text-align:left;padding:20px;width:100%;background:rgb(242,245,247);border:solid 1px rgb(210,228,252);float:left;}



Szerokość jest taka sama w obu przeglądarkach tylko wtedy, gdy w #page div.content ustawiam padding na 0.

Ale przecież musi być odstęp - bo inaczej tekst przylega do krawędzi...
Co robię nie tak?
Adres strony: http://www.ola.waw.pl/prev-med/

I drugi problem - jak wycentrować zawartość stopki?
Umieściłam w stopce menu2. Ustawiłam text-align:center; dla #foot i dla #head3, w którym zawiera się menu2. I nadal wszystko jest pozycjonowane do lewej....
jak to zrobić??? Pomóżcie! :)

Makaron

Avatar: Makaron

2008-06-12 18:56

#page div.content ma wartość width:100%; co pewnie jest przyczyną problemu. Proponuje nadać konkretną szerokość (w pixelach) i odpowiednio wtedy balansować paddingiem.

Co do centrowania stopki to w Twoim przypadku należałoby wyświetlać poszczególne elementy menu w linii. Wkleję Ci tutaj kawałek przykładowego kodu, który wywołuje pożądany efekt, wystarczy, że dopasujesz sobie go do Swojego konkretnego przykładu:

/* HEADER WITH TOP MENU UNDER LOGO */
#head3{width:100%;text-align:center;}

/* MENU TOP BELOW LOGO */
#menu2{width:100%;float:left;font-family:tahoma;font-size:1.08em;list-style:none; padding-left:0px;text-align:center;}
#menu2 li{display:inline;}
#menu2 a{color:#8a817e;font-weight:normal;text-decoration:underline;margin-left:10px;}
#menu2 a:hover{display:

inline;color:white;text-decoration:underline;}
#menu2 .selected{display:inline;color:black;text-decoration:none;}
#menu2 .selected:hover{display:inline;color:black;text-decoration:none;}


Ważne tutaj jest to, że wyświetlamy elementy wypunktowania z własnością display:inline; (wtedy zachowują się one jak zwykły tekst) i w kilku miejscach usunąć trzeba opływanie z lewej strony, a bloki okalające muszą mieć szerokość 100%.

ola001

Avatar: ola001

2008-06-12 19:40

Jeśli chodzi o stopkę - pomogło. :)
Zastosowałam Twoje wskazówki i teraz stopka jest wycentrowana. :)

Gorzej z szerokością prawej kolumny - zmieniłam wartość width na 538px i w IE wyświetla się tj trzeba a w Firefoxie jest dodawany do szerokosci padding.

Podejrzewam ze to IE źle interpretuje...

ola001

Avatar: ola001

2008-06-12 20:32

Już wiem - ustawilam padding w #page div.content na padding:10px 0 0 0; a dodałam ponizej taki kod:


#page div.content p{padding-left:20px;padding-right:20px;}



I teraz szerokość prawej kolumny wyswietla się tak samo w IE i Fire Foxie. ;)
pozdrawiam :)

Do góry
o nas | kontakt