CODEWITHSUNDEEP
htmlcss
Eric Koslow
Eric Koslow

Reputation: 2064

Text overflow in search results box

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

Upvotes: 0

Views: 195

Answers (3)

easwee
easwee

Reputation: 15905

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.

Upvotes: 2

mojo706
mojo706

Reputation: 123

your image link is too long try shortening it and I would have to agree with the guy above try a step by step code refactoring

Upvotes: 0

Andreas
Andreas

Reputation: 737

#searchresults a img { float:left; padding:5px 10px; }

its because of that. the element is floating. add a clear:both div underneath the span.seperator to expand the containing div container:

<div style="clear:both">&nspb;</div>

or remove the float right from the text. Or better wrap it into a span which you style with display:block and float:right.

Upvotes: 1

Related Questions