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++;

So you are adding in a loop duplicate id's and thus invalid HTML? `id='prods_nme'` and `
` — Mark Schultheiss, May 07 '16 at 18:09

ArtOfCode · Answer 1 · 2016-05-07T15:26:34.900

3

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%
}

edited May 07 '16 at 15:26

answered May 07 '16 at 15:16

ArtOfCode

5,702
5
37
56

Thank you. That did top the extra space from being made, but now the hover is only a single line, is there anyway to get over this – Monroe May 07 '16 at 15:25

score -1 · Answer 2 · edited May 23 '17 at 12:16

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>

CSS: Hover adds unwanted extra white space

2 Answers2