WebProWorld Part of WebProNews.com
Page One Link To Us Edit Profile Private Messages Archives FAQ RSS Feeds  
 

Go Back   WebProWorld > Site Design > Graphics & Design Discussion Forum
Subscribe to the Newsletter FREE!


Register FAQ Members List Calendar Arcade Chatbox Mark Forums Read

Graphics & Design Discussion Forum Post your graphics design questions/comments/ideas in here. Ask questions, post tutorials, discuss trends and best practices. Sub-forum for website accessibility and usability.

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 09-18-2006, 06:29 PM
hommealone's Avatar
hommealone hommealone is offline
WebProWorld Pro
 

Join Date: Feb 2004
Location: Kingston, NY USA
Posts: 107
hommealone RepRank 0
Default debugging help needed! diagonal aaargh!

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!
Reply With Quote
  #2 (permalink)  
Old 09-19-2006, 12:11 AM
drummin drummin is offline
WebProWorld Veteran
 

Join Date: Aug 2003
Location: California,USA
Posts: 373
drummin RepRank 0
Default

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>
Reply With Quote
  #3 (permalink)  
Old 09-19-2006, 12:17 AM
arvana's Avatar
arvana arvana is offline
WebProWorld Pro
 

Join Date: Jul 2003
Location: Guelph, Ontario, Canada
Posts: 157
arvana RepRank 0
Default

Have you tried simply adding a clear:left to the book img tag?
__________________
Arvana
arvanadesign.com
Reply With Quote
  #4 (permalink)  
Old 09-19-2006, 11:07 AM
hommealone's Avatar
hommealone hommealone is offline
WebProWorld Pro
 

Join Date: Feb 2004
Location: Kingston, NY USA
Posts: 107
hommealone RepRank 0
Default clear, eh?

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:

Quote:
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.
Reply With Quote
  #5 (permalink)  
Old 09-19-2006, 12:25 PM
hommealone's Avatar
hommealone hommealone is offline
WebProWorld Pro
 

Join Date: Feb 2004
Location: Kingston, NY USA
Posts: 107
hommealone RepRank 0
Default solved

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

Thanks so much!
Reply With Quote
  #6 (permalink)  
Old 09-19-2006, 03:26 PM
arvana's Avatar
arvana arvana is offline
WebProWorld Pro
 

Join Date: Jul 2003
Location: Guelph, Ontario, Canada
Posts: 157
arvana RepRank 0
Default

Sweet! Glad to help.
__________________
Arvana
arvanadesign.com
Reply With Quote
Reply

  WebProWorld > Site Design > Graphics & Design Discussion Forum
Tags: aaargh, debugging, diagonal, help, needed



Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



Search Engine Friendly URLs by vBSEO 3.0.0