PDA

View Full Version : table border spacing isn't responding to my css code, please help, this is doing my nut in!


robob
12-06-2011, 11:47 AM
Ok having trouble with the spacing of images on this page: http://www.robob.net/dc.html the images are supposed to be flush with one and other. I have added: border: 0px; in everywhere I can think. I have even switched the table for html table I made in photoshop, which works on it's own fine, but no luck in this set up. I think I has something to do with the floating background they're on. Any help would be a god send, this is doing my nut in!

Thanks!! ^ ^

Here's the code:

<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header</title>
<style type="text/css">
html {
background: url(http://www.robob.net/background.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<style type="text/css">
body{
margin:0;
padding: 0 0 0 0;
padding-top: 139px;
border: 0px;
}
* html body{
overflow:hidden;
border: 0px;
}
* html div#content{
overflow:hidden;
border: 0px;
}
.header {background-color:;
height:89px;
border: 0px;
}
.menu { background-color:White;
width:700px;
height:50px;
border: 0px;
}
.static {
width:100%;
z-index:2;
height:100px;
position: fixed;
top: 0px;
border: 0px;
}
</style>
<style type="text/css">
.style1 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #424242;
text-align: center;
}
.style11 {font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #424242;
text-align: left;
}

#mytable {
border: 0px;
border-style: 0 0 0 0;
margin: 0px;

}

</style>

<script type="text/javascript">
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_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_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>
<body onLoad="MM_preloadImages('Buttons/Work(hover).gif','Buttons/Shop(hover).gif','Buttons/About(hover).gif','Buttons/Contact(hover).gif','Buttons/Painting(hover).gif','Buttons/Illustration(hover).gif','Buttons/Design(Hover).gif')"><div id="header">
<div align="center">
<div class="static">
<div class="header"><img src="bannercard.jpg" width="700" height="89" /></div>
<div class="menu">
<div align="left">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#000000"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','Buttons/Shop(hover).gif',1)"><img src="Buttons/Shop.gif" name="Image5" width="233" height="25" border="0"></a></td>
<td bgcolor="#000000"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','Buttons/About(hover).gif',1)"><img src="Buttons/About.gif" name="Image6" width="233" height="25" border="0"></a></td>
<td bgcolor="#000000"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Buttons/Contact(hover).gif',1)"><img src="Buttons/Contact.gif" name="Image7" width="233" height="25" border="0"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','Buttons/Painting(hover).gif',1)"><img src="Buttons/Painting.gif" name="Image8" width="233" height="25" border="0"></a></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','Buttons/Illustration(hover).gif',1)"><img src="Buttons/Illustration.gif" name="Image9" width="233" height="25" border="0"></a></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','Buttons/Design(Hover).gif',1)"><img src="Buttons/Design.gif" name="Image10" width="233" height="25" border="0"></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<div align="center">
<table id="Table_01" width="700" height="424" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="booty(700).jpg" width="700" height="696"></td>
</tr>
<tr>
<td><img src="monkeyonwall(700).jpg" width="700" height="520"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center">
<p>&nbsp;</p>
<p><img src="monkeyterrorist(400).jpg" width="400" height="545"></p>
<p>&nbsp;</p>
</div></td>
</tr>
<tr>
<td><img src="rhys2(700).jpg" width="700" height="503"></td>
</tr>
<tr>
<td><img src="cat(700).jpg" width="700" height="503"></td>
</tr>
<tr>
<td><img src="konjrete junglewhitewall(700).jpg" width="700" height="554"></td>
</tr>
<tr>
<td><img src="daltokki(700).jpg" width="700" height="541"></td>
</tr>
<tr>
<td><img src="streetwave(700).jpg" width="700" height="394"></td>
</tr>
<tr>
<td><img src="sakura04 w (brick)(cropped)(700).jpg" width="700" height="407"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
<div align="center"></div>
</div>

edbr
12-07-2011, 01:16 AM
well first i would like to whinge a bit.
You should get a way from tables for layout. you can enclose all you styes in one <style> </style> tag

you can try add
tr{ margin:0: }
but im out of practice thankfully with tables

edbr
12-07-2011, 01:20 AM
welcome to the forum BTW :)

robob
12-07-2011, 06:27 AM
Hi Edbr,

Cheers for getting back to us, tried that but no luck, think it's the floating images code which is interfering with it.

Cheers,

Rob

Corrosive
12-07-2011, 07:14 AM
There is no need to wrap your images in tables. The code is redundant (and not to mention NOT the way you lay out a website in 2011). The images would sit quite nicely in a div with just the image tags by themselves.

domedia
12-07-2011, 01:45 PM
robob, welcome to the forum! 8)

The code you posted is also missing some very core <html> and <head> tags. You cannot have a HTML document without these.