Jump to content

Please help with tables...


rajeevthomas

Recommended Posts

Hello everyone, I am new here and new to the coding world! I am trying to position my tables for my thumbnail gallery and it looks very different between IE7 and Firefox. Margins really get messed up. I am adding my codes below...how can I add some CSS to my tables other than width? Width seems to be the only thing that works. When I use width it increases margin between the thumbnails so much. And it all look so different between browsers...

 

HTML ... <!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>

<title>Photography</title>

</head>



<body>

<table border='0' style='margin: 0px ; padding: 0px ;'>

<tr>
<td>

<span class='navlinks'><a href=viewgallery.php>Albums</a></span><font color=#ff0000> >&gt </font>

<span class='navlinks'><a href=viewgallery.php?cid=1>Abstract</a></span><br><br/><br/><br/></td>
</tr>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=240'><center/><img

src='photos/tb_240.jpg' border='0' alt='End Of Day' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=239'><center/><img

src='photos/tb_239.jpg' border='0' alt='A Photographer's Dream' class='img'/></a></td>

<td class=thumbs ><a href='viewgallery.php?cid=1&pid=238'><center/><img

src='photos/tb_238.jpg' border='0' alt='Heaven's View' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=237'><center/><img

src='photos/tb_237.jpg' border='0' alt='Colorful World ' class='img'/></a></td>

</tr>
<tr class=thumbs>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=241'><center/><img

src='photos/tb_241.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=242'><center/><img

src='photos/tb_242.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=243'><center/><img

src='photos/tb_243.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=244'><center/><img

src='photos/tb_244.jpg' border='0' alt='' class='img'/></a></td>

</tr>

<tr class=thumbs>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=245'><center/><img

src='photos/tb_245.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=246'><center/><img

src='photos/tb_246.jpg' border='0' alt='' class='img'/></a></td>



</table>

</body>

 

And the CSS part is...

 

<style type="text/css">

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

 

a, input {

outline-color: invert;

outline-style: none;

outline-width: medium;

}

 

 

body

{

   

background-repeat: no-repeat;

background-color:#000000;

}

 

 

 

a {

text-decoration: none;

color: #ff0000;

}

 

a:visited {

color: #ff0000;

text-decoration: none;

}

 

a:hover {

text-decoration: none;

color: #ffffff;

}

 

a:active {

text-decoration: none;

color: #ff0000;

}

 

p {

font-size: 20px;

margin-top: 10px;

}

 

 

p.caption {

font-size: 20px;

color: #ff0000;

margin-top: 10px;

}

 

.navlinks{

font-size: 20px;

color: #ff0000;

padding-left: 5px;

}

 

.prevnext{

font-size: 20px;

line-height: 25px;

padding-left: 595px;

}

 

p.excerpt{

font-size: 18px;

color: #ffffff;

width: 750px;

border-top-style: solid;

border-top-color: #2C2C2C;

background-color:#0F0F0F;

border-top-width: 1px;

margin-top: 1px;

}

 

.categoryview{

margin-top: 95px;

margin-left: 35px;

width: 680px;

 

 

 

}

 

.thumbs{

width: 240px;

height: 200px;

 

}

 

 

 

 

</style>

 

Link to comment
https://forums.phpfreaks.com/topic/213238-please-help-with-tables/
Share on other sites

Cristian...

 

It is not a website yet... ;D But when you get the page you will see that the thumbnails are spread apart and I cannot change the space in between or the space from left to right.... thank you Cristian...

 

http://www.rajeevthomas.com/viewgallery.php

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.