Can't get rid of a CSS bleed

Discussion about CSS related issues.
Post Reply
SergioQ
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 1
Joined: Mon Nov 18, 2019 4:22 pm

Can't get rid of a CSS bleed

Post by SergioQ » Mon Nov 18, 2019 4:38 pm

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
Site Admin
Posts: 3453
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 » Thu Dec 05, 2019 10:49 am

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)?
Image
Albert Wiersch

Post Reply