CODEWITHSUNDEEP
javascripthtmlcss
nutty
nutty

Reputation: 67

How to set table height on chrome and firefox

I have a HTML table tag as following

<table class="globaltable" border="0" cellspacing="0" cellpadding="0" width="100%" align="center" height="72%" onclick="alert(this.offsetHeight)">

where in IE8 i have onclick value as 420, in chrome as 480 and in firefox as 472. How do i make it uniform across different browsers.

Upvotes: 0

Views: 1277

Answers (5)

karkael
karkael

Reputation: 473

Each browser is different, so that the offset window. Browser toolbars are the have different sizes and this affects the size of your window. If you want to produce "responsive design" uses percentages as you do. If you want the window does not change the size of your element, instead use a fixed size.

Be careful, Mozilla does not support height:100%. You rather use JavaScript and this kind of function: 

resizeFn = function(){
    document.querySelector( ".globaltable" )
        .style.height = ( window.offsetHeight * 42 / 100 );
};

window.addEventListener && addEventListener( "resize", resizeFn ) && addEventListener( "load", resizeFn ) || 
window.attachEvent && attachEvent( "resize", resizeFn ) && attachEvent( "load", resizeFn );

Upvotes: 0

UdayKiran Pulipati
UdayKiran Pulipati

Reputation: 6667

Mention height in style attribute. If you use height in px it is common in all browsers. If you use % it varies based on browser computability.

<table class="globaltable" border="0" cellspacing="0" cellpadding="0"  width="100%"
 style="height: 720px;" align="center" onclick="alert(this.offsetHeight)">  
<tr>
    <td>

    </td>
</tr>

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76804

globaltable is inside another tag. That tag has a height. Your rule states that globaltable will have a height which is 72% of its parent. So you need to make sure that the parent of globaltable has a fixed height.

Upvotes: 0

NimaNr
NimaNr

Reputation: 542

Height parameter is based on the browser toolbars and tools which they increase or decrease the space. You are using 72 present of visible space. For example if you Restore your window and increase the height of you page, you will see different size in any browser. So, what should we do? I recommend you to use height of page with pixel based size like this: instead of 

html, body { height :100%; }

use

html, body { height :300px; }

Upvotes: 0

user2841910
user2841910

Reputation:

Ok so your setting the table to 72% of what???

you need to add the folling to your html,body css file

html, body{
    height: 100%;
}

this will allow the tables to be the same across all the browsers as you have then set the parent hight

Upvotes: 0

Related Questions