By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,042 Members | 1,277 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,042 IT Pros & Developers. It's quick & easy.

Skipping problem - what am I missing?

P: 40
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 .

The code looks like this:

[html]
<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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($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>&nbsp;($79)</div>

</div>
</body></html>
[/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.
May 27 '08 #1
Share this Question
Share on Google+
3 Replies


hsriat
Expert 100+
P: 1,654
You forgot to fix the height.

210px looks good to me.

And I love that Pirates Cove Wall Hanging. But its too expensive. :(
May 28 '08 #2

P: 40
hsriat, you ROCK. That did the trick. :)

You want that wall hanging, you got it at half price. Shoot me an email.
May 28 '08 #3

hsriat
Expert 100+
P: 1,654
Thanks dude ... was just kidding...


Actually I'm a fan of The Pirates of Caribbean movies..

Glad to know it worked for you...

May 28 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.