debugging help needed! diagonal aaargh!

[hommealone]

Hello folks. I've just about finished up a website for a children's book author (my wife!), and it seems to have one bug left that I just can't seem to solve.

I'm getting reports from a friend-and-bug-tester using IE7, and one using IE5 for Mac, that the "book" elements on one page are displaying offset diagonally to the right as you read down the page. They're supposed to line up straight up and down, one on top of the other. I've tried everything I can think of to fix it, but I just can't seem to get it to display correctly on those systems. (It displays just fine for me on IE6 and on FF.)

Can anyone help me spot and fix the error? I'd really appreciate it.

Here's the page:
http://childrensbooks.lisathiesing.c...llustrator.htm

and the stylesheet for the page is:
http://childrensbooks.lisathiesing.com/books/books.css

If you do see that the page is displaying funny (diagonally), and you wouldn't mind peeking at the rest of the site, let me know if you find any other problems on the other pages, too!

Many thanks!

p.s. - The HTML and CSS both validate!

[drummin]

Sorry I don't the browsers you mentioned and don't see that error. You might try seperating your class tags as in...


<div id="content"><div class="clearfix">

<h2><u>Books Written and Illustrated by <span class="nb">Lisa Thiesing</span></u></h2>

<div class="clearfix"><div class="book">The Scarecrow's New Clothes
A Silly Thriller with Peggy the Pig
<span>(Dutton, 2006)</span></div></div>
<div class="clearfix"><div class="book">A Dark and Noisy Night
A Silly Thriller with Peggy the Pig
<span>(Dutton, 2005)</span></div></div>
<div class="clearfix"><div class="book">The Aliens Are Coming!
A Silly Thriller with Peggy the Pig
<span>(Dutton, 2004)</span></div></div>
<div class="clearfix"><div class="book">The Viper
A Silly Thriller with Peggy the Pig
<span>(Dutton, 2002)</span></div></div>
<div class="clearfix"><div class="book">All Better
(A Step Into Reading Book)
<span>(Random House, 2000)</span></div></div>
<div class="clearfix"><div class="book">Me & You: A Mother - Daughter Album
<span>(Hyperion Books, 1998)</span></div></div>
<div class="clearfix"><div class="book">Rhymin' Simon and the Mystery of the Fake Snake
by Bill Apablasa and Lisa Thiesing<span>
(Dutton, 1993)</span></div></div>
<div class="clearfix"><div class="book">Rhymin' Simon and the Mystery of the Fat Cat
by Bill Apablasa and Lisa Thiesing<span>
(Dutton, 1991)</span></div></div>

<h2><u>Books Illustrated by <span class="nb">Lisa Thiesing</span></u></h2>

<div class="clearfix"><div class="book">Jess and the Stinky Cowboys
written by Janice Lee Smith
<span>(Dial, 2004)</span></div></div>
<div class="clearfix"><div class="book">Hilda and the Mad Scientist
written by Addie Adam
<span>(Dutton, 1995)</span></div></div>
<div class="clearfix"><div class="book">Pudmuddles
written by Carol Beach York
<span>(HarperCollins, 1993)</span></div></div>
<div class="clearfix"><div class="book">Silly Times with Two Silly Trolls
(An I Can Read Book)
written by Nancy Jewell
<span>(HarperCollins, 1996)</span></div></div>
<div class="clearfix"><div class="book">Two Silly Trolls
(An I Can Read Book)
written by Nancy Jewell
<span>(HarperCollins, 1992)</span></div></div>
<div class="clearfix"><div class="book">The Quest for Queenie
written by Brian Ball
<span>(Little, Brown, 1991)</span></div></div>
<div class="clearfix"><div class="book">The Ghastly Gertie Swindle with the Ghosts of Hungryhouse Lane
written by Sam McBratney
<span>(Holt, 1994)</span></div></div>
<div class="clearfix"><div class="book">The Ghosts of Hungryhouse Lane
written by Sam McBratney
<span>(Holt, 1989)</span></div></div>


<div class="spacer"></div>
</div>
</div>

[arvana]

Have you tried simply adding a clear:left to the book img tag?

[hommealone]

Arvana,

So you think it might be a "clear" issue, eh? Do you think it makes the most sense to add clear:left to the "div.book img" element, or simply to the "div.book"? Or both? The w3c standard suggests that you can make problems using "clear:" on floated elements:

CSS clear Property

Note: This property does not always work as expected if it is used along with the "float" property.

drummin,

Thanks for your suggestion - and for re-writing all that code! If the "clear" suggestion doesn't work, I'll try yours next.

p.s. - I'm waiting for my testers to come on line (they're 5 time zones away from me) so I'll let you know more after they become availeable.

[hommealone]

I put the clear:left onto both the ".book img" and the ".book" and now it is showing up properly.

Thanks so much!

[arvana]

Sweet! Glad to help.