Firefox i problem z wysokością w CSS


(Dragon1992) #1

Jak w temacie.

Myślałem, że po uporaniu się z marginesem, droga do ukończenia strony będzie już prosta, jednak myliłem się.

Pozostał jeszcze jeden problem, tym razem odziwo z firefox'em.

Wygląda to następująco:

screenshot1203605712pl5.th.jpg

Kontener po prostu wystaje poza dolną krawędź obszaru głównego, który nie dostosowuje swojej wysokości do wysokości elementów w nim zawartych.

W pozostałych przegladarkach, nie ma tego problemu.

Jeśli ktoś zna odpowiedź na pytanie 'Jak to naprawić?', byłbym wdzięczny za podzielenie się wiedzą na ten temat.


(system) #2

Bez kodu można tylko gdybać...ale postaram się. Dopisz elementowi nadrzędnemu

overflow: hidden;

(Dragon1992) #3

Przepraszam, umknęło mi to. :stuck_out_tongue:

Kod CSS:

body {

	background-color: #FFFFFA1;

}


#main_area {

	position: relative;

	left: 100px;

	width: 750px;

	height: 110%;

	border: 7px #FFBC79 solid;

	background-color: #FFAA55;

}


#left_panel {

	width: 140px;

	position: relative;

	margin-right: 9px;

	top: 5px;

}


*html #left_panel {

	margin-right: 0;

	top: 0;

	line-height: .9em;

}


#right_panel {

	width: 150px;

	float: right;

	background-color: white;

	border: 1px #F2F2F2 solid;

	position: relative;

	top: 5px;

	margin: 0;

	font-size: 11px;

	height: 400px;


}


*html #right_panel{

	position: relative;

	left: 4px;

}


#content_area {

	position: relative;	

	float: right;

	top: 5px;

	left: -7px;

	width: 440px;

	min-height: 600px;

	border: 1px lightgray solid;

	background-color: white;

	margin-bottom: 20px;

}


*html #content_area {

	position: relative;

	left: -1px;

}



#logo {

	position: relative;

	left: 5px;

	width: 740px;

	background-color: #FAFAFA;

	height: 130px;

	margin-bottom: 5px;

}


*html #logo {

	position: relative;

	left: 0;

}

Kod html taki jak poprzednio, ale wrzucę główną część, żeby nie szukać:

<?php include('pliki/panels/header.php'); ?>


?php include('pliki/panels/right.php'); ?

?php include('pliki/content/news.php'); ?

?php include('pliki/panels/left.html'); ?

?php include('pliki/panels/footer.php'); ?

[/code]

A overflow'em próbowałem, ale niebardzo wychodziło.

Poza tym trzeba by było dla każdej treści osobno ustawiać wysokość stron, co raczej mija się nieco z celem.


(system) #4

Gdy dałem overflow: hidden #main_area to przestał wychodzić za kontener.

Daj też #right_panel

height: 100%;

aby zajmował taką wysokość jak kontener w którym jest.


(Dragon1992) #5

Fakt. Działa.

Ale pozostaje jeszcze kwestia tego, co robić, gdy tekstu będzie więcej.

Jest jakiś sposób, żeby sam dopasowywał wyskokość, czy trzeba dla każdej strony ustawiać ręcznie?


(system) #6

Sam div będzie się rozciągał. Tylko że w ie nie działa min...trzeba napisać

height: auto !important;

height: 600px; /* IE */

min-height: 600px;

temu div #content_area.


(Dragon1992) #7

Dodałem to, ale teraz #content_area "chowa się" dzięki właściwości overflow: hidden, dla obszaru głównego.

Po jej usunięciu wracamy niestety do punktu wyjścia.

Przepraszam, że tak męczę, ale to na prawdę ważne, więc proszę o zrozumienie, chociaż w minimalnym stopniu :).


(system) #8

Mi działa dobrze, dam cały styl bo może coś przeoczyłem.

body {

       background-color: #FFFFFA1;

    }


    #main_area {

		   overflow: hidden;

       position: relative;

       left: 100px;

       width: 750px;

       height: 110%;

       border: 7px #FFBC79 solid;

       background-color: #FFAA55;

    }


    #left_panel {

       width: 140px;

			 position: relative;

       margin-right: 9px;

       top: 5px;

    }


    *html #left_panel {

       margin-right: 0;

       top: 0;

       line-height: .9em;

    }


    #right_panel {

       width: 150px;

			 height: 100%;

       float: right;

       background-color: white;

       border: 1px #F2F2F2 solid;

       position: relative;

       top: 5px;

       margin: 0;

       font-size: 11px;


    }


    *html #right_panel{

       position: relative;

       left: 4px;

    }


    #content_area {

       position: relative;   

       float: right;

       top: 5px;

       left: -7px;

       width: 440px;

       height: auto !important;

       height: 600px; /* IE */

       min-height: 600px;

       border: 1px lightgray solid;

       background-color: white;

       margin-bottom: 20px;

    }


    *html #content_area {

       position: relative;

       left: -1px;

    }



    #logo {

       position: relative;

       left: 5px;

       width: 740px;

       background-color: #FAFAFA;

       height: 130px;

       margin-bottom: 5px;

    }


    *html #logo {

       position: relative;

       left: 0;

    }

(Dragon1992) #9

Niestety, ale cały czas to samo.

Tu jest link do strony, na moim serwerze:

http://dragon257.ovh.org/oszkole.php

(nie wygląda to specjalnie ciekawie, ale to dopiero projekt :P).

Overflow'em raczej nie da się tego rozwiązać, gdyż wtedy ukrywa treść również w Operze i IE (chociaż w tym przypadku można napisać ustawienia tylko dla IE).


(system) #10

Daj stronie doctype i będzie dobrze. Doctype to podstawa każdej strony!

ramy strony


(Dragon1992) #11

Serdecznie dziękuję za pomoc. Teraz wszystko działa jak należy. :slight_smile: