Jump to content

Problem with removing margins in html


Recommended Posts

Hello everybody...i need some help..i am trying to make a website for my practice after going through your tutorials....i am stuck at one place....i am using two headers at the very top but there is a white gap between the two...i have tried all the options like using margin and padding to 0 and alignments etc but it does not work.....i have attached the image about my problem...need your help...thanks...post-106177-0-16372800-1354128082_thumb.png Here is the code of my 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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>index.html</title><style type="text/css">@import url("main.css");</style></head><body id="body_background"><table><th id="header_background"><img src="Images/logo.jpeg" align="left" style="margin-left:200px; margin-top:0px; padding:0px;" /><a href="#"><img src="Images/Rss.jpeg" align="right" style="margin-right:195px; margin-top:30px; "/></a><img src="Images/Face_book.jpeg" align="right" style="margin-right:6px; margin-top:30px; margin-bottom:0px; padding:0px" /><img src="Images/Twitter.jpeg" align="right" style="margin-right:6px; margin-top:30px; margin-bottom:0px; padding:0px" /></th><tr><td id="table_header" align="left"><a href="#">Home</a><a href="#">About Us</a><a href="#">Projects</a><a href="#">Services</a><a href="#">Products</a><a href="#">Clients</a><a href="#">Contat Us</a></td></tr></table></body></html> Here is the code of CSS: @charset "utf-8";/* CSS Document */#body_background{ background-image:url(Images/Background_image.gif); background-repeat:repeat; margin:0 auto; padding:0; }#header_background{ background: url(Images/Head_background.jpeg); width:1350px; height:102px; background-repeat:no-repeat; background-size:1350px 102px; margin:0px; }#table_header{ background:url(Images/Header_list.jpeg); width:1350px; height:40px; color:#FFFFFF; background-repeat:no-repeat; background-size:1350px 40px; }.table_list{ color:#FFF; }

Link to post
Share on other sites

First of all, I would really, really recommend that you ditch the table for layout and use box model techniques instead. Tables are meant for tabular data only. But anyway, if you really want to stick with the table, try adding border-collapse: collapse; to the style for the table.

Link to post
Share on other sites

Table cells happen to work pretty badly with CSS. They don't like padding and margins and prefer the cellspacing and cellpadding attributes of the table they're in.

Link to post
Share on other sites

I never use margins on table cells nor do I use the cellpadding/cellspacing attributes, but I've never had any trouble with cells using the padding I set for them in CSS. I suppose maybe if I were to use cellpadding it might override the CSS, but it doesn't appear that OP is using cellpadding/cellspacing.

Link to post
Share on other sites

add

table { border-spacing:0;}

for crappy IE less than 7 add inline styling to head,

<!--[if lte IE 7]><style type="text/css">table {border-spacing: expression(cellSpacing=0);}</style><![endif]-->

or link to IE specific stylesheet as in crappyIE7Less.css which will contain

table {border-spacing: expression(cellSpacing=0);}

link in head

 <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="crappyIE7Less.css" /><![endif]-->

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...