|
HTML - Empty Space Between Cells
Hi, I'm new to HTML, i pretty much learned it by myself with online tutorials. Now i'm having problems with this web layout, There are empty spaces between cells and I can't remove them no matter what I do. I used cellpadding="0" and cellspacing="0" and style="border-collapse: collapse" but it made no difference. This is only happening on FireFox. On Internet Explorer it appears fine. I'm sure that I'm doing some stupid mistake somewhere. Here's the code of the whole page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Using CSS</title> <style> body { margin:0; } </style> </head> <body topmargin="0" leftmargin="0" bottommargin="0"> <table cellpadding="0" border="1" style="border-collapse: collapse" cellspacing="0" height = "100%"> <tr> <td><img src="images/Gray-Cut-(layout)_01.gif" height="64"></td> <td><img src="images/Gray-Cut-(layout)_02.gif" height="64"></td> </tr> <tr> <TD class="example" width="786" colSpan="2" heigh="100%"> <TABLE id="Table2" height="100%" cellSpacing="0" cellPadding="0" border="1" style="border-collapse: collapse"> <TR> <TD><IMG height="21" alt="" src="images\Gray-Cut-(layout)_03.gif" width="182"></TD> <TD width="100%" rowSpan="5"><iframe name="iframe" src="home.html" height = "100%" width="100%" frameborder="0"></iframe></TD> </TR> <TR> <TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_05.gif" width="182"></TD> </TR> <TR> <TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_06.gif" width="182"></TD> </TR> <TR> <TD><IMG height="35" alt="" src="images\Gray-Cut-(layout)_07.gif" width="182"></TD> </TR> <TR> <TD height="100%"> </TD> </TR> </TABLE> </TD> </tr> </table> </body> </html> Similar TutorialsHello, I made a goofy little website at adamvonwillis.com and if you look at the home page you will see a gap between the first and second rows. The rows need to be touching. If anyone could look at the code and help me out I would be very greatful! Thank you! Hi all! New to this html stuff.. and need a little direction! I added a dynamic drive slideshow to my webpage (that is still very work-in-progress!) and managed to move it down the page where it's supposed to go, but now I have this big blank spot at the top of the page.. oi! Any and all help will be muchly appreciated! Here is the link: http://daps.ca/painting/test/ and here is the code: <html> <head> <script type="text/javascript"> var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["http://usera.imagecave.com/paye22/paintweb/pic1.gif", "", ""] //plain image syntax fadeimages[1]=["http://usera.imagecave.com/paye22/paintweb/pic2.gif", "http://www.cssdrive.com", ""] //image with link syntax fadeimages[2]=["http://usera.imagecave.com/paye22/paintweb/pic3.gif", "http://www.javascriptkit.com", "_new"] var fadebgcolor="6aa4b2" var fadearray=new Array() //array to cache fadeshow instances var fadeclear=new Array() //array to cache corresponding clearinterval pointers var dom=(document.getElementById) var iebrowser=document.all function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){ this.pausecheck=pause this.mouseovercheck=0 this.delay=delay this.degree=10 //initial opacity degree (10%) this.curimageindex=0 this.nextimageindex=1 fadearray[fadearray.length]=this this.slideshowid=fadearray.length-1 this.canvasbase="canvas"+this.slideshowid this.curcanvas=this.canvasbase+"_0" if (typeof displayorder!="undefined") theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) this.theimages=theimages this.imageborder=parseInt(borderwidth) this.postimages=new Array() //preload images for (p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src=theimages[p][0] } var fadewidth=fadewidth+this.imageborder*2 var fadeheight=fadeheight+this.imageborder*2 if (iebrowser&&dom||dom) document.write('<div id="master'+this.slideshowid+'" style="position:relative;top:550px;left:50px;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow: hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;top:550px;left:50px;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;lef t:00;filter:progidXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;top:550px;left:50px;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;lef t:0;filter:progidXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>') else document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>') if (iebrowser&&dom||dom) this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } } function fadepic(obj){ if (obj.degree<100){ obj.degree+=10 if (obj.tempobj.filters&&obj.tempobj.filters[0]){ if (typeof obj.tempobj.filters[0].opacity=="number") obj.tempobj.filters[0].opacity=obj.degree else //else if IE5.5- obj.tempobj.style.filter="alpha(opacity="+obj.degree+")" } else if (obj.tempobj.style.MozOpacity) obj.tempobj.style.MozOpacity=obj.degree/101 else if (obj.tempobj.style.KhtmlOpacity) obj.tempobj.style.KhtmlOpacity=obj.degree/100 else if (obj.tempobj.style.opacity&&!obj.tempobj.filters) obj.tempobj.style.opacity=obj.degree/101 } else{ clearInterval(fadeclear[obj.slideshowid]) obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1" obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas) obj.populateslide(obj.tempobj, obj.nextimageindex) obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0 setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay) } } fadeshow.prototype.populateslide=function(picobj, picindex){ var slideHTML="" if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">' slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='</a>' picobj.innerHTML=slideHTML } fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0 } fadeshow.prototype.resetit=function(){ this.degree=10 var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=this.degree/100 else if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity=this.degree/101 } fadeshow.prototype.startit=function(){ var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) this.populateslide(crossobj, this.curimageindex) if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER var cacheobj=this var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimage() } </script> UPDATE: See next post. I'm having a problem with IE treating empty space in a DIV as solid, preventing me from clicking anything underneath it. The problem is demonstrated he http://tmabb.com/comicpress/ You can see it best if you look at the logo in the upper-left, though it also occurs farther down the page. The entirety of that logo should be clickable, but a portion of the bottom of it is not. Basically, you've got the top header and leaderboard in one DIV, and then below that, the comic pane is in another DIV. The comic DIV has a negative top margin to make it interlock with the leaderboard DIV, which is what is causing the issue. The upper-left of the comic DIV *should* be empty space, and in FF, Opera, and Safari, you can indeed click all of the upper-left logo as you would expect. In IE, however, that empty space which overlaps part of the logo makes that portion of the logo unclickable. I can't simply give the leaderboard DIV a higher z-index, because then its empty space will block the links in the upper-right of the comic pane DIV. Is there any way to make this work in IE? I have the site in center but there isn't any [center] tags. Surrounding it is empty black. How do I reduce the emptiness to make the site "bigger"? I'm in a bit of a fix here regarding editing the html of a blogger page. http://bweissnews.blogspot.com/ The problem is the empty space between the end of the last post and the bottom of the window. The gap is too large and doesn't mesh well with pages with fewer posts. Anything I'm missing anything regarding that? Thanks so much in advance. Hey guys, i have a div setup to overflow:auto; to scroll through comments on the site. It works correctly in Chrome, Internet Explorer, and Safari, but Firefox is showing a bunch of empty space thats equivalent to the height of the page if the div was displayed without a scroll. http://www.greendayauthority.com/ind...20798&archive= Take a look at that page on different browsers. It ends correctly with the ads being at the end in other browsers, but with firefox, there's a bunch of dead space stretching the pages height. Any advice? Hey guys, EDIT: I figured it out. There was a phantom image that I had between the two that no longer belongs. Nevermind! Thanks, ~C-Style~ Hi, I have been challenged with creating the HTML for a news article list which is going on a website. I have started out by creating a test list using <ul><li> tags This is what the list looks like http://design2rent.co.uk/menu_test/index.html The data for this list will be grabbed from a database but the designer would like to have the date aligned to the right instead of at the end of the article, i have uploaded an image here for what the end result should look like. ignoring the backgroudn images ect as this is just a snippent of the design is it possible to have 1 list item split into 2 cells and align one of them to the left and the other to the right to acheive the end result layout? I've racked my brains with divs and tables but can't seem to find a solution and tried many google searches but not found any relevent topics. any help would be hugely appreciated i just started learning html today. and trying to get cell alignments figured out. I know in word, and other programs you can align text in 9 different spots in a cell. Top left, top center, top right middle left, middle center, middle right bottom left, bottom, center, bottom right but while im trying to use align="center" or using valign="middle" i cant get the text to align to the center of a cell only using align i can move across the top of the cell and using valign i can move across the left of the cell is there a way to use both together to get to the other portions of the cell ? how to manage cells height, e.g. have control over them in HTML, say I want a height to be 2px. site http://members.dodo.com.au/~rouslan/...ite/index.html td height and tr height codes didn't work, table or cells keep stretching themselves up or down For some reason i can't resize the weight on the cells i highlighted in black on the code below Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="388" height="92" background="top11.jpg"> </td>
<td width="312" height="92" background="top12.jpg"> </td>
</tr>
<tr>
<td width="700" height="353" colspan="3" background="main.jpg"> </td>
</tr>
<tr>
<td width="269" height="149"><a href="ImagensFinaisSite/picsleft/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('LeftPic','','ImagensFinaisSite/picsleft/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsleft/2_off.jpg" alt="Clicar na imagem para ampliar" name="LeftPic" width="269" height="149" border="0" id="LeftPic"></a></td>
<td width="157" height="149"><a href="ImagensFinaisSite/picscenter/1.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CenterPic','','ImagensFinaisSite/picscenter/1_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picscenter/1_off.jpg" alt="Clicar na imagem para ampliar" name="CenterPic" width="157" height="149" border="0" id="CenterPic"></a></td>
<td width="274" height="149"><a href="ImagensFinaisSite/picsright/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RightPic','','ImagensFinaisSite/picsright/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsright/2_off.jpg" alt="Clicar na imagem para ampliar" name="RightPic" width="274" height="149" border="0" id="RightPic"></a></td>
</tr>
</table></td>
</tr>
<tr>
</tr>
</table>
These are the cells i can't resize: <td width="388" height="92" background="top11.jpg"> </td> <td width="312" height="92" background="top12.jpg"> </td> I've tried messing around with colspan but i just can't get it working. Any idea whats wrong? Hi, here's my code, and things are working as they should. My only problem is I can't seem to move my drop-down list from the cell it is in to the cell left one. (see photo) Can anyone see from my code whats going wrong? Site url: http://www.walthamforest-fc.co.uk/st...layer.php?id=3 Code: <TABLE
WIDTH="520"
ALIGN=center
BORDER=0
CELLSPACING=0
CELLPADDING=0>
<TR VALIGN=middle ALIGN=center>
<td><img src="http://www.walthamforest-fc.co.uk/stats/images/playerbar.jpg"></TD>
</TR>
<tr VALIGN=left ALIGN=center>
<td><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . "_1.jpg";
?>"/><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . ".jpg";
?>"/>
</td></tr>
<tr>
<td background="/stats/images/playernameback.jpg" width="308" height="46"> <font face="Arial" size="4"><span style="letter-spacing: 0pt"><font color="#018609">
<?php echo "$playerdata[firstname]" ?> <?php echo "$playerdata[lastname]" ?>
</TD>
<td>
<td background="/stats/images/playernameback.jpg" width="202" height="46"><?php
//
//Haetaan kaikki pelaajat dropdownia varten
//
$sql = '
SELECT P.PlayerID AS id,
P.PlayerLastName AS lastname,
P.PlayerFirstName AS firstname,
P.PlayerPublish AS publish
FROM tplss_seasons S
LEFT OUTER JOIN tplss_players P ON P.PlayerID = S.SeasonPlayerID
';
if($defaultseasonid == 0)
{
$sql .= "
WHERE P.PlayerID != '' AND
P.PlayerPublish = '1'
GROUP BY id
ORDER BY firstname, lastname";
}
else
{
$sql .= " AND S.SeasonID = '$defaultseasonid'
WHERE P.PlayerID != '' AND
P.PlayerPublish = '1'
GROUP BY id
ORDER BY firstname, lastname";
}
$query = mysql_query("$sql", $connection)
or die(mysql_error());
echo"<select name=\"playerid\">";
while($data = mysql_fetch_array($query))
{
if($data['id'] == $id)
{
echo"<option value=\"$data[id]\" SELECTED>$data[firstname] $data[lastname]</option>\n";
}
else
{
echo"<option value=\"$data[id]\">$data[firstname] $data[lastname]</option>\n";
}
}
echo"</select> <input type=\"submit\" name=\"change_player\" value=\"$txt_change\">";
mysql_free_result($query);
$ttl = (($_SESSION['getAdditional'] + 1) % 2) ? "Show": "Hide";
?>
</td>
</tr>
When you have a table, and there is a lot of text in cells and you dont want the ENTIRE table stretch, what code can you add to the cell in order to give it scrollbars? The only way I found online is by css, but I'm not sure where to add the code. Any tips/help? Is there any way to get text to float from one cell to the other? And if not, is there any other way i can solve the problem of getting text around a picture? example: <table> <tr> <td>text start</td> <td>picture</td> </tr> <tr> <td colspan="2">text end</td> </tr> </table Hi: I have a long table (613 rows) with two columns (Containing Names, Addresses, Lot Numbers, and Phone Numbers, etc. I would like to format the cells of each column so that certtain fields (e.g., Phone Number is in a certain position in each cell). For example, I'd like this phone number to be right-aligned in the second row of each cell, etc Is there a standard, or easy way to do this ?? Thank for any help offered. -Mel Smith Hi, I am developing a calendar application in ASP. The calendar is displayed in a table where each cell represents a date and has a + and - in it. The + represents people working on that date and the - those who are off. I need to add 'title' information to table cells so that when the user moves the cursor over the + or - the respective information to be shown. I tried to do this as follows: <td><title = "worklist">+</title><title="freelist">-</td> This doesn't work, nothing appears when the cursor hovers over either the + or -. I can combine the worklist and freelist and display it in one go with: <td title="listall">+=</title> but this is unsatisfactory. Too much data is displayed and the result looks messy. I dont want to double the amount of cells by having + and - in seperate cells either. Is there a trick that allows seperate <title> info in the same cell. Help would be appreciated, regards, Guy Hello, I am trying to make an html table that looks something like the following: This is the best I can come up with so far: Which was written using the following code: HTML Code: <table border="1" style="empty-cells: hide" FRAME=VOID> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="8" ALIGN=center>100614-c5-2_clm3-2x20_*.nrrd</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td>3</td> <td>4</td> <td></td> <td>2</td> <td>3</td> <td>6</td> <td>7</td> <td>16</td> <td>11</td> <td>14</td> <td>15</td> <td> </td> <td>3</td> <td>4</td> <td>7</td> <td>8</td> </tr> <tr> <td NOWRAP><h7>100614-c5-2-redo-2x6_*.nrrd</h7></td> <td>2</td> <td>5</td> <td></td> <td>1</td> <td>4</td> <td>5</td> <td>8</td> <td>9</td> <td>12</td> <td>13</td> <td>9</td> <td> </td> <td>2</td> <td>5</td> <td>6</td> <td>9</td> <td NOWRAP><h7>100615-c5-2-clm4-2x15 *.nrrd</h7></td> </tr> <tr> <td></td> <td>1</td> <td>6</td> <td></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td> </td> <td>1</td> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="8">100615-c5-2_redo2-2x6_*.nrrd</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </table> I dont care about the individual bevel borders between each cell, those are fine. What Im really trying to do is add an additional black line border to certain "walls" within individual cells, similar to the vertical line that separates the 13 and the 9 in the image above... Any suggestions? (Also, how do I eliminate the borders in the cells that contain the file name?) Thanks ahead of time. Does anyone know the CSS or HTML (or combo) script to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cell(s) or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up... Hi all, Happy NY Is there anyway to navigate links through tables and cells. I'd like to have some links on my page that change information (text only) within a specific cell or table without changing the page. Is this possible? I remember this being done in frames, but would rather not use frames if possible. Thanks. |
|||||||