Home/ Questions/Q 6083277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:23:02+00:00

I’m trying to follow this tutorial , but I’m hitting a strange css issue.

  • 0

I’m trying to follow this tutorial, but I’m hitting a strange css issue. I am getting a text overflow issue, and I don’t know why. Also the last span element is not being shown. I am not a web designer, so any information why this is happening and how to fix it would be awesome.

Thanks!

Image of the Problem

enter image description here

HTML

<div id="suggestions" style="display: block; ">
  <p id="searchresults">
    <a href="/benefits/1" id="1">
      <img src="/system/images/benefits/images/1/thumb_download.png?1309194040">
      <span class="searchheading">Eric's Awesome Gym</span>
      <span>
        At this great gym we strive to make friends. &nbsp;Located in the middle of the grenage village, we are a great location woth tons of resutarnts near by.
      </span>
    </a>
    <span class="seperator"><a href="search?q=eric">Load More Results</a></span>
  </p>
</div>

CSS

#suggestions{ position: absolute; right:73px; width:320px; display:none; }
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin: 0;}
#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove height from your a element and clear your floats:

    http://jsfiddle.net/CQzMF/4/

    All code in sample.

    #suggestions{ position: absolute; right:73px; width:320px; display:none; }
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin: 0;}
#searchresults a { display:block; background-color:#e4e4e4; clear:left;text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
.clear {clear:both;height:1px;font-size:1px;line-height:1px;}

<div id="suggestions" style="display: block; ">
  <p id="searchresults">
    <a href="/benefits/1" id="1" class="clearme">
      <img src="/system/images/benefits/images/1/thumb_download.png?1309194040" width="50" height="100">
      <span class="searchheading">Eric's Awesome Gym</span>
      <span>
        At this great gym we strive to make friends. &nbsp;Located in the middle of the grenage village, we are a great location woth tons of resutarnts near by.
      </span>
        <div class="clear"></div>
    </a>
    <span class="seperator"><a href="search?q=eric">Load More Results</a></span>
  </p>
</div>

    Alternatively you can also use overflow:hidden on a – just remove height from it and you don’t need a anymore in the code.

    I fixed you a little more solid solution using overflow:hidden and a little bit more validator friendly.: http://jsfiddle.net/CQzMF/19/ check it out also.

    • 0