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> ($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>
[/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.