Jump to content

Td Height Issue


Randomishlying
 Share

Recommended Posts

I've having an issue with a specific table cell that I can't seem to figure out.I set the cell with the id=top to a height of 174px with CSS, and yet it appears to be a height of 236px.Here is an image of what I'm talking about:post-85917-0-86178300-1324330796_thumb.png For a closer look at the 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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body id="theHeader" onload="MM_preloadImages('images/homeActive.png','images/about-usActive.png','images/route-and-scheduleActive.png','images/flight-informationActive.png','images/fareActive.png')" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0">  <tr>    <td id="logoBox">    <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td>    <td>	 <div id="rightsideHeader">   <p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p>	    <div align="left" id="navigation"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeActive.png',1)"><img src="images/home.png" alt="Home" name="Home" width="82" height="33" border="0" id="Home" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','images/about-usActive.png',1)"><img src="images/about-us.png" alt="About Us" name="AboutUs" width="110" height="33" border="0" id="AboutUs" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Route','','images/route-and-scheduleActive.png',1)"><img src="images/route-and-schedule.png" alt="Route & Schedule" name="Route" width="178" height="33" border="0" id="Route" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FlightInfo','','images/flight-informationActive.png',1)"><img src="images/flight-information.png" alt="Flight Information" name="FlightInfo" width="184" height="33" border="0" id="FlightInfo" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fare','','images/fareActive.png',1)"><img src="images/fare.png" alt="Fare" name="Fare" width="70" height="33" border="0" id="Fare" /></a></div>  </div>    </td>  </tr></table><table id="mainTable" width="1024px" height="174px" align="center" border="0" cellspacing="0" cellpadding="0">    <tr>	    <td id="top"><img src="images/shuttlebus.png" width="374" height="146" alt="Introductory Homepage Image" /><div align="right" id="welcome"><p>Welcome to Sarasota - Tampa Express</p></div>	    </td>   </tr>    <tr>	    <td id="bottomLeft">	  	    </td>	    <td id="bottomRight">	    </td>    </tr>	   </table>		 </body>

@charset "utf-8";/*==== universal ====*/.body {font-family: Verdana, Geneva, sans-serif;}.table {margin: 0px;padding: 0px;}.td {margin: 0px;padding: 0px;}/*==== header ====*/#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;}/*==== leftside header ====*/#logoBox {width: 268px;padding-left: 50px;}#tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 16px;font-style: italic;text-align: left;color: #FFF;width: 706px;height: 45px;margin: 0px;padding-top: 35px;}#rightsideHeader {height: 150px;width: 624px;margin-top: 0px;}#phoneNumber {padding-left: 100px;}#navigation {height: 70px;width: 706px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;text-decoration: none;}/*==== main content ====*/#mainTable {background-image: url(images/background-gradients.png);height: 618px;width: 1024px;} #bottomLeft {width: 406px;height: 440px;}#top {height: 174px;width: 1024px;}#welcome {vertical-align: middle;position: relative;font-family: Arial, Helvetica, sans-serif;font-size: 28px;font-style: normal;font-weight: bold;color: #C34306;top: -150px;width: 1024px;}#theHeader #mainTable tr #top #welcome p {padding-right: 150px;}#bottomRight {width: 618px;height: 440px;}

Link to comment
Share on other sites

It might be the <p> tags that are inside that table cell adding margin.A table cell will always stretch to accomodate the content inside it, ignoring any style rules if they conflict with it. So make sure that your content is not taller than the desired height of your table cell.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...