CSS: Hover adds unwanted extra white space

Question

I am simply trying to create a hover, so it hover over a entire section as seen below:

However, every time i hover over my products. This happens instead

It adds extra white space to the section below and doesn't cover the section properly.

I have tried..

• Changing the line height
• Adding a new section/div
• padding 0, margin 0

div#cat{
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%

}

/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}

<div id='cat'>
<table>
<tr>
<td class='full'>
<a name='foodcat$iii' id='prods_nme'>$prod_name</a>
<td>
</td>
<p id='prods_desc'>$prod_desc</p>
</td>
<td class='price'>
<p id='prods_price'>£$prod_price</p>
</td>
<td class='add'>
<a href='Shopping_cart.php?add_item=$prod_id'>+</a>
</td>
</tr>
</table>
</div>

My code is actually a string, which loop information out of a database.

 echo("<div id='cat$i' class='cat'>");

                                echo("<table>");
                                echo("<tr>");
                                echo("<td class='full'>");
                                echo("<a name='foodcat$iii' id='prods_nme'>$prod_name</a>");
                                echo("<td>");
                                echo("</td>");
                                echo("<p id='prods_desc'>$prod_desc</p>");
                                echo("</td>");


                                echo("<td class='price'>");
                                echo("<p id='prods_price'>£$prod_price</p>");
                                echo("</td>");


                                echo("<td class='add'>");
                                echo("<a href='Shopping_cart.php?add_item=$prod_id'>+</a>");
                                echo("</td>");
                                echo("</tr>");

                                echo("</table>");
                                echo("<br>");
                                echo("<br>");
                                echo("<hr id='hr'>");
                                echo("</div>");
                                echo("</div>");
                                echo("</div>");
                                echo("<br>");
                                echo("<br>");
                                $i++;

Answer 1

ArtOfCode has the correct solution for your problem.

However, it is not a good idea to use tables for formatting. You can see the table padding (which I have done all the right things to eliminate) when the cells are given borders. Tables bring with them a number of formatting problems.

I suggest that you use DIVs instead, and learn the three or four things needed to use float:left and/or flexbox.

table{border-collapse:collapse;}
td{border:1px solid #ccc;padding:0;}

div#cat {
  /*line-height: 30%;
height: 50px;*/
  width: 61%;
  margin-left: 39%;
  height: 15px;
  line-height: 50%
}
/*product area rollover/hover*/

div#cat:hover {
  background-color: #e86065;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  background-position: 100% 100%;
  height: 80%;
}

<div id='cat'>
  <table>
    <tr>
      <td class='full'>
        <a name='foodcat$iii' id='prods_nme'>$prod_name</a>
        <p id='prods_desc'>$prod_desc</p>
      </td>
      <td class='price'>
        <p id='prods_price'>£$prod_price</p>
      </td>
      <td class='add'>
        <a href='Shopping_cart.php?add_item=$prod_id'>+</a>
      </td>
    </tr>
  </table>
</div>

Answer 2

Your CSS is adding extra height when it changes to hover state. Make sure when you're adding hover styles that you only change the properties you want to - in this case, you don't want to change the height.

You want something like this:

div#cat{
    width: 61%;
    margin-left: 39%;
    height: 15px;
    line-height: 50%
}

/*product area rollover/hover*/
div#cat:hover{
    background-color: #e86065;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    background-position: 100% 100%;
    width: 61%;
    margin-left: 39%;
    height: 15px;
    line-height: 50%
}