mozilla and overflow [Archive]

PDA

View Full Version : mozilla and overflow

angiras

02-13-2003, 10:20 AM

height:92%;
overflow:auto;

doesn't work with mozilla

with height in pixel it works

why ?

angiras

02-13-2003, 11:43 AM

it is for a dIV

cg9com

02-14-2003, 02:03 AM

try adding a 100% height attribute in your body and html CSS tree

angiras

02-14-2003, 05:53 AM

no it changes nothing

here <div id="corpsContenu"> is supposed to have a scroll

<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>div_scroll</title>
<style type="text/css" rel="stylesheet">
body
{
height:100%;
margin:0px;
padding:0px;
background-color:#ffeedd;
color:#000066;
overflow:hidden;
}
#tout
{
background-color:#ffeedd;
width:100%;
height:100%;
}
#header
{
height:32px;
background-color:#ffeedd;
color:#000066;
border:1px solid #000066;
}
#corps
{
background-color:transparent;
color:#000066;
height:auto;
text-align:left;
vertical-align:top;
}
#footer
{
height:32px;
background-color:#ffeedd;
color:#000066;
border:1px solid #000066;
}
#corpsContenu
{
display:inline;
width:100%;
height:100%;
overflow:auto;
}
</style>
</head>
<body>
<table id="tout">
<tr>
<td id="header">HEADER</td>
</tr>
<tr>
<td id="corps">
<div id="corpsContenu">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY 
</div>
</td>
</tr>
<tr>
<td id="footer">FOOTER</td>
</tr>
</table>
</body>
</html>

jkd

02-14-2003, 11:26 AM

Your corpsContenu is set to inline display. Inline boxes cannot be sized in a correct browser.

angiras

02-14-2003, 11:31 AM

yes it was a pasted error I have of course written display:block

but it change nothing

have you any idea ?

cg9com

02-14-2003, 02:29 PM

still no html height ...

angiras

02-14-2003, 03:13 PM

but html height is XHTML compatible ????

angiras

02-14-2003, 03:14 PM

you mean

<html style="height:100%"><head> ... ???

cg9com

02-14-2003, 03:52 PM

just place it in the CSS

html {
height:100%;
}

that should take care of your height problems...
yes its compatible

angiras

02-14-2003, 04:06 PM

you can try it by your own , it woks with IE but not with Mozilla and Opera

<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>div_scroll</title>
<style type="text/css" rel="stylesheet">
html
{
height:100%;
}
body
{
height:100%;
margin:0px;
padding:0px;
background-color:#ffeedd;
color:#000066;
overflow:hidden;
}
#tout
{
background-color:#ffeedd;
width:100%;
height:100%;
}
#header
{
height:32px;
background-color:#ffeedd;
color:#000066;
border:1px solid #000066;
}
#corps
{
background-color:transparent;
color:#000066;
height:auto;
text-align:left;
vertical-align:top;
}
#footer
{
height:32px;
background-color:#ffeedd;
color:#000066;
border:1px solid #000066;
}
#corpsContenu
{
display:block;
width:100%;
height:100%;
overflow:auto;
}
</style>
</head>
<body>
<table id="tout">
<tr>
<td id="header">HEADER</td>
</tr>
<tr>
<td id="corps">
<div id="corpsContenu">BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY 
</div>
</td>
</tr>
<tr>
<td id="footer">FOOTER</td>
</tr>
</table>
</body>
</html>

cg9com

02-14-2003, 06:30 PM

hmmm, i guess trial and error would be the best way to figure it out, have you tried replacing the # with . and just using class="" instead of id? do you really need the id?

also i thought rel="" only belonged in the <link> element, either way its not required in the <style>

angiras

02-14-2003, 08:05 PM

no same thing

I think Opera and Mozilla don't recognize a scroll:auto andheight with %

it works only with pixel

meow

02-14-2003, 09:50 PM

