|
HTML - Images That Fit Together Within Tables Without Spaces?
Similar Tutorialsi cant seem to get rid of the space between my two images in this table to align my layout images flush with each other . anyone got any ideas? here is an example of what my problem is: http://hollecost.webs.com/index.htm heres the table coding for that example page of my problem: <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="/images/top.jpg"> </td> </tr> <tr> <td background="/images/bottom.jpg" height="440" > </td> </tr> </table> I have two graphics in a cell. If I only put in the top one, everything is fine. Once I insert the bottom one in, a space to the right of the top one appears. I cant get rid of it. Anyone have any ideas? TIA Scott Hi there everyone, I'm having a bit of trouble with some of my tables. In the cells of one of my tables I want to align the text right with an extra space at the end of the text. However, the align right ignores any spaces that I try to add to the cell and ends up deleting it. My question is, how can I get the tables to display spaces and not delete them? Thanks. Dear Board Users, I want to send my friends a newsletter consisting of image sliced onto 4 parts. When I finished composing html code (spam assassin ranks it only with 0.3pts) mail was ready to be sent. All mail boxes reads this newsletter properly instead GMail which reads sliced image with breaks. At link below you cand find a screen capture which can let you know what about the problem is -- > And here is a fragment of code between first two images: Code:
</head>
<body marginwidth="0" marginheight="0" bgcolor="#ffffff" topmargin="0"
leftmargin="0">
<div align="center">
<table height="822" width="595" cellspacing="0" cellpadding="0" border="0"
id="Table_01">
<tbody>
<tr>
<td><a target="_blank" href="http://xxx"><img height="201"
width="595" border="0" longdesc="blablabla" id="blablabla" alt="blablabla"
src="Ozdobne-amfory_01.jpg" /></a></td>
</tr>
<tr>
<td><a target="_blank" href="http://xxx"><img height="407"
width="595" border="0" longdesc="blablabla" id="blablabla" alt="blablabla"
src="Ozdobne-amfory_02.jpg" /></a></td>
I hope you can help, thanks! how do i remove these spaces between my images and table? if you view the page theres spaces between the two images and for some reason on the bottom it shows a small image of my mid body image here is the link: http://lilions.com/contact/ Code: <code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<br></br><br></br>
<img src="http://lilions.com/home/images/tpc.jpg"><img src="http://lilions.com/home/images/cnttp.jpg"><center><table width=1000 height=450><td
background="http://lilions.com/home/images/cntmid.jpg"></center><center><font color="#FFFFFF"><table border="3" bordercolor="FFFFFF" width="630"
bgcolor="000000"></br><td><p><i><b><center><font color="#FFFF00">donbonacorsa@yahoo.com <donbonacorsa@yahoo.com></center></b></i></p></font>
<?php
if ($_POST["email"]<>'') {
$ToEmail = 'donbonacorsa@yahoo.com';
$EmailSubject = 'Site contact form from www.LiLions.com';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["name"]."<br>";
$MESSAGE_BODY .= "Email: ".$_POST["email"]."<br>";
$MESSAGE_BODY .= "Comment: ".nl2br($_POST["comment"])."<br>";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>
<center><h4><b>
Your message was sent </center></h2>
<?php
} else {
?>
<form action="index.php" method="post"><table width="630" border="0" cellspacing="2" cellpadding="0">
<h4>
<center>
<p>Have questions or comments? Please feel free to fill in the form below to send me an email.</p>
</center>
</h4>
<center></h4><div id="content">
<p><tr align="center"><center>
<td width="29%" class="bodytext">Your Name (required):</td></tr>
</center>
<tr align="center"><center>
<td width="71%"><input name="name" type="text" id="name" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Your Email (required)</td></tr>
</center>
<tr align="center"><center>
<td><input name="email" type="text" id="email" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Subject</td></tr>
</center>
<tr align="center"><center>
<td><input name="subject" type="text" id="subject" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Comment:</td></tr>
</center>
<tr align="center"><center>
<td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext"> </td></tr>
</center>
<tr><center>
<td align="center" valign="top"><input type="submit" name="Submit" value="Send"></td></tr>
</center>
</p></table></tr></td></form>
</div>
</b>
</h3>
</table>
<?php
};
?>
</body>
</html>
<center>
<img src="http://lilions.com/home/images/cntbtm.jpg">
</center>
</code>
Hi All I am having trouble with one web page displaying in IE compatibility view. It works fine in firefox and Safari, but when it is in IE compatibility view, it shows some gaps between images. here is the link: http://media.parachutemusic.com/Host...eb/Sy_web.html Can anyone help me to solve this problem? Thank you Jing http://www.shiningstarwebdesign.com/pawcb/coaches.htm I used the design portion of Dreamweaver to put pictures in to the tables that say Competitor 1, 2, 3, and 4, and when opened in a browser, the pictures did not appear. I checked the HTML and couldn't find the problem. Does anybody know why these pictures are not showing up? I have an 8 year old website with 99.9% valid HTML4.01 transitional code. The only problem I'm having is that the attribute "BACKGROUND" in my tables is not recognized as valid. I need to use images as backgrounds in some of my tables. Is there any way I can do this with HTML, or maybe an in line style sheet? I'm not at all familiar with CSS so I'm hoping that there is another way. Thanks. Hi everyone, I'm new here and a total newbie - so please bear with me! I want to create a table with 3 rows x 5 columns: Row 1: basic text Row 2: clickable image Row 3: clckable text The image in row two would be in the forum gallery, but the destination when the user clicks the image should be to the bands website. No matter what I do, i can't get a clickable image to sit into the table! If anyone could help with this simple piece of code I would really appreciate it. Thanks, Dave I need my background image in the main table to stretch the entire length of the viewers browser whenever the content of the page is not enough to require the use of the entire page. Using table height at 100% it will only extend as far as the farthest south piece of content on the page, which might not be the bottom of the browser window. The site is here, and i'm currently using a table height of 750px to take it off the bottom of the page. However in IE i get an unwanted scrollbar. Is there an easy workaround of do i just accept the scrollbar is going to be there? Also, if your bored can you tell me why IE wont valign the td to the top of the cell, whereas FF will, and how i might fix that pls? Thx! Hi all, I've been trying to fix this bug which won't go away. Yeah, it's basically images in tables, but before you cringe, I gotta declare that I'm using tables to display graphical data (that is, thumbnails in grids). I'm not using tables explicitly for layout. Visit the emulated-page at http://varlern.com/CrappyBug.html to see the problem. There's 4 cells. Notice that in every cell, there's some gaps at the right, top and bottom inside each cell (the left sides have no gaps). For a quick glance, below's the code: 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tablestyle
{
table-layout:fixed;
width:740px;
border-collapse:separate;
border-spacing:3px;
}
.tablestyle tr td
{
border:1px solid black;
width:175px;
height:175px;
}
</style>
</head>
<body>
<table class="tablestyle">
<tr>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
</tr>
</table>
</body>
</html>
I've searched the forums and tried all kinds of tricks and fixes suggested for others who've encountered this before.... I've tried using "display:block" on the <img> tag, I've set the cellspacing, cellpadding, padding, margin, hspace, vspace, cols, rows, line-height, font-size and almost every dimension related tag in CSS / HTML to 0 .......but the darn thing just REFUSE to go away! I'm really angry, I tell you. Hopefully, someone can help! The problem occurs in both IE 6.0 and FF. Thanks! Xeon Please take a look at the image I attached to this post. If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file. Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going... I'm trying to get rid of those breaks. Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure. I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces. Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought. I'm doing this in Visual Studio 2005/ASP.NET if that helps any. Thanks for anyone's help. Hello all. Just joined and I have what I know is a simple question. Trying to remove a space between the top image and the legend I just created. Thanks, Doug Code: <div id="main-copy">
<div style="width:755px; margin: auto; text-align: center; color: #000000; font-weight: bold;">
<p>Click on radar image to loop!</p>
<p>GR Level III Base Reflectivity<br/><a href="/wx21.html"><img src="/GR3/kfdr_br1.png"></a></p>
<p><img src="GR3/legend3.png" width="750" height="40"/></p>
<p>GR Level III Echo Tops<br/><a href="/wx22.html"><img src="/GR3/kfdr_et.png"></a></p>
</div>
</div>
</div>
<!-- ##### Footer ##### -->
Looks like: http://www.ardmoreweatherlive.com/wx3.html Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser http://wlab.canisius.edu/~dunkleb/cl...s/schedule.php Someone PLEASE explain where my spaces went. doesn't work. Copy/paste anything on that site to a text editor; the spacebar spaces are GONE. WTF. I am having some basic HTML issues... The code is as follows: Code: <body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?'), resizeTo(700,560);">
<div id="horizon">
<div id="content">
<div class="bodytext">
<table width="100%" height="480" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="middle" style="background-repeat: no-repeat; background-position:bottom right;"><table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21" height="16" align="right" valign="bottom"><img src="images/tv/upper-left.gif" alt="tv-upper-left" width="21" height="16" /></td>
<td width="320" height="16" align="center" valign="bottom"><img src="images/tv/top.gif" alt="tv-top" width="320" height="16" /></td>
<td width="21" height="16" align="left" valign="bottom"><img src="images/tv/upper-right.gif" alt="tv-upper-right" width="21" height="16" /></td>
</tr>
<tr>
<td width="21" height="240" align="right" valign="middle"><img src="images/tv/left.gif" alt="tv-left" width="21" height="240" /></td>
<td width="320" height="240" align="center" valign="middle"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','320','height','240','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/AlcoaHybridAeroW&autoPlay=true&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','FLVPlayer_Progressive' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/AlcoaHybridAeroW&autoPlay=true&autoRewind=true" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/AlcoaHybridAeroW&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="320" height="240" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></noscript></td>
<td width="21" height="240" align="left" valign="middle"><img src="images/tv/right.gif" alt="tv-right" width="21" height="240" /></td>
</tr>
<tr>
<td width="21" height="69" align="right" valign="top"><img src="images/tv/lower-left.gif" alt="tv-lower-left" width="21" height="69" /></td>
<td width="320" height="69" align="center" valign="top"><img src="images/tv/bottom.gif" alt="tv-bottom" width="320" height="69" /></td>
<td width="21" height="69" align="left" valign="top"><img src="images/tv/lower-right.gif" alt="tv-lower-right" width="21" height="69" /></td>
</tr>
</table>
<p><input type="button" value="Close Window" onclick="window.close()"></p>
</span></p></td>
</tr>
</table>
</div>
</div>
</div>
</body>
the link to a sample of this page is: http://www.mirageadv.com/beta/galler...bridAeroW.html Can someone take a look at this and tell me why I am getting the spaces in the graphics at the top and bottom... Thanks - Jim Is there a way to make the spaces in between each link in the navbar go away? becuase i need to put 2 more links and if i did it the way where i have no spaces in between it would work out perfectly, p.s. you can join the furms, lol. here is the site http://wiseones.50webs.org/index.html here is the navbar code Code: <ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="http://wiseones.jokemaster.org/" title="Spirituality Forums">Spirituality Forums</a></li>
<li><a href="spiritualityarticles.html" title="Spirituality">Spirituality</a></li>
<li><a href="religiousarticles.html" title="Religious">Religious</a></li>
<li><a href="itemsarticles.html" title="Items">Trees,Gems,Herbs,& Items</a></li>
</ul>
can someone also tell me what the ul's mean? Hi, I'm new to this forum. I'm having a little problem. It's the first time I'm working with DIV containers. I want to place 4 containers one below the other with no spaces in-between. In Firefox it works fine but not in IE. Can this problem be fixed? /Patrick i am trying to create a bullet point list but have spaces inbetween each bullet point item. i tried <br> but no luck. Code: <UL> <LI> <DIV align=left><SPAN style="COLOR: #333333">Stated Income with good credit</SPAN></DIV> <LI> <DIV align=left><SPAN style="COLOR: #333333">5/1, 7/1, 10/1 and 30 Yr Fixed<SPAN style="COLOR: #333333"><IMG border=0 hspace=0 align=right src="http://www.sharperemail.com/se_members/4346/ftp/raintree_hoa_images/happy-elephant-02-gif.gif" width=215 height=215></SPAN></SPAN> </DIV> <LI> <DIV align=left><SPAN style="COLOR: #333333">Interest Only</SPAN> </DIV><SPAN style="COLOR: #333333"> <LI> <DIV align=left>Cash out up to 250,000</SPAN> </DIV> <LI> This is my very first post on this forum, so please, be gentle with me. I write my websites in HTML code but recently I seem to have created an anomaly that I cannot get to the bottom of. If you pop over to this page: http://website.lineone.net/~barrybboor/tirol58.html you will see a very large space below the 'FULL RESULT' line and the start of the result table. According to the coding I have, there shouldn't be any such space but I can see no reason for it and cannot find a way to reduce it. Can anyone help a poor elderly novice, please? |
|||||||