rajeevthomas Posted September 12, 2010 Share Posted September 12, 2010 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> >> </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 More sharing options...
cdorob Posted September 14, 2010 Share Posted September 14, 2010 Do you have the site somewhere online so we could have a look? Cristian Link to comment https://forums.phpfreaks.com/topic/213238-please-help-with-tables/#findComment-1110928 Share on other sites More sharing options...
rajeevthomas Posted September 14, 2010 Author Share Posted September 14, 2010 Cristian... It is not a website yet... 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 Link to comment https://forums.phpfreaks.com/topic/213238-please-help-with-tables/#findComment-1111110 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.