[FireFox] getElementById.style.height niet ondersteund?

[Urk]

Heb de search en Google al gebruikt maar kom er niet uit, zal wel weer niet goed (op de juiste kernwoorden) gezocht hebben...

Ik roep onderstaande functie aan om een pagina mooi over de lengte te laten vullen, in IE werkt dit prima, echter in FireFox niet.
FireFox ondersteund wel document.body.clientHeight, want als ik deze alert() krijg ik wel een waarde.

HTML:

 <script language="JavaScript" type="text/javascript">
 function tableHeight() {
  document.getElementById('leftmenu').style.height = document.body.clientHeight-454;
 }
 </script>

[...]
 <tr>
  <td id="leftmenu" class="leftmenucontenttd" valign="top">
  <!-- #include file="includes/leftmenu.asp" -->
  </td>
 </tr>
[...]

Weet iemand hoe ik dit in FireFox aan de praat krijg? Heb ook:

HTML:

document.getElementById('leftmenu').height = document.body.clientHeight-454;

al geprobeerd maar dat werkt in FF ook niet.

Alvast

Enne, oh ja: ik wil gebruik blijven maken van TABLES vanwege opsommingen. Dus niet dat jullie gelijk beginnen over gebruik geen TABLES

[ Voor 15% gewijzigd door Urk op 27-05-2005 14:32 ]

[sopsop]

als height niet in css gevuld is, dan geeft hij ook geen waarde terug. Je kunt 'm wel zetten.

Probeer eens document.getElementById('jenaam').offsetHeight (ik weet niet of de hoofdletters goed staan, mag je zelf opzoeken).

[André]

Je geeft niet aan welke eenheid de height heeft, 10 koeien, 10 punten of 10 pixels

code:

document.getElementById('leftmenu').style.height = (document.body.clientHeight - 454) + "px";

[ Voor 29% gewijzigd door André op 27-05-2005 14:33 ]

[Urk]

boppert schreef op vrijdag 27 mei 2005 @ 14:32:
als height niet in css gevuld is, dan geeft hij ook geen waarde terug. Je kunt 'm wel zetten.

Probeer eens document.getElementById('jenaam').offsetHeight (ik weet niet of de hoofdletters goed staan, mag je zelf opzoeken).

Thanks, ik had offsetHeight ook al geprobeerd, maar dat werkte ook niet en werd zo te zien ook niet ondersteund door IE.
Ik wil de waarde trouwens ook alleen maar zetten, en niet lezen. Was alleen om te testen.

[Urk]

André schreef op vrijdag 27 mei 2005 @ 14:32:
Je geeft niet aan welke eenheid de height heeft, 10 koeien, 10 punten of 10 pixels

code:

document.getElementById('leftmenu').style.height = (document.body.clientHeight - 454) + "px";

Damn. ik ging uit van 10 koeien
Nee, ik had gister iets geprobeerd hiermee, namelijk het uitlezen hiervan zonder dat ik PX meegaf, en toch kreeg ik in IE 373px als waarde terug.
Het zal wel aan mij liggen.

Het werkt in ieder geval, dus bedankt. Nog even 1px weg werken die FF nog onder de pagina laat staan en dus nog een klein stukje daardoor kan scrollen, in IE is het perfect.

[André]

Hmm, toch nog even een opmerking: waar haal jij die 454 vandaan? Dat kan bij mij een hele andere waarde zijn, ik neem aan dat dat de hoogte van de toolbars zijn? Dat zou betekenen dat het er alleen goed uitziet bij jouzelf, ik zou dus die 454 berekenen door de paginahoogte van de schermhoogte af te trekken (screen.height) of van je windowhoogte.

[ Voor 5% gewijzigd door André op 27-05-2005 14:52 ]

[Urk]

André schreef op vrijdag 27 mei 2005 @ 14:51:
Hmm, toch nog even een opmerking: waar haal jij die 454 vandaan? Dat kan bij mij een hele andere waarde zijn, ik neem aan dat dat de hoogte van de toolbars zijn? Dat zou betekenen dat het er alleen goed uitziet bij jouzelf, ik zou dus die 454 berekenen door de paginahoogte van de schermhoogte af te trekken (screen.height) of van je windowhoogte.

Dat is niet juist.
document.body.clientHeight haalt de hoogte wat voor de website beschikbaar is, dus zonder toolbars en adresbars. Die 454 is de vaste hoogte van de header en footer.
Wat dus overblijft in die rekensom is dus de hoogte die beschikbaar is voor de content.
Klopt dan toch?

[André]

