div height issue with Mozilla & Opera

Forum Moderators: not2easy

Message Too Old, No Replies

div height issue with Mozilla & Opera

Cannot reference div height as % of table row height

chuckz

2:10 am on Mar 9, 2007 (gmt 0)

I have a site that works well in IE. I have divs set within table cells. The table row heights are set at 14% for 6 rows and 16% for one row. In the external css I have the div height set at 100%. IE seems to interperet this such that the div height is 100% of the row height. Therefore the div height is contained within the row. Not so in Mozilla, where it seems the height of the div appears to render as 100% of the page. If it is appropriate to provide a URL I will do so.

Setek

3:52 am on Mar 9, 2007 (gmt 0)

Not a URI - it's against Forum Rules - please look at the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

About your problem though - could you strip your code down bare (only so it still shows the problem) and then post it? Both (X)HTML and CSS?

chuckz

4:08 pm on Mar 11, 2007 (gmt 0)

Here, as suggested are pared down sample files(html amd css). The objective is to keep the div height spec as a % (100%). Viewed with IE, the row height holds at 14% and the div height is confined to the row. Viewed with Mozilla, the row height appears to be forced higher by the contents of the div.
-----------

CSS

html,
body {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

.row1specs {
height: 14%;
}

.sectionhead {
text-align: left;
border-style: solid;
border-style: ridge;
background: #ebebeb;
border-right-width: .05em;
border-left-width: .05em;
border-bottom-width:0em;
border-top-width: .05em;
border-color: gray;
height: 100%;
width: 100%;
float: left;
overflow:auto;
}

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>

</script>

</head>

<body>

abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
abcdefghi<br>
</div>
</td>
</tr>
<tr><td>
</td>
</tr>

</table>
</body>
</html>

Setek

12:47 am on Mar 12, 2007 (gmt 0)

Bearer of bad news :(This is working differently for standards-compliant browsers vs. IE due to IE being pushed into quirks mode - you don't have a full and correct doctype.

You can replace your current doctype with this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

... the problem with this is, it means IE will now display as the standards-compliant ones do, not the other way around.

It's a start, however, if you can start trying to make it look right in a standards-compliant browser (Firefox, Safari, Opera, though I still believe Firefox the best for this) and then see how it goes in IE.

chuckz

12:53 pm on Mar 12, 2007 (gmt 0)

I understand what is happening. So now the challenge is to find a standards compliant way of holding the row height to a set %, irrespective of the div with in it and the div's contents. I can do this if I set the div height within the css to an "em" spec, but I have a reason for wanting to use a "%" spec for the div height. Any ideas on how to do this would be appreciated.

SuzyUK

1:02 pm on Mar 12, 2007 (gmt 0)

hi chuckz

Q1. How complex is the table.. (e,g, rowspan - colspans)
Q2. does it have to be a table?

can your design not be approached in another way

chuckz

1:11 pm on Mar 12, 2007 (gmt 0)

Since a re-design without tables is going to require lots of work, I would prefer to see if it can be worked out using tables. As for the table complexity, the simplified example that I have provided is as basic a table as can be created, I think. And it illustrates the problem. If I can solve the issue for this very basic table design, then I expect that the problem will be solved for the real application.

SuzyUK

3:56 pm on Mar 12, 2007 (gmt 0)

just having a think, it should be possible..

where is the table getting it's height from? I'm testing right from root [html, body {height: 100%;}]

chuckz

4:53 pm on Mar 12, 2007 (gmt 0)

I have the table height shown (in the above code) within the table tag. It's set to 100%. I have the row height set within the external css to 14%.

SuzyUK

5:34 pm on Mar 12, 2007 (gmt 0)

s'ok it was silly question it should matter where it inherits the 100% from ;)

hmmm.. well I can get it to work in IE and Firefox, but Opera is being very weird, disappearing content and background color.. I'll show you what I have so you can try some stuff -

I did have another solution which works for them all though it would only work for a single column table I gotta go for a bit so maybe you and others will play around with this and I'll come back to see what I was missing!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {
padding: 0; margin: 0; height: 100%;
}
table {border: 0; width: 100%;}
table, tbody {height: 100%;} /* moz needs tbody */
tr {height: 10%;}
tr.r7 {height: 39%;} /* 1% less than necessary else there's a scrollbar in IE and FF must be rounding diff */
td {padding: 0; border: 0;}
/* all like the following two, even with row height but content disappears on Opera */
td {height: 10%;}
.r7 td {height: 39%;}
/* td {height: inherit;} /* IE and FF like this one */
/* td {height: 100%;} /* No one likes this one content disappears in opera too */
.scroll {
/* position: relative; z-index: 50; */
background: #dad;
height: 100%;
overflow: auto;/* removing this brings content back in Opera ... is where I'm stuck */
padding: 0; margin: 0;
*float: left;/* IE needs this it's here as *hack temporarily */
*width: 100%; /* ditto - and this */
}
tr.o {background: #eee;}
tr.e {background: #ffe;}
</style>

</head>
<body>
<table summary="#" cellpadding="0" cellspacing="0">
<tr class="row1 o">
<td>
<div class="scroll">
abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>
abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>
</div>
</td>
</tr>
<tr class="r2 e"><td> row 2</td></tr>
<tr class="r3 o"><td> row 3</td></tr>
<tr class="r4 e"><td> row 4</td></tr>
<tr class="r5 o"><td> row 5</td></tr>
<tr class="r6 e">
<td>
<div class="scroll">
abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>
abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>abcdefghi<br>
</div>
</td>
</tr>
<tr class="r7 o"><td> row 7</td></tr>
</table>
</body>
</html>

I just exaggerated the heights to make it easier to see of they were being respected.. tbody is the key for FF.. just Opera now - any any others like to report Mac test.. ;)

Suzy

[edited by: SuzyUK at 5:36 pm (utc) on Mar. 12, 2007]

SuzyUK

5:58 pm on Mar 12, 2007 (gmt 0)

hmmm - I think this could be one of those rare Opera Bugs? - I just came across another example (of scrolling div inside table cell) and the content was there.. but then on refresh it disappeared, eventually after a couple of refreshes it came back - anyone know of overflow problems in Opera?

chuckz

8:01 pm on Mar 12, 2007 (gmt 0)

Just to be clear... even in Opera I am not experiencing an overflow issue, and the div stays within the confines of the row height - provided that the div height is expressed in "em". The problem arises when expressing div height in "%". As a novice, this suggests to me that the difficulty that the browser is having is in understanding what the % relates to - percentage of what. I have reason for wanting to express div height in "%".

SuzyUK

9:49 pm on Mar 12, 2007 (gmt 0)

:( It's not looking good.. it's been years since I saw a bug (non IE that is) that disappointed me so much! - it's present in O8 as well (and probably previous too) - I'd thought better of Opera.

As far as I can tell it's a combination of a % based height - overflow: auto - and a table - as soon as you have those three ingredients Opera thinks that overflow:auto = overflow:hidden (and height:0). Well almost it's actually OK until the content overflows!

You can test this by adding a thick top/bottom border to the overflowing div, it will throw 100% height out of the window but..

overflow: visible does what it says, content will overflow the div which does take on the correct height as inherited from the table

overflow: scroll also does what it says - content is confined to the required height but both horizontal and vertical scrollbar appears (this appears to be closest to the desired effect)

but as soon as you as you add overflow: auto; - and the content does actually overflow - the whole lot gets cropped - if you've added the borders you can see that the whole div is collapsed you should now see a double width border and nothing else!

ackkk...

sorry chuckz I *think* I know what you want.. but it seems it's not going to happen unless you want to chuck opera Support out the window?

SuzyUK

9:52 pm on Mar 12, 2007 (gmt 0)

provided that the div height is expressed in "em"

Yep., agreed... it's only percentage it seems to be happening with.. if you can give an explicit width then you should be fine

As a novice, this suggests to me that the difficulty that the browser is having is in understanding what the % relates to - percentage of what.

I initially thought so too but alas I think it's more, and your request (using percentages) is perfectly reasonable IMHO!

[edited by: SuzyUK at 9:55 pm (utc) on Mar. 12, 2007]