Can't get rid of a CSS bleed

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
SergioQ
Rank 0 - Newcomer
Posts: 1
Joined: Mon Nov 18, 2019 4:22 pm

Can't get rid of a CSS bleed

Post by SergioQ »

Hello,
Am creating a table in HTML with a particular shape, and it pretty much works, except for the top and bottom cells that somehow have space between each other. Was wondering if someone could figure out what I am doing wrong. This bleed happens in IE and FIreFox.

If I get rid of the rounded radius, no bleed. If I get rid of my CSS stylings for input, also no bleed. Can someone help me find out how to fix this?

Thanks

Code: Select all

input[type=text] 
{
  border: 1px solid ;
  padding: 5px;
  font-size: 24px;
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding:5px;
 }



input[type=submit] 
{
    margin-left: 5px;
    padding:5px; 
    background:#ccc; 
    cursor:pointer;
    -webkit-border-radius: 5px;

    border: 0px solid ;
    background-color: #0000ff;
    border-color: #CCCCCC;
    color : #fff;
}


table, th, td {
  border-collapse: collapse;
  
  border: 0px;
} 

table td#LISTROWHEAD  
{
  border-collapse: collapse;
  background-color:white; 
  color:black;
  padding: 5px;
  font-size: 18px;
  border-top-left-radius:6px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-top-right-radius:6px;
}
table td#LISTROWBUTT  
{
  border-collapse: collapse;
  background-color:white; 
  color:black;
  padding: 5px;
  font-size: 18px;
  border-bottom-left-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  border-bottom-right-radius:6px;
}
table td#LISTROW  
{
  border-collapse: collapse;
  background-color:white; 
  color:black;
  padding: 5px;
  font-size: 18px;
}

  <tr>
      <td id="LISTROWHEAD" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr >
      <td id="LISTROW" >
          Hello
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROWBUTT" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
Image
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Can't get rid of a CSS bleed

Post by Albert Wiersch »

Hello,

Did you find a solution yet? If not then I may be able to take a quick look and see if I can find anything that would be helpful.

Also, have you tried using Chrome's Developer Tools (Ctrl+Shift+I)?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply