[SOLVED] Skipping problem - Am I missing something?

vozzek · May 27, 2008

Hi all,

I'm a CSS rookie, but I'm stumped. Hopefully this is something simple that I'm overlooking.

My master/detail page generates the following html code, and I've got it formatted with CSS instead of tables. I have a wrapper that's 800px wide, and I want 4 columns of 200px. Each item is an image 160px wide, with 20px of margin on each side.

Seems like it works for about 3 rows, then it skips a few (three items). Six rows after that, it skips some more (only two items this time). To visually see what I mean, click here: http://www.thefrogandtheprincess.com/blah.html

The code looks like this:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="/java.js"></SCRIPT>
</head>
<body>
<style type="text/css">
  .itemWrapper {
    width: 800px;
    background: #FFFFFF;
  }
  .item {
    float: left;
width: 160px;
margin: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #1F2E11;
font-size: 11px;
border: 0px;
text-align: center;
display: inline;
position: relative;
  }
  a:link {
text-decoration: none;
color: #1F2E11;
  }
  a:visited {
text-decoration: none;
  }
  a:hover {
text-decoration: underline;
  }
  a:active {
text-decoration: none;
  }
</style>

<div class="itemWrapper">
<div class="item"><a href='detail99.php?RecordID=38'><img src='Images/oops_bloomsc_1.jpg' border='0' alt='Bloom' /></a>
<a href='detail99.php?RecordID=38'>Bloom</a> ($149)</div>
<div class="item"><a href='detail99.php?RecordID=1139'><img src='Images/oops_dreamboysc_3.jpg' border='0' alt='Dream' /></a>
<a href='detail99.php?RecordID=1139'>Dream</a> ($150)</div>

<div class="item"><a href='detail99.php?RecordID=1145'><img src='Images/SheriBlum_BejeweledPrincess_WallHanging_1.jpg' border='0' alt='Bejeweled Princess Wall Hanging' /></a>
<a href='detail99.php?RecordID=1145'>Bejeweled Princess Wall Hanging</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1146'><img src='Images/SheriBlum_KissMeGN_1.jpg' border='0' alt='Always Kiss Me Goodnight Wall Hanging' /></a>

<a href='detail99.php?RecordID=1146'>Always Kiss Me Goodnight Wall Hanging</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1147'><img src='Images/SheriBlum_OnceUpon_1.jpg' border='0' alt='Once Upon A Time Princess Scroll' /></a>
<a href='detail99.php?RecordID=1147'>Once Upon A Time Princess Scroll</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1148'><img src='Images/Sheri_ballerinanameplaque_1.jpg' border='0' alt='Ballerina Name Plaque' /></a>
<a href='detail99.php?RecordID=1148'>Ballerina Name Plaque</a> ($99)</div>
<div class="item"><a href='detail99.php?RecordID=1149'><img src='Images/Sheri_nickname_1.jpg' border='0' alt='Nickname Canvas Wall Art Set of 4' /></a>

<a href='detail99.php?RecordID=1149'>Nickname Canvas Wall Art Set of 4</a> ($200)</div>
<div class="item"><a href='detail99.php?RecordID=1150'><img src='Images/Sheri_cowboynameplaque_1.jpg' border='0' alt='Americana Cowboy Name Plaque' /></a>

<a href='detail99.php?RecordID=1150'>Americana Cowboy Name Plaque</a> ($99)</div>
<div class="item"><a href='detail99.php?RecordID=1151'><img src='Images/SheriBlum_train_WH_1.jpg' border='0' alt='Train Wall Hanging Canvas' /></a>
<a href='detail99.php?RecordID=1151'>Train Wall Hanging Canvas</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1152'><img src='Images/Sheri_chocolaterosesplaque_1.jpg' border='0' alt='Chocolate and Roses Wall Art Plaque' /></a>
<a href='detail99.php?RecordID=1152'>Chocolate and Roses Wall Art Plaque</a> ($99)</div>
<div class="item"><a href='detail99.php?RecordID=1153'><img src='Images/SheriBlum_Storybook_WH_1.jpg' border='0' alt='Once Upon A Time Storybook Wall Hanging' /></a>
<a href='detail99.php?RecordID=1153'>Once Upon A Time Storybook Wall Hanging</a> ($160)</div>

<div class="item"><a href='detail99.php?RecordID=1154'><img src='Images/SheriBlum_StorybookBoy_WH_1.jpg' border='0' alt='Brave Prince Storybook Wall Hanging' /></a>

