Randomishlying Posted December 19, 2011 Share Posted December 19, 2011 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: 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 More sharing options...
Ingolme Posted December 19, 2011 Share Posted December 19, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.