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> Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.