CSS i Firefox - Problem sa height

bokacbl · 30. 03. 2007.

Pozdrav,
Pretpostavljam da je ovo cest problem, ali ja sam pregledao ogroman broj nekih CSS tutorijala i sajtova za ovaj problem ali nisam nasao rjesenje da se wrapper div ili container razvuce po visini u zavisnosti od sadrzaja

Kôd:

<html>
<head>
<title>Welcome {$username} - Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/bg.jpg">
<div id="wrapper">
	<div id="header">
<img src="images/logo2.jpg" width="766" height="250" alt="Members area" />
<div id="navcontainer">
<div id="box"><a href="index.php">HOME</a></div>
{foreach from=$secs item=sec}
<div id="box"><a href="index.php?section={$sec.secid}">{$sec.name}</a></div>
{/foreach}
</div>
</div>
<div id="container">
<div id="side-a">
  <div id="main_container">
     <div id="title">
        <div id="title_box">NEWS</div>
     </div>
<div id="inner_box">
{* Display news  *}
</div>
</div>

<div id="main_container">
<div id="title">
<div id="title_box">NEW PICTURES</div>
</div>
{* Display newest pictures  *}
</div>
</div>

<div id="main_container">
<div id="title">
<div id="title_box">PICTURES COMING TOMMOROW</div>
</div>
<div id="inner_box">
{* Display pictures coming tomorow  *}
</div>
</div>

</div>
		
<div id="side-b">
<div id="navcon_b">
<div id="title_b">
<div id="title_box">Top Gallery</div>
</div>
<div id="inner_box">
{* Display top rated or most viewed pictures  *}
</div>

</div>

<div id="footer">
<div id="title_box">NEW MOVIES</div>
</div>

<div id="movie">
{* Display new videos  *}<div id="side-a">
  <div id="main_container">
     <div id="title">
        <div id="title_box">NEWS</div>
     </div>
<div id="inner_box">
{* Display news  *}
{carma_news count=5 start=0 section="SeksCentrala.com - News"}</div>
</div>

<div id="main_container">
<div id="title">
<div id="title_box">NEW PICTURES</div>
</div>
{* Display newest pictures  *}
<div id="inner_box">{carma_newest count=3 tpl=newest_items2 type=gal section=17}</div>
</div>

<div id="main_container">
<div id="title">
<div id="title_box">PICTURES COMING TOMMOROW</div>
</div>
<div id="inner_box">
{* Display pictures coming tomorow  *}
{carma_upcoming count=3 tpl=upcoming_items2 type=gal section=17}</div>
</div>

</div>
		
<div id="side-b">
<div id="navcon_b">
<div id="title_b">
<div id="title_box">Top Gallery</div>
</div>
<div id="inner_box">
{* Display top rated or most viewed pictures  *}
</div>
</div>

</div>

<div id="footer">
<div id="title_box">NEW MOVIES</div>
</div>

<div id="movie">
{* Display new videos  *}
</div>


<div id="footer">
<div id="title_box"><a href="index.php?section=18">OLDER MOVIES</a></div>
</div>
<div style="clear:both;"> </div>
</div>

</div>
</div> 
</body>
</html>

Problem se javlja samo u firefox-u evo kako izgleda:
http://www.infomedia.ba/layout.jpg
Jednostavno nece da razvuce ovaj div po visini u zavisnosti od sadrzaja, toliko sam opcija isprobao pa pretpostavljam da je css poprilicno zabrljan....

http://www.infomedia.ba/style.css

BrainDamage · 30. 03. 2007.

A da maknes height: 100% sa #containter i/ili #wrapper (probaj sa web developer ekstenzijom da vidis koji od njih ostaje na fiksnoj visini, ovako me mrzi da "provaljujem")? Ja nikad nisam nista dobro dobio kad sam stavljao height: 100%

Ili te neki float zeza...

Dragan Babić · 31. 03. 2007.

Probaj sa

Kôd:

html, body{ height:100%; }

To obično natera elemente da budu 100% po visini, mada ne znam da li si to već uradio.

ivanhoe · 31. 03. 2007.

zameni height:100% na #wrapper-u sa min-height:100%;
a za explorer < IE7 zasebno napravi height:100% preko conditional comments

bokacbl · 02. 04. 2007.

na pomoci uspio sam to da rijesim sa kombinacijom vasih rjesenja...
postavio sam ovo sto je Dragan rekao i sklonio iz wrappera i containera height tag..

maksim · 01. 05. 2007.

Imam isti problem, ali nazalost ne mogu da ga resim. Citao sam masu tuorijala i jos uvek imam problem.

Ovako izgleda kod:

Kôd:

html, body  {
    margin: 0;
	padding: 0;
	background: #3B3B3B;
	height: 100%;
}

#page {
	width: 958px;
	margin: 0 auto;
	padding:0;
	min-height: 100%;
	background: white;
}

#left_content {
	float:left;
	width: 616px;
	margin:0;
	padding:0px 0px 0px 0px;
 	background: white;

}

#right_content {
	float:right;
	width:342px;
	margin:0;
	padding:0px 0px 0px 0px;
  	background: white; 


}

#first {
	width:423px;
	float:left;
	margin: 0px 0px 0px 0px;
	padding: 11px 11px 11px 11px;
  	background: white; 

}


