PDA

View Full Version : gaps around jpg in table

charles.nichols
07-07-2009, 10:57 PM
I'm using a table filled with Java scripts that randomly change jpg images in the cells when the page is loaded, for the front page of my website, charlesnichols.com. I've set border="0" cellpadding="0" cellspacing="0", and the composite image looks fine in Safari, but displays with gaps between the images in Firefox or IE. Is there a way to correct these gaps, without redesigning the page or getting rid of the table; is there a quick fix or additional parameter I need to set? Here's an excerpt of the html for the page:

var jRecreation = 0
var pRecreation = theRecreationImages.length;
var preBufferRecreation = new Array()
for (iRecreation = 0; iRecreation < pRecreation; iRecreation++) {
preBufferRecreation[iRecreation] = new Image()
preBufferRecreation[iRecreation].src = theRecreationImages[iRecreation]
}
var whichRecreationImage = Math.round(Math.random()*(pRecreation-1));
function showRecreationImage() {
document.write('<img src="'+theRecreationImages[whichRecreationImage]+'" border=0>');
}

// End -->

</script>

</head>

<body text="#666666" bgcolor="#000000" link="#666666" vlink="#666666" alink="#cccccc">

<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" clear="all">

<tr>

<td width="500" height="500" align="center" valign="middle">

<h2>www.CharlesNichols.com</h2>

<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" clear="all">
<tr>
<td align="center" valign="middle"><img src="./jpg/Black100.jpg"></td>
<td align="center" valign="middle">
<a href="./html/Biography2008.html">
<script language="JavaScript">
<!-- Begin
showBiographyImage();
// End -->
</script>
</a>
</td>
<td align="center" valign="middle"><img src="./jpg/Black100.jpg"></td>
<td align="center" valign="middle">
<a href="./html/Composition2008.html">
<script language="JavaScript">
<!-- Begin
showCompositionImage();
// End -->
</script>
</a>
</td>
<td align="center" valign="middle"><img src="./jpg/Black100.jpg"></td>
</tr>
coothead
07-08-2009, 02:14 AM
Hi there charles.nichols,

and a warm welcome to these forums. :agree:

You should not be using a frameset. :disagree:
http://www.google.co.uk/search?q=frameset+pros+and+cons
You should no be using tables. :disagree:


Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html)
Ten ways to speed up the download time of your web pages (http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)



Rant is now over :lol:

Here now is the solution to your problem. ;)

Add this to the head section of your page...

<style type="text/css">
img {
display:block;
}
</style>

...and, finally, if you get time correct the page errors that validation shows...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww-ccrma.stanford.edu%2F~cnichols%2F