Ja oke, dan klopt het wel

[Urk]

Gelukkig, was al bang dat ik het fout had.
Toch nog steeds een probleempje wat ik niet weg krijg:

image verwijderd

In firefox blijven er nog 2 pixels onder alles staan zodat je toch nog de scrollbar actief krijgt. In IE is dit niet zo.
Het bovenstaande plaatje is 4x ingezoomed.
In mijn BODY style in mijn CSS staat al:

Cascading Stylesheet:

 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;

[ Voor 6% gewijzigd door Urk op 25-10-2005 22:14 ]

[André]

Zet de border/padding/margin van de table of td dan ook eens op 0.

[Urk]

André schreef op vrijdag 27 mei 2005 @ 15:11:
Zet de border/padding/margin van de table of td dan ook eens op 0.

Vreemd, dat werkt allemaal niet, wat ik ook doe.

[Urk]

Dit is m'n CSS:

Cascading Stylesheet:

html
{
 height: 100%;
}
body
{
 height: 100%;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 background-color: #ECEEF1;
}
form
{
 margin: 0px 0px 0px 0px;
}
table
{
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-size: 11px;
}
td
{
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 14px;
 height: 16px;
}
a
{
 font-size: 11px;
 color: #6E8EAB;
 font-weight: bold;
 text-decoration: none;
}
a:hover
{
 font-size: 11px;
 color: #6E8EAB;
 font-weight: bold;
 text-decoration: underline;
}
.leftmenucontenttd
{
 padding-bottom: 10px;
 padding-left: 10px;
 padding-right: 10px;
}
.leftmenucontenttable td
{
 font-size: 10px;
}
.leftmenucontenttable td.seperateline
{
 height: 1px;
 background-color: #C6D1DC;
}
.leftmenucontenttable a
{
 font-size: 10px;
 font-weight: bold;
 color: #6E8EAB;
}
.leftmenucontenttable a:hover
{
 font-size: 10px;
 font-weight: bold;
 color: #6E8EAB;
}
.leftmenutitle
{
 font-weight: bold;
 color: #6E8EAB;
}
.homecontenttable
{
 background: url('../images/home_contentbackground.jpg');
 background-repeat: no-repeat;
 vertical-align: top;
 padding-top: 20px;
 padding-bottom: 15px;
 padding-left: 15px;
 padding-right: 25px;
}
.contenttable
{
 background: url('../images/content_background.jpg');
 background-repeat: no-repeat;
 vertical-align: top;
 padding-top: 20px;
 padding-bottom: 15px;
 padding-left: 15px;
 padding-right: 25px;
}
.offertable
{
 background: url('../images/offer_background.jpg');
 background-repeat: no-repeat;
 vertical-align: top;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 padding-right: 10px;
 font-size: 10px;
 color: #617E9E;
}
.footertext
{
 background: url('../images/footer_menubg2.jpg');
 background-repeat: no-repeat;
 vertical-align: top;
 padding-top: 6px;
 padding-left: 5px;
 padding-right: 5px;
 font-size: 10px;
}
.footertext a
{
 font-size: 10px;
 color: white;
 font-weight: bold;
 text-decoration: none;
}
.footertext a:hover
{
 font-size: 10px;
 color: white;
 font-weight: bold;
 text-decoration: underline;
}

[Urk]

Hmmm....ik weet nog steeds niet waar het nou in zit. Het lijkt me als ik het zo zie dat het ergens een border moet zijn.
Het vreemde vind ik echter dat als ik van de buitenste table deze style meegeef ik geen border te zien krijg in FF.

style="border: 1px solid black;"

[watzie]

en de padding van je body zelf?

body{
border: none;
margin: 0;
padding: 0;
.... rest van je props
}

[Urk]

watzie schreef op vrijdag 27 mei 2005 @ 16:18:
en de padding van je body zelf?

body{
border: none;
margin: 0;
padding: 0;
.... rest van je props
}

Nee, dat werkt ook allemaal niet...

[Verwijderd]

Cascading Stylesheet:

*{margin:0;padding:0}

... al getest neem ik aan?

[Urk]

Verwijderd schreef op vrijdag 27 mei 2005 @ 17:16:

Cascading Stylesheet:

*{margin:0;padding:0}

... al getest neem ik aan?

Weer wat geleerd, wist helemaal niet dat dat kon. Ik heb dit bovenaan bovenstaande stylesheet toegevoegd maar het probleem blijft.

[Verwijderd]

Is er ergens een testcase? (Toevallig ergens wat white space tussen elementen enzo..?)