#third {
	width:160px;
	float:left;
	margin: 0;
	padding: 11px 11px 11px 0px;
	background: white;


}

#second {
	float:left;
	width: 160px;
	margin:0;
	padding: 11px 11px 11px 0px;
  	background: white;

}

#forth {
	float:left;
	width: 160px;
	margin:0px 0px 0px 0px;
	padding: 11px 11px 11px 0px;
  	background: white; 	

}

i HTML

Kôd:

<div id="page">

 <div id="left_content">
    <div id="first"></div>
    <div id="second"></div>
 </div>

 <div id="right_content">
    <div id="third"></div>
    <div id="forth"></div>
 </div>

</div>

Stavio sam height=100% u body tagu i min-height u PAGE. Takodje, sam pokusao da dam min-height=100% svim ostalim divovima ali ni to ne radi.

Trenutno me ne brine IE, vec dobri stari Firefox.....

u cemu gresim...

((

conica · 01. 05. 2007.

stavi clear:both; posle dva float div-a

maksim · 03. 05. 2007.

Clear:both remeti strukturu floatera....ne vidim kako bi ovo moglo da pomogne. Mozda gresim.....ako mozes objasni malo u detalje....

maksim · 06. 05. 2007.

Citat:

Originalno napisao conica

stavi clear:both; posle dva float div-a

Problem resen....

uklonio sam divove left_content i right_content i ubacio sam clear:both (hvala conica) na kraju Page diva. Ovo zajedno sa height: 100% u body tagu i min-height: 100% u ostalim divovima je resilo moj problem....

xippi · 06. 05. 2007.

http://www.positioniseverything.net/easyclearing.html

31. 03. 2007.	#4
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	zameni height:100% na #wrapper-u sa min-height:100%; a za explorer < IE7 zasebno napravi height:100% preko conditional comments __________________ Leadership is the art of getting people to want to do what you know must be done. Poslednja izmena od ivanhoe : 31. 03. 2007. u 13:38.

02. 04. 2007.	#5
bokacbl profesionalac Professional Datum učlanjenja: 09.01.2006 Lokacija: Banja Luka Poruke: 262 Hvala: 24 7 "Hvala" u 5 poruka	hvala... na pomoci uspio sam to da rijesim sa kombinacijom vasih rjesenja... postavio sam ovo sto je Dragan rekao i sklonio iz wrappera i containera height tag.. __________________ Infomedia d.o.o. - Poslovni Hosting InternetMarketing.ba - Registracija .BA domena / SMS Naplata / Izrada internet aplikacija

01. 05. 2007.	#7
conica Pilece krilce(reš) Master Datum učlanjenja: 12.01.2006 Lokacija: Little boy's playground Poruke: 604 Hvala: 47 61 "Hvala" u 27 poruka	stavi clear:both; posle dva float div-a __________________ HomeOfWeb \| BLOG: (hrk)pljuc.com

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
[PROBLEM] - Firefox (a bogami ni IE) ne otvara localhost	MaxMagnus	Hardware	5	12. 09. 2008. 15:55
Height 100% problem	Mort	(X)HTML, JavaScript, DHTML, XML, CSS	6	16. 01. 2008. 11:25
Firefox form elements problem	Dragan Babić	Web aplikacije, web servisi i software	6	01. 11. 2006. 00:03
Firefox 3 ?	blogowski	Web aplikacije, web servisi i software	1	21. 10. 2006. 13:19
Problem s Firefox-om - Help! I need somebody :)	Milos Vukotic	Web aplikacije, web servisi i software	2	11. 01. 2006. 07:57

30. 03. 2007.	#2
BrainDamage Comfortably Numb Professional Datum učlanjenja: 15.03.2007 Lokacija: Novi Sad Poruke: 237 Hvala: 13 4 "Hvala" u 3 poruka	A da maknes height: 100% sa #containter i/ili #wrapper (probaj sa web developer ekstenzijom da vidis koji od njih ostaje na fiksnoj visini, ovako me mrzi da "provaljujem")? Ja nikad nisam nista dobro dobio kad sam stavljao height: 100% Ili te neki float zeza...

31. 03. 2007.	#3
Dragan Babić Designer guy Wrote a book Datum učlanjenja: 06.06.2005 Lokacija: Novi Sad Poruke: 1.373 Hvala: 55 42 "Hvala" u 22 poruka	Probaj sa Kôd: html, body{ height:100%; } To obično natera elemente da budu 100% po visini, mada ne znam da li si to već uradio. __________________ Plakatt — objavi, razglasi i saznaj za događaje DnevnikEklektika.com \| Sprawsm

03. 05. 2007.	#8
maksim član Na probnom radu Datum učlanjenja: 24.10.2006 Lokacija: us Poruke: 31 Hvala: 2 2 "Hvala" u 2 poruka	Clear:both remeti strukturu floatera....ne vidim kako bi ovo moglo da pomogne. Mozda gresim.....ako mozes objasni malo u detalje....

06. 05. 2007.	#10
xippi xippster Master Datum učlanjenja: 16.06.2005 Lokacija: Beograd Poruke: 681 Hvala: 102 138 "Hvala" u 84 poruka	http://www.positioniseverything.net/easyclearing.html