Me thinks you have to rethink a little. You have set everything to 100% height. 100% of _what_? 100% of 100% of 100%... that must be 100%! :p

The table is 100%, the TD doesn't have a height and a table expand to fit it's content, right? So that DIV will be as many lines as you put line breaks there, the TD will expand, the table will also expand and try to be 100% of the BODY which is 100% of the whole page's height which is decided by it's content.... Talk about loop. There is no overflow in the DIV, TD or TABLE.

Just curious, what does IE6 do if you delete the XML declaration so it goes into Standards Mode?

cg9com

02-14-2003, 10:28 PM

good point meow
see what happens when you remove that declaration .... also read this: http://www.codingforums.com/showthread.php?s=&threadid=12908

angiras

02-15-2003, 06:49 AM

here was my page

http://www.codingforums.com/showthread.php?s=&threadid=14616

the 100% everywhere is the result of cg9com recommandations

only my table is 100% and the middel TD width = auto

into that TD I want to put a 100% height div with overflow

angiras

02-15-2003, 07:01 AM

here is my code with a new version, it works perfectly with OPERA 7 and IE 6 , but not with MOZILLA (no overflow for the div)

of course in normal page stylesheets are external (it just easyer to read in that way)

---------------------------------------------------------------------------------

<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>div_scroll</title>
<style type="text/css">
html
{
height:100%;
}
body
{
margin:0px;
padding:0px;
background-color:#ffeedd;
color:#000066;
overflow:hidden;
}

.header
{
height:5%;
background-color:#ffeedd;
color:#000066;
border:1px solid #000066;
margin:0px;
width:100%;
}
#content
{
display:block;
width:100%;
height:95%;
overflow:auto;
margin:0px;
}
</style>
</head>
<body>
<table class="header">
<tr>
<td>HEADER</td>
</tr></table>
<div id="content">
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
</div>
</body>
</html>

----------------------------------------------------

if anyone has an exanple of DIV with overflow AND % height , ?

thank you for helping

angiras

02-15-2003, 07:30 AM

this also doen't work with Mozilla

------------------------------------------------

<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>div_scroll</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
border:0 none;
background-color:#ffeedd;
color:#000066;
overflow:hidden;
background-color:tomato;
}
.content
{
width:100%;
height:99%;
margin:0px;
background-color:transparent;
}
.tdContent
{
width:auto;
height:auto;
background-color:tan;
vertical-align:top;
}
</style>
</head>
<body>
<table class="content">
<tr>
<td class="tdContent" >
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
BODY BODY BODY BODY BODY BODY BODY 
</td>
</tr>
</table>
</body>
</html>

cg9com

02-15-2003, 08:48 AM

Originally posted by angiras
the 100% everywhere is the result of cg9com recommandations

:( :eek: i actually only told you to place it in 2 spots.

angiras

02-15-2003, 09:04 AM

yes I have tried it into body, then html , then html and body, but it seems not to be the problem

mozilla has another meaning for height = 100% than IE and OPRA

and for the moment nobody seems to know a solution

thank you for helping

brothercake

02-16-2003, 05:34 AM

I'd say, do a "best fit" and then tweak it retrospectively with javascript

angiras

02-16-2003, 06:14 AM

yes of course , but I wanted to avoid javascript
and I find it not normal not to fix it with only CSS2

brothercake

02-16-2003, 09:18 AM

There's a variety of CSS hacks you can try ... http://css-discuss.incutio.com/?page=CssHacks

angiras

02-16-2003, 09:44 AM

thank you brothercake

angiras

05-26-2003, 08:57 AM

now it works for opera mozilla IE las versions

I just wanted to say that I got a lateral scroll
even with HTML and BODY : 100%, it was because of a form

I must put an ID to the form tag
and do

html
{
width:100%;
height:100%;
}
body
{
width:100%;
height:100%;
overflow:hidden;
}
#frm
{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#content
{

all the content here

anf it works fiiiiiiiiiiiiiiiiiiiiiiiiiiiiine :-)))