Line imposing on subsequent text?

[hymer]

Hello Everyone,

I have a listing of book descriptons followed by a line to separate them. This is an image of a book with wrap-around text. My problem is that the line is forcing the subsequent text to drop a couple of spaces. When I remove the line, the text lines-up.

Can anynoe see why the line is affecting the subsequent text? The html and css snippits are below:

Thanks a lot,

Bob

The html that I am using is like this:

<snip>
teaching usability to people who are not familiar with the topic. The
book is 120 pages long and a quick read.</p>
</div>

<hr class="line">

<div class="book">
<a class="book" href="http://www.example.com/page">
<img src="http://images.example.com/zzz.jpg" height="100" width="75"
alt="Human Factors, User Interface Design, Ergonomics."></a>

<h3><a href="http://www.example.com/page">Assistive Technology: Essential Human Factors</a></h3>

<p>by Thomas W. King <br>
September 14, 1998</p>
<p>The Information Age has transformed the way in which humans communicate and interact with each other
<snip>

And the CSS is:

#middle hr.line{ /* Books Line */
height: 1px;
margin: 0 80px 15px 80px;
}

[edited by: tedster at 4:58 am (utc) on Sep. 25, 2004]
[edit reason] use example.com [/edit]

[encyclo]

I'm not sure I follow you, hymer... You've got a

<hr>

tag with a CSS rule giving it a 15px bottom margin.

I can't see where

<div class="book">

ends, and I don't know what the text in the

<h3>

is supposed to be doing - is it supposed to be wrapping around the image, and is it this text which is pushed down by the

<hr>

? Is the image being floated or anything?

[hymer]

Hello Emcyclo,

The image appears at the top left with the text wrapped around it on the right. It does wrap but the first line should be even with the top of the image and it is 2 spaces lower than the top of the image.

I snipped the code but the dive occurs after each section. I will show you the code for all of the 1st entry and the begining of the 2nd entry in the list below. Note the line between the two entries.

The <h3> is the first line of wrapped text and it is that line that drops down 2 spaces when the line is present. It is the title of a book in larger font.

Thanks Again,

Bob

HTML:

<div class="book">
<a class="book" href="http://www.example.com/page1">
<img src="http://images.example.com/images/zzz.jpg" height="100" width="75" alt="Human Factors, User Interface Design, Ergonomics."></a>

<h3><a href="http://www.example.com/page2">An Introduction to Usability</a></h3>

<p>by Patrick W. Jordan <br>
February 1999</p>
<p>Introduction to the topic of usability. Throughout the book examples are
drawn from the familiar field of human-computer interaction, and more
broadly from the world of consumer goods. This book does a great job of
teaching usability to people who are not familiar with the topic. The
book is 120 pages long and a quick read.</p>
</div>

<hr class="line">

<div class="book">
<a class="book" href="http://www.example.com/page2">
<img src="http://images.example.com/images/#*$!.jpg" height="100" width="75"
alt="Human Factors, User Interface Design, Ergonomics."></a>

<h3><a href="http://www.example.com/page2">Assistive Technology: Essential Human Factors</a></h3>

etc. etc.

[edited by: tedster at 4:57 am (utc) on Sep. 25, 2004]
[edit reason] use example.com [/edit]