Jump to content

Problem with removing margins in html


awaise17

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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...