PDA

Pogčedajte punu verziju : CSS i Firefox - Problem sa height


bokacbl
30. 03. 2007., 22:08
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

<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.... :1027:

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

BrainDamage
30. 03. 2007., 22:41
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., 12:53
Probaj sa 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., 14:29
zameni height:100% na #wrapper-u sa min-height:100%;
a za explorer < IE7 zasebno napravi height:100% preko conditional comments

bokacbl
03. 04. 2007., 00:06
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., 01:56
Imam isti problem, ali nazalost ne mogu da ga resim. Citao sam masu tuorijala i jos uvek imam problem.

Ovako izgleda kod:


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



<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
02. 05. 2007., 00:38
stavi clear:both; posle dva float div-a

maksim
03. 05. 2007., 06:54
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., 05:40
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....:1094:

xippi
06. 05. 2007., 06:19
http://www.positioniseverything.net/easyclearing.html