<a href='detail99.php?RecordID=1154'>Brave Prince Storybook Wall Hanging</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1155'><img src='Images/Sheri_dramaqueenplaque_1.jpg' border='0' alt='Drama Queen Canvas Wall Art' /></a>
<a href='detail99.php?RecordID=1155'>Drama Queen Canvas Wall Art</a> ($99)</div>
<div class="item"><a href='detail99.php?RecordID=1157'><img src='Images/MJ_soft_1.jpg' border='0' alt='Soft by Mary Jack Studios' /></a>
<a href='detail99.php?RecordID=1157'>Soft by Mary Jack Studios</a> ($100)</div>
<div class="item"><a href='detail99.php?RecordID=3404'><img src='Images/oops_octupusandfishsc_1.jpg' border='0' alt='Octopus and Fish' /></a>
<a href='detail99.php?RecordID=3404'>Octopus and Fish</a> ($54)</div>
<div class="item"><a href='detail99.php?RecordID=1158'><img src='Images/SheriBlum_PiratesCove_WH_1.jpg' border='0' alt='Pirates Cove Wall Hanging' /></a>

<a href='detail99.php?RecordID=1158'>Pirates Cove Wall Hanging</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1159'><img src='Images/Sheri_girlpirateplaque_1.jpg' border='0' alt='Girls Pirate Skull Name Plaque' /></a>
<a href='detail99.php?RecordID=1159'>Girls Pirate Skull Name Plaque</a> ($99)</div>
<div class="item"><a href='detail99.php?RecordID=1160'><img src='Images/Sheri_sports12_1.jpg' border='0' alt='Boys Sports Themed Wall Art' /></a>
<a href='detail99.php?RecordID=1160'>Boys Sports Themed Wall Art</a> ($50)</div>
<div class="item"><a href='detail99.php?RecordID=1161'><img src='Images/oops_africansafarisc_1.jpg' border='0' alt='African Safari' /></a>
<a href='detail99.php?RecordID=1161'>African Safari</a> ($260)</div>
<div class="item"><a href='detail99.php?RecordID=1179'><img src='Images/oops_exploresc_1.jpg' border='0' alt='Explore' /></a>
<a href='detail99.php?RecordID=1179'>Explore</a> ($139)</div>

<div class="item"><a href='detail99.php?RecordID=1181'><img src='Images/drooz_dayatthebeach_1.jpg' border='0' alt='Day at The Beach by Drooz Studio Multiple Colors' /></a>
<a href='detail99.php?RecordID=1181'>Day at The Beach by Drooz Studio Multiple Colors</a> ($129)</div>
<div class="item"><a href='detail99.php?RecordID=1182'><img src='Images/oops_fairytaleboyssc_1.jpg' border='0' alt='Fairy Tale Boys' /></a>
<a href='detail99.php?RecordID=1182'>Fairy Tale Boys</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=1183'><img src='Images/oops_fairytalegirlssc_1.jpg' border='0' alt='Fairy Tale Girls' /></a>
<a href='detail99.php?RecordID=1183'>Fairy Tale Girls</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=3349'><img src='Images/MJ_possibilitiesl_1.jpg' border='0' alt='Possibilities by Mary Jack Studios' /></a>
<a href='detail99.php?RecordID=3349'>Possibilities by Mary Jack Studios</a> ($140)</div>

<div class="item"><a href='detail99.php?RecordID=3350'><img src='Images/SheriBlum_Knight_1.jpg' border='0' alt='Knight Scroll Giclee Wall Hanging' /></a>

<a href='detail99.php?RecordID=3350'>Knight Scroll Giclee Wall Hanging</a> ($160)</div>
<div class="item"><a href='detail99.php?RecordID=3351'><img src='Images/drooz_boyannouncement_1.jpg' border='0' alt='Boy Announcement by Drooz Studio' /></a>
<a href='detail99.php?RecordID=3351'>Boy Announcement by Drooz Studio</a> ($129)</div>
<div class="item"><a href='detail99.php?RecordID=3353'><img src='Images/oops_butterflyplaidsc_1.jpg' border='0' alt='Butterfly Plaid' /></a>
<a href='detail99.php?RecordID=3353'>Butterfly Plaid</a> ($54)</div>
<div class="item"><a href='detail99.php?RecordID=3354'><img src='Images/oops_arabesquesc_1.jpg' border='0' alt='Arabesque' /></a>
<a href='detail99.php?RecordID=3354'>Arabesque</a> ($116)</div>

<div class="item"><a href='detail99.php?RecordID=3355'><img src='Images/MJ_solitude_1.jpg' border='0' alt='Solitude by Mary Jack Studios' /></a>
<a href='detail99.php?RecordID=3355'>Solitude by Mary Jack Studios</a> ($140)</div>

<div class="item"><a href='detail99.php?RecordID=3356'><img src='Images/drooz_babyhang_1.jpg' border='0' alt='Baby Wall Hanging by Drooz Studio' /></a>
<a href='detail99.php?RecordID=3356'>Baby Wall Hanging by Drooz Studio</a> ($169)</div>
<div class="item"><a href='detail99.php?RecordID=3358'><img src='Images/drooz_circusbloom_1.jpg' border='0' alt='Circus Bloom by Drooz Studio Multiple Colors' /></a>
<a href='detail99.php?RecordID=3358'>Circus Bloom by Drooz Studio Multiple Colors</a> ($129)</div>
<div class="item"><a href='detail99.php?RecordID=3360'><img src='Images/oops_birdprincesssc_1.jpg' border='0' alt='Bird Princess' /></a>
<a href='detail99.php?RecordID=3360'>Bird Princess</a> ($119)</div>

<div class="item"><a href='detail99.php?RecordID=3361'><img src='Images/MJ_puppy_1.jpg' border='0' alt='Puppy by Mary Jack Studios' /></a>
<a href='detail99.php?RecordID=3361'>Puppy by Mary Jack Studios</a> ($130)</div>
<div class="item"><a href='detail99.php?RecordID=3362'><img src='Images/drooz_explorersclubgreen_1.jpg' border='0' alt='Explorers Club by Drooz Studio' /></a>

<a href='detail99.php?RecordID=3362'>Explorers Club by Drooz Studio</a> ($129)</div>
<div class="item"><a href='detail99.php?RecordID=3365'><img src='Images/drooz_cabanaking_1.jpg' border='0' alt='Cabana King Wall Hanging by Drooz Studio' /></a>
<a href='detail99.php?RecordID=3365'>Cabana King Wall Hanging by Drooz Studio</a> ($169)</div>
<div class="item"><a href='detail99.php?RecordID=3366'><img src='Images/oops_carriagesc_1.jpg' border='0' alt='Carriage' /></a>
<a href='detail99.php?RecordID=3366'>Carriage</a> ($198)</div>

<div class="item"><a href='detail99.php?RecordID=3367'><img src='Images/MJ_unendinggreen_1.jpg' border='0' alt='Unending Green by Mary Jack Studios' /></a>
<a href='detail99.php?RecordID=3367'>Unending Green by Mary Jack Studios</a> ($140)</div>
<div class="item"><a href='detail99.php?RecordID=3368'><img src='Images/oops_giveadogabonesc_1.jpg' border='0' alt='Give a Dog a Bone' /></a>
<a href='detail99.php?RecordID=3368'>Give a Dog a Bone</a> ($85)</div>

<div class="item"><a href='detail99.php?RecordID=3371'><img src='Images/drooz_cabanaqueen_1.jpg' border='0' alt='Cabana Queen Wall Hanging by Drooz Studio' /></a>
<a href='detail99.php?RecordID=3371'>Cabana Queen Wall Hanging by Drooz Studio</a> ($169)</div>
<div class="item"><a href='detail99.php?RecordID=3372'><img src='Images/oops_championsbasketballsc_1.jpg' border='0' alt='Champions Basketball' /></a>
<a href='detail99.php?RecordID=3372'>Champions Basketball</a> ($79)</div>

</div>
</body></html>

Does anyone see what's happening to cause these skips? Because it happens on every master page, in different spots, skipping different items all the time. And I double-checked the images to make sure they're all 160x160.

Thanks in advance for any help with this.

calabiyau · May 27, 2008

The only thing i've noticed is that it skips whenever there is an item description that is three lines long instead of the usual one or two lines long. Maybe a clue along the way, not sure. That's just from looking at the page you showed.

DrewsDesigns · May 28, 2008

Hi vozzek,

First post here, but I was browsing through your thread and figured I would reply

I believe your issue is because your page does not have a DTD (doctype). Putting a proper doctype on your page should fix the issue. For example change your html from this:

<html>
<head>

<title>Kids Wall Art at The Frog and the Princess Baby Boutique</title>

to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kids Wall Art at The Frog and the Princess Baby Boutique</title>

This should give you the effect you want.

Also, remember to validate often, you need to fix any errors you see here, the doctype should get rd of most of them... http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.thefrogandtheprincess.com%2Fblah.html

I have also have a test page I put up to try and fix your problem, in case you are interested, here is the fixed and working test page http://drewsdesigns.com/codingforums/vozzek.html

Let me know how it works out

Drew

haku · May 28, 2008

Doctypes are very important in order to prevent problems like this. They tell the browser what standard the code should be evaluated by. Without a doctype, the browser has to guess, and often makes incorrect guesses, which may be where your problems lie. Step one would be to add one and see what happens. If that doesn't fix the problem, then you/we can take it from there.

vozzek · May 28, 2008

Hi guys,

I actually fixed this by specifying a height attribute (210px), but your points about the DOC type are well taken. The original page does a php include on a header/footer, but I checked and I hadn't done a doc type there either. I'll have to fix that.

Thanks for all the help!

Sign In

[SOLVED] Skipping problem - Am I missing something?

Recommended Posts

vozzek

Link to comment

Share on other sites

calabiyau

Link to comment

Share on other sites

DrewsDesigns

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

vozzek

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information