webmaster1 Posted December 11, 2008 Share Posted December 11, 2008 Hi All, When I use regular html I can achieve a margin free layout: <body TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" > When I try it with CSS my table is pushed down by 1px from the top of the page: body{ margin: 0px 0px 0px 0px; } table.gtop{ width:1025px; height:125px; margin-left:auto; margin-right:auto; border:0px; border-style:none; padding:0px; } Can anybody spot what's missing or faulty? Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted December 11, 2008 Share Posted December 11, 2008 body { padding:0; margn: 0; } table.gtop{ width:1025px; height:125px; margin: 0 auto; border: none; padding:0; } Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 13, 2008 Author Share Posted December 13, 2008 While that code is much neater I'm still stuck with a one pixel margin from the top of my page. Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted December 13, 2008 Share Posted December 13, 2008 Can we see this gap you are getting? Also what browser are you using to test your CSS/HTML, does the gap appear in all browsers* or certain ones? * Make sure you test your CSS/HTML in more than one browser, eg IE (6 and 7) FF, Opera, Safari etc. Quote Link to comment Share on other sites More sharing options...
sniperscope Posted December 13, 2008 Share Posted December 13, 2008 Hi. I have same problem, FF looks fine but in IE tables move 1px right. This is how looks in Firefox and how in IE. As you can see in IE does not appear top two boxes. Why this is happen ? Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted December 13, 2008 Share Posted December 13, 2008 Could you also provide your HTML too. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Here's the relevant html: <table class="gtop"> <tr> <td width="460" height="125" bgcolor="#000066"> <a href="index.html"><img width="460" height="125" src="images/general_logo.jpg" border="0"></a> </td> <td width="565" height="125" bgcolor="#0066CC"> </td> </tr> </table> And here's the corrosponding css: body { padding:0; margin: 0; background-color:#990033; } table.gtop{ width:1025px; height:125px; margin: 0 auto; border: none; padding:0; } Here's an image: I just added the bg colour to make the discrepancy more apparent. Notice the 1px at the top and bottom of the table and the also in between the td cells. Also the logo image should overlay its td cell exactly since they are the same size but you'll notice a navy border thats larger at the bottom. I'll be rigorously checking the css for cross browser issues as soon as I can get it functioning on IE. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Its definatley to do with the table itself. When I use the image by itself (not inside a table) there isn't a 1px division from the top. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Here's the clincher though: <table border="0" cellpadding="0" cellspacing="0"> Works perfectly fine without the use of any css. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Yay! Solved with this minor addition: border-collapse:collapse I am absolutley dreading the road ahead in making my CSS cross browser compatable. Its a nightmare for forms. To see what I mean you can check out a quick page I threw up at www.joycepromotions.com Viewing it in Safari, Firefox and Chrome will distort my intended layout, particularily the text area Anyhow, one step at a time. The issue at hand is solved. Sniperscope: Here's a good starting point for uniform cross browser CSS: http://www.designvitality.com/blog/2007/10/designing-for-every-browser-how-to-make-your-site-fully-cross-browser-compatible/. I haven't looked into it great deal yet. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Before I close this I just want to see if anyone can spot why my image doesn't overlay its td cell exactly. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 I styled the td cell in question as follows: td.gtop{ background-color:#000000; width:460px; height:125px; padding:0; } The padding styling has removed 1px from the top, bottom, left and right though 2-3px still exist at the bottom of the image. ??? Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Hmm, it doesn't seem to be a css error at all. Using basic mark up I still get the above. The dummy.jpg image is the grey box btw. <table bgcolor="#00CC66" border="0" cellpadding="0" cellspacing="0"> <td> <img src="images/dummy.jpg" border="0"> </td> </table> Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Found an answer rather than a solution here: http://devedge-temp.mozilla.org/viewsource/2002/img-table/ In a nutshell don't use tables for layout. * rolls eyes up to heaven and thinks i would if all browsers handled css conventionally you pack of a**holes (directed at browser developers) Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted December 14, 2008 Share Posted December 14, 2008 The gap can be remove by typing your HTML in one line, like so <table bgcolor="#00CC66" border="0" cellpadding="0" cellspacing="0"> <td><img src="images/dummy.jpg" border="0"></td> </table> However yes you should not use tables for layouts. Quote Link to comment Share on other sites More sharing options...
webmaster1 Posted December 14, 2008 Author Share Posted December 14, 2008 Ah, handy to know about that line break. My faith in CSS has been restored since I've effectivley deployed div tags rather than tables. 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.