www.webdeveloper.com
Results 1 to 3 of 3

Thread: Creting tables of equal heights

  1. #1
    Join Date
    Apr 2008
    Posts
    84

    Creting tables of equal heights

    1) I have two tables which are of different heights because of content. Sidebar table is floated to the left of main content table.

    I am making both tables of equal height using javascript. Code is given below. This code works fine in IE8 and both tables height is set to the higher height table. But this code does not work in FireFox.

    Whats the problem ? What shall I do to make sure this code runs in FireFox also ?

    2) When sidebar table is floated besides main content table, in FireFox, it floats fine and does not leave any space between two tables. But in IE8, there is some space left between two tables. Why is that and how can I get rid of this space ?
    Code:
    <html>
    	<head>
    		<title>Assignment 8 - Trial 2 - With Tables</title>
    		<style>
    			#mainheading{
    				width:60%;
    				height:100px;
    				background-color:#0022ff;
    				border:1;
    				text-align:left;
    				color:#990000;
    			}
    			#maintd{
    				color:#005500;
    			}
    			#subheading{
    				width:60%;
    				height:50px;
    				background-color:#0011ee;
    				border-width:1px;
    				text-align:left;
    				border-color:yellow;
    				border-spacing:2px;
    				border-collapse:collapse;
    			}
    			.subheadtd{
    				border:thin red dotted;
    				background-color:#00ff00;
    				color:#ff0000;
    				margin:2px;
    				font-size:20px;
    				text-align:center;
    			}
    
    			#maincontent{
    				width:40%;
    				background-color:#00eeff;
    				border-right:1px #223344;
    				text-align:justify;
    				vertical-align:top;
    				color:#667700;
    				float:left;
    			}
    			.paraheading{
    				color:0077bb;
    				font-size:30px;
    			}
    
    			#top{
    				border-space:0;
    			}
    
    			#sidebar{
    				width:20%;
    				align:right;
    				background-color:#00ffaa;
    				border:1;
    				text-align:justify;
    				color:#667700;
    				vertical-align:top;
    			}
    
    			.headhr{
    				color:#ff0000;
    				height:2px;
    				width:200px;
    			}
    
    			.subheadhr{
    				color:#999999;
    				height:1px;
    				width:275px;
    			}
    			.sbheading{
    				font-size:21px;
    				color:#009944;
    			}
    
    			.linkheading{
    				font-size:18px;
    				color:#0055bb;
    			}
    
    			.cell1{
    				vertical-align:top;
    			}
    
    			.mchr{
    				width:90%;
    			}
    		</style>
    		<script type="text/javascript">
    			function equalHeight(){
    				var mht = document.getElementById('maincontent').clientHeight;
    				alert("mht = "+mht);
    				var sht = document.getElementById('sidebar').clientHeight;
    				alert("sht = "+sht);
    				if(mht > sht){
    					document.getElementById('sidebar').height = mht;
    				}
    				else {
    					document.getElementById('maincontent').height = sht;
    
    				}
    			}
    		</script>
    
    	</head>
    	<body onload="equalHeight()">
    		<table id=mainheading><tr><td id=maintd><h1><big>SiliconIndia</big></h1></td></tr></table>
    
    		<table id=subheading><tr><td class=subheadtd>Home</td><td class=subheadtd>Style Demo</td><td class=subheadtd>Downloads</td><td class=subheadtd>Services</td><td class=subheadtd>Support</td><td class=subheadtd>About</td></tr></table>
    		<table id="top">
    		<table id=maincontent>
    				<tr> <td class="cell1">
    					<strong class=paraheading>Read Me First</strong><hr class="mchr"/>
    					filed under <a href=#>templates, internet</a><br /><br />
    
    					<p>
    					CoolBlue is a free website template by styleshout.com. This work is released and licensed under the Creative Commons Attribution 3.0 License, which means that you are free to use and modify it for any personal or commercial purpose. All I ask is that you give me credit by including a link back to my website.</p>
    
    				 	<p>You can find more of my free template designs at my website. For premium commercial designs, you can check out Themeforest.</p>
    				</td> </tr>
    
    				<tr> <td class="cell1">
    					<strong class=paraheading>Lorem Tellus Eleifend Magna</strong><hr class="mchr" />
    					filed under templates, <a href=#>internet</a><br /><br />
    
    
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    
    					<p>Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    				</td> </tr>
    
    				<tr> <td class="cell1">
    					<strong class=paraheading>Lorem Ipsum Dolor Sit Amet</strong><hr class="mchr"/>
    					Filed under <a href=#>templates, internet</a><br /><br />
    
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    
    					<p>Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    				</td> </tr>
    		</table>
    
    
    		<table id=sidebar>
    
    			<tr><th class=sbheading>Sidebar Menu <hr class=headhr /></th></tr>
    
    				<tr><td class=linkheading>Home <hr class=subheadhr /></th></td>
    				<tr><td class=linkheading>TemplateInfo<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Style Demo<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Blog<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Archives<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Web Templates<hr class=subheadhr /></td></tr>
    
    		 	<tr><th class=sbheading>Sponsors<hr class=headhr /></th></tr>
    
    				<tr><td class=linkheading>Themeforest Site Templates, Web & CMS Themes<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>4Templates Low Cost High-Quality Templates<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Templatemonster Delivering the Best Templates on the Net<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Graphic River Awesome Stock Graphics<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Dreamhost Premium Webhosting. Use the promocode sshout and save 50 USD<hr class=subheadhr /></td></tr>
    
    			<tr><th class=sbheading>Most Popular<hr class=headhr /></th></tr>
    
    				<tr><td class=linkheading>Lorem ipsum dolor sit amet, consectetuer adipiscing elit<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Cras fringilla magna. Phasellus suscipit<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Morbi tincidunt, orci ac convallis aliquam<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Ipsum dolor sit amet, consectetuer adipiscing elit<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem<hr class=subheadhr /></td></tr>
        	</table>
        	</table>
    
    		<table>Bottom table</table>
    	</body>
    </html>
    Thanks

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234
    Use Obj.style.height=similarHEIGHTS;

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Added a doctype, and changed the height more like WyCnet suggested previously:

    Code:
    <!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="en" lang="en">
    	<head>
    		<title>Assignment 8 - Trial 2 - With Tables</title>
    		<style>
    			#mainheading{
    				width:60&#37;;
    				height:100px;
    				background-color:#0022ff;
    				border:1px;
    				text-align:left;
    				color:#990000;
    			}
    			#maintd{
    				color:#005500;
    			}
    			#subheading{
    				width:60%;
    				height:50px;
    				background-color:#0011ee;
    				border-width:1px;
    				text-align:left;
    				border-color:yellow;
    				border-spacing:2px;
    				border-collapse:collapse;
    			}
    			.subheadtd{
    				border:thin red dotted;
    				background-color:#00ff00;
    				color:#ff0000;
    				margin:2px;
    				font-size:20px;
    				text-align:center;
    			}
    
    			#maincontent{
    				width:40%;
    				background-color:#00eeff;
    				border-right:1px #223344;
    				text-align:justify;
    				vertical-align:top;
    				color:#667700;
    				float:left;
    			}
    			.paraheading{
    				color:#0077bb;
    				font-size:30px;
    			}
    
    			#top{
    				/*border-space:0;*/
    			}
    
    			#sidebar{
    				width:20%;
    				/*align:right;*/
    				background-color:#00ffaa;
    				border:1px;
    				text-align:justify;
    				color:#667700;
    				vertical-align:top;
    			}
    
    			.headhr{
    				color:#ff0000;
    				height:2px;
    				width:200px;
    			}
    
    			.subheadhr{
    				color:#999999;
    				height:1px;
    				width:275px;
    			}
    			.sbheading{
    				font-size:21px;
    				color:#009944;
    			}
    
    			.linkheading{
    				font-size:18px;
    				color:#0055bb;
    			}
    
    			.cell1{
    				vertical-align:top;
    			}
    
    			.mchr{
    				width:90%;
    			}
    		</style>
    		<script type="text/javascript">
    			function equalHeight(){
    				var mht = document.getElementById('maincontent').offsetHeight;
    				alert("mht = "+mht);
    				var sht = document.getElementById('sidebar').offsetHeight;
    				alert("sht = "+sht);
    				if(mht > sht){
    					document.getElementById('sidebar').style.height = mht + 'px';
    				}
    				else {
    					document.getElementById('maincontent').style.height = sht + 'px';
    
    				}
    			}
    		</script>
    
    	</head>
    	<body onload="equalHeight()">
    		<table id=mainheading><tr><td id=maintd><h1><big>SiliconIndia</big></h1></td></tr></table>
    
    		<table id=subheading><tr><td class=subheadtd>Home</td><td class=subheadtd>Style Demo</td><td class=subheadtd>Downloads</td><td class=subheadtd>Services</td><td class=subheadtd>Support</td><td class=subheadtd>About</td></tr></table>
    		<table id="top">
    		<table id=maincontent>
    				<tr> <td class="cell1">
    					<strong class=paraheading>Read Me First</strong><hr class="mchr"/>
    					filed under <a href=#>templates, internet</a><br /><br />
    
    					<p>
    					CoolBlue is a free website template by styleshout.com. This work is released and licensed under the Creative Commons Attribution 3.0 License, which means that you are free to use and modify it for any personal or commercial purpose. All I ask is that you give me credit by including a link back to my website.</p>
    
    				 	<p>You can find more of my free template designs at my website. For premium commercial designs, you can check out Themeforest.</p>
    				</td> </tr>
    
    				<tr> <td class="cell1">
    					<strong class=paraheading>Lorem Tellus Eleifend Magna</strong><hr class="mchr" />
    					filed under templates, <a href=#>internet</a><br /><br />
    
    
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    
    					<p>Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    				</td> </tr>
    
    				<tr> <td class="cell1">
    					<strong class=paraheading>Lorem Ipsum Dolor Sit Amet</strong><hr class="mchr"/>
    					Filed under <a href=#>templates, internet</a><br /><br />
    
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    
    					<p>Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
    				</td> </tr>
    		</table>
    
    
    		<table id=sidebar>
    
    			<tr><th class=sbheading>Sidebar Menu <hr class=headhr /></th></tr>
    
    				<tr><td class=linkheading>Home <hr class=subheadhr /></th></td>
    				<tr><td class=linkheading>TemplateInfo<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Style Demo<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Blog<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Archives<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Web Templates<hr class=subheadhr /></td></tr>
    
    		 	<tr><th class=sbheading>Sponsors<hr class=headhr /></th></tr>
    
    				<tr><td class=linkheading>Themeforest Site Templates, Web & CMS Themes<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>4Templates Low Cost High-Quality Templates<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Templatemonster Delivering the Best Templates on the Net<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Graphic River Awesome Stock Graphics<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Dreamhost Premium Webhosting. Use the promocode sshout and save 50 USD<hr class=subheadhr /></td></tr>
    
    			<tr><th class=sbheading>Most Popular<hr class=headhr /></th></tr>
    
    				<tr><td class=linkheading>Lorem ipsum dolor sit amet, consectetuer adipiscing elit<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Cras fringilla magna. Phasellus suscipit<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Morbi tincidunt, orci ac convallis aliquam<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Ipsum dolor sit amet, consectetuer adipiscing elit<hr class=subheadhr /></td></tr>
    				<tr><td class=linkheading>Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem<hr class=subheadhr /></td></tr>
        	</table>
        	</table>
    
    		<table>Bottom table</table>
    	</body>
    </html>
    Code was not validated or modified in any other way.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles