Unable to add cell space or margin in table

Question

The problem occurs in the login section the table cells are too close and I am not able to add cell spacing or margin, etc nothing works... Please help me... It gives a tiny space if I don't use the reset CSS. But that isn't enough.

/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
form {
 display: inline-block;
}
body, html {
 background-color: #0099FF;
 height: 100%;
}
body {
 overflow: hidden;
}
#nav {
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 right: 0;
 height: auto;
 color: #FFFFFF;
 background-color: rgba(0,0,0,0.7);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1em;
 font-weight: bolder;
}
#nav ul {
 float: right;
}
#nav li {
 display: inline-block;
 line-height: 5em;
 width: auto;
 padding: 0 1em;
 font-size: 1em;
}
.menu:hover {
 background-color: rgba(0,0,0,1);
}
a {
 color: inherit;
 text-decoration: none;
}
.container {
 height: 100%;
 left: 0;
 right: 0;
}
.container-title {
 background-color: rgba(0,0,0,0.7);
 position: absolute;
 margin-top: 10%;
 left: 50%;
 height: auto;
 width: auto;
 text-align: center;
 transform: translate(-50%, 0);
 padding: 1em;
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
}
.title-img {
 display: inline-block;
 height: 3em;
}
.title-name {
 display: inline-block;
 font-size: 3em;
 font-family: Arial, Helvetica, sans-serif;
 color: rgba(255,255,255,1)
}
.sub-container {
 width: 100%;
 height: 50%;
 background-color: rgba(0,0,0,0.7);
 position: relative;
 top: 50%;
 color: rgba(255,255,255,1);
 font-size: 1em;
 overflow: hidden;
}
.sub-container-nav {
 position: absolute;
 left: 0;
 right: 0;
 height: auto;
 color: rgba(255,255,255,1);
 background-color: rgba(0,0,0,0.7);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1em;
 font-weight: bolder;
}
.sub-container-nav li {
 display: inline-block;
 width: auto;
 padding: 0 1em;
 font-size: 1em;
 cursor: pointer;
}
.sub-container-nav li:hover {
 background-color: rgba(0,0,0,0.7);
}
#main {
 background: url(../images/background/Lamborghini-Veneno-Roadster.jpg) center no-repeat;
 background-size: cover;
}
#advanced_search {
 background: url(../images/background/Bugatti-Veyron-Luxury-Car-Wallpaper.jpg) center no-repeat;
 background-size: cover;
}
#explore {
 background: url(../images/background/Lykan-Hypersport-becar.net_.jpg) center no-repeat;
 background-size: cover;
}
#forum {
 background: url(../images/background/Koenigsegg%20One1.jpg) center no-repeat;
 background-size: cover;
}
#report_a_bug {
 background: url(../images/background/Ferrari%20La%20Ferrari.jpg) center no-repeat;
 background-size: cover;
}
#feedback {
 background: url(../images/background/hennessey_venom_gt_2013.jpg) center no-repeat;
 background-size: cover;
}
#login_signup {
 background: url(../images/background/McLaren%20P1.jpg) center no-repeat;
 background-size: cover;
}
.searchbox {
 outline: none;
 border: 1px solid rgba(255,255,255,0.5);
 background: transparent;
 font-family: Arial, Helvetica, sans-serif;
 color: rgba(255,255,255,1);
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 padding: 0.2em 0.5em;
}
.searchbox:focus {
 border: 1px solid rgba(0,102,255,0.7);
}
.btn {
 outline: none;
 border: 0;
 background-color: rgba(0,102,255,1);
 font-family: Arial, Helvetica, sans-serif;
 color: rgba(255,255,255,1);
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 padding: 0.2em 0.5em;
 cursor: pointer;
}
.box {
 height: 100%;
 width: 100%;
 padding: 1em;
}
#featured_link, #filter_link, #manual_link, #login_link {
 color: rgba(0,102,255,0.7);
}
.login_box{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 border: 1px solid rgba(255,255,255,0.5);
 background: rgba(0,0,0,0.7);
 font-family: Arial, Helvetica, sans-serif;
 color: rgba(255,255,255,1);
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 padding: 0.2em 0.5em;
}
.login_box tr{
 margin:1em;
}
.textbox {
 outline: none;
 border: 1px solid rgba(255,255,255,0.5);
 background: transparent;
 font-family: Arial, Helvetica, sans-serif;
 color: rgba(255,255,255,1);
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 padding: 0.2em 0.5em;
}
.textbox:focus {
 border: 1px solid rgba(0,102,255,0.7);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<?php
$loginsuccess=1;
$reportsuccess=0;
$feedbacksuccess=0;
?>
<!DOCTYPE html>
<html>
<head>
<title>CARZPEDIA</title>
<link rel="icon" href="images/favicon/favicon.png"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
</head>

<body>
<div id="nav"> <a href="#main">
  <div style="height:4em; width:auto; display:inline-block; padding:0.5em"><img src="images/logo/logo.png" style="height:inherit"/></div>
  </a>
  <ul>
    <a href="#advanced_search">
    <li class="menu">ADVANCED SEARCH </li>
    </a> <a href="#explore">
    <li class="menu">EXPLORE </li>
    </a> <a href="#forum">
    <li class="menu">FORUM </li>
    </a> <a href="#report_a_bug">
    <li class="menu">REPORT A BUG </li>
    </a> <a href="#feedback">
    <li class="menu">FEEDBACK </li>
    </a> <a href="#login_signup">
    <li class="menu">LOGIN/SIGNUP </li>
    </a>
    <form method="get" action="index.php">
      <li style="padding-right:0">
        <input class="searchbox" type="search" name="search" placeholder="Search here..."/>
      </li>
      <li style="padding-left:0">
        <input class="btn" type="submit" name="searchbtn" value="GO"/>
      </li>
    </form>
  </ul>
</div>
<div id="main" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/welcome.png"/>
    <div class="title-name">WELCOME</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <ul>
        <li id="featured_link">FEATURED</li>
        <li id="news_link">NEWS</li>
      </ul>
    </div>
    <div class="box" id="featured">:( No featured content</div>
    <div class="box" id="news">:( News Unavailable</div>
  </div>
</div>
</div>
<div id="advanced_search" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/advanced_search.png"/>
    <div class="title-name">ADVANCED SEARCH</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <ul>
        <li id="filter_link">FILTER</li>
        <li id="sort_link">SORT</li>
      </ul>
    </div>
    <div class="box" id="filter"></div>
    <div class="box" id="sort"></div>
  </div>
</div>
<div id="explore" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/explore.png"/>
    <div class="title-name">EXPLORE</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <ul>
        <li id="manual_link">MANUAL</li>
        <li id="auto_link">AUTO</li>
      </ul>
    </div>
    <div class="box" id="manual"></div>
    <div class="box" id="auto"></div>
  </div>
</div>
<div id="forum" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/forum.png"/>
    <div class="title-name">FORUM</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <?php
  if($loginsuccess==1)//reverse the value when page is complete
  {
   echo"<span style='padding-left:1em'>Please <a href='#login_signup' style='color:rgb(0,102,255)'>LOGIN</a> to continue</span>";
  }
  else if($loginsuccess==0)
  {
   echo"<span style='padding-left:1em'>Please accept the Terms and Conditions to continue</span>";
  }  
  ?>
    </div>
    <div class="box" id="shield"></div>
    <div class="box" id="tnc"></div>
  </div>
</div>
<div id="report_a_bug" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/report_a_bug.png"/>
    <div class="title-name">REPORT A BUG</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <?php
  if($reportsuccess==0)
  {
   echo"<span style='padding-left:1em'>Please provide details of the bug</span>";
  }
  else if($reportsuccess==1)
  {
   echo"<span style='padding-left:1em'>Thank you for reporting</span>";
  }  
  ?>
    </div>
    <div class="box" id="report"></div>
  </div>
</div>
<div id="feedback" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/feedback.png"/>
    <div class="title-name">FEEDBACK</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <?php
  if($feedbacksuccess==0)
  {
   echo"<span style='padding-left:1em'>Feel free to give your opinions, ideas , suggestions cause we are happy to implement it :)</span>";
  }
  else if($feedbacksuccess==1)
  {
   echo"<span style='padding-left:1em'>Thank you for your valuable feedback. Your feedback is important to us</span>";
  }  
  ?>
    </div>
    <div class="box" id="feedbackbox"></div>
  </div>
</div>
<div id="login_signup" class="container">
  <div class="container-title"> <img class="title-img" src="images/title/login_signup.png"/>
    <div class="title-name">LOGIN/REGISTER</div>
  </div>
  <div class="sub-container">
    <div class="sub-container-nav">
      <ul>
        <li id="login_link">LOGIN</li>
        <li id="register_link">REGISTER</li>
      </ul>
    </div>
    <div class="box" id="login">
      <div class="login_box">
        <form method="post" action="index.php">
          <table>
            <tr>
              <td>USERNAME:</td>
              <td><input class="textbox" type="text" name="username"/></td>
            </tr>
            <tr>
              <td>PASSWORD:</td>
              <td><input class="textbox" type="password" name="password"/></td>
            </tr>
            <tr>
              <td colspan="2" align="center"><input class="btn" type="submit" name="login_button" value="LOGIN"/></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="box" id="register"></div>
  </div>
</div>
<script>
  //scroll effect script
  $(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();

     var target = this.hash,
     $target = $(target);

     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 900, 'swing', function () {
         window.location.hash = target;
     });
 });
});
//sub container nav link color change function
$(document).ready(function(e) {
    $('#featured_link').click(function() {
  $('#featured_link').css('color','rgba(0,102,255,0.7)');
  $('#news_link').css('color','rgba(255,255,255,0.5)');
  });
 $('#news_link').click(function() {
  $('#featured_link').css('color','rgba(255,255,255,0.5)');
  $('#news_link').css('color','rgba(0,102,255,0.7)');
  });
 $('#filter_link').click(function() {
  $('#filter_link').css('color','rgba(0,102,255,0.7)');
  $('#sort_link').css('color','rgba(255,255,255,0.5)');
  });
 $('#sort_link').click(function() {
  $('#filter_link').css('color','rgba(255,255,255,0.5)');
  $('#sort_link').css('color','rgba(0,102,255,0.7)');
  });
 $('#manual_link').click(function() {
  $('#manual_link').css('color','rgba(0,102,255,0.7)');
  $('#auto_link').css('color','rgba(255,255,255,0.5)');
  });
 $('#auto_link').click(function() {
  $('#manual_link').css('color','rgba(255,255,255,0.5)');
  $('#auto_link').css('color','rgba(0,102,255,0.7)');
  });
 $('#login_link').click(function() {
  $('#login_link').css('color','rgba(0,102,255,0.7)');
  $('#register_link').css('color','rgba(255,255,255,0.5)');
  });
 $('#register_link').click(function() {
  $('#login_link').css('color','rgba(255,255,255,0.5)');
  $('#register_link').css('color','rgba(0,102,255,0.7)');
  });
});
//sub container nav link click function
$(document).ready(function(e) {
    $('#featured_link').click(function() {
  $('#featured').css('display','block');
  $('#news').css('display','none');
  });
 $('#news_link').click(function() {
  $('#featured').css('display','none');
  $('#news').css('display','block');
  });
 $('#filter_link').click(function() {
  $('#filter').css('display','block');
  $('#sort').css('display','none');
  });
 $('#sort_link').click(function() {
  $('#filter').css('display','none');
  $('#sort').css('display','block');
  });
 $('#manual_link').click(function() {
  $('#manual').css('display','block');
  $('#auto').css('display','none');
  });
 $('#auto_link').click(function() {
  $('#manual').css('display','none');
  $('#auto').css('display','block');
  });
 $('#login_link').click(function() {
  $('#login').css('display','block');
  $('#register').css('display','none');
  });
 $('#register_link').click(function() {
  $('#login').css('display','none');
  $('#register').css('display','block');
  });
});
</script>
</body>
</html>

1. You can't run PHP in the snippet. 2. If you use relative url's to another file, it wont work. 3. Your problem has to do with margins of cells. Strip your code so you can see when the problem occurs — Andreas Furster, Nov 07 '14 at 10:37
Here's the relevant parts: http://jsfiddle.net/7a0sx269/ (Sorry I am not familiar with snippets) — dayuloli, Nov 07 '14 at 10:40
actually i tried removing reset.css which i thought was the problem but it only gave a little spacing and i cant control it — VOXRAZR, Nov 07 '14 at 10:42
@dayuloli: your link also have the same problem removing reset.css gives a little space but we cant control it — VOXRAZR, Nov 07 '14 at 10:44
@VOXRAZR that link simply copied the relevant parts of your code into a jsFiddle so others can take a closer look. I've updated my answer, see if that works? — dayuloli, Nov 07 '14 at 10:46

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

Put your reset.css first in your HTML file. Override any CSS in the main.css file.

Like so:

<link type="text/css" rel="stylesheet" href="css/reset.css"/> // This is now first
<link type="text/css" rel="stylesheet" href="css/main.css"/> // This will override reset.css, if needs be

Furthermore, as @Jens W pointed out, tr elements cannot have margins. You can, however, assign padding to the td elements in tr.

jsFiddle

edited May 23 '17 at 12:05

Community

1
1

answered Nov 07 '14 at 10:26

dayuloli

16,205
16
71
126

by overriding did you mean !important? – VOXRAZR Nov 07 '14 at 10:29
3

Not particularly, I've updated my answer. Don't use `!important` unless absolutely necessary, mostly when working with JS, otherwise everything in your CSS will be important, and that defeats the point. – dayuloli Nov 07 '14 at 10:33
1

after changing the order, please show us the css parts that you tried. Something like td {padding: 10px;} should show effect. – Jens W Nov 07 '14 at 10:37
scroll down to bottom of the css- .login_box tr{ margin:1em; } – VOXRAZR Nov 07 '14 at 10:38
2

http://stackoverflow.com/questions/10690299/how-to-add-a-margin-to-a-table-row-tr – Jens W Nov 07 '14 at 10:41
As Jens pointed out, `tr` cannot have margins. And you'd use padding. – dayuloli Nov 07 '14 at 10:43
Please see jsFiddle, you need to add padding to the `td` element in `tr` – dayuloli Nov 07 '14 at 10:48
1

Thank you dayuloli and Jens W and everyone else for their effort – VOXRAZR Nov 07 '14 at 10:52

Unable to add cell space or margin in table

1 Answers1