Skipping problem - what am I missing?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • vozzek
    New Member
    • Sep 2007
    • 40
    #1

    Skipping problem - what am I missing?

    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="JavaS cript" 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="itemWrap per">
    <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=11 39'><img src='Images/oops_dreamboysc _3.jpg' border='0' alt='Dream' /></a>
    <a href='detail99. php?RecordID=11 39'>Dream</a>&nbsp;($150) </div>

    <div class="item"><a href='detail99. php?RecordID=11 45'><img src='Images/SheriBlum_Bejew eledPrincess_Wa llHanging_1.jpg ' border='0' alt='Bejeweled Princess Wall Hanging' /></a>
    <a href='detail99. php?RecordID=11 45'>Bejeweled Princess Wall Hanging</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 46'><img src='Images/SheriBlum_KissM eGN_1.jpg' border='0' alt='Always Kiss Me Goodnight Wall Hanging' /></a>

    <a href='detail99. php?RecordID=11 46'>Always Kiss Me Goodnight Wall Hanging</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 47'><img src='Images/SheriBlum_OnceU pon_1.jpg' border='0' alt='Once Upon A Time Princess Scroll' /></a>
    <a href='detail99. php?RecordID=11 47'>Once Upon A Time Princess Scroll</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 48'><img src='Images/Sheri_ballerina nameplaque_1.jp g' border='0' alt='Ballerina Name Plaque' /></a>
    <a href='detail99. php?RecordID=11 48'>Ballerina Name Plaque</a>&nbsp;($99)</div>
    <div class="item"><a href='detail99. php?RecordID=11 49'><img src='Images/Sheri_nickname_ 1.jpg' border='0' alt='Nickname Canvas Wall Art Set of 4' /></a>

    <a href='detail99. php?RecordID=11 49'>Nickname Canvas Wall Art Set of 4</a>&nbsp;($200) </div>
    <div class="item"><a href='detail99. php?RecordID=11 50'><img src='Images/Sheri_cowboynam eplaque_1.jpg' border='0' alt='Americana Cowboy Name Plaque' /></a>

    <a href='detail99. php?RecordID=11 50'>Americana Cowboy Name Plaque</a>&nbsp;($99)</div>
    <div class="item"><a href='detail99. php?RecordID=11 51'><img src='Images/SheriBlum_train _WH_1.jpg' border='0' alt='Train Wall Hanging Canvas' /></a>
    <a href='detail99. php?RecordID=11 51'>Train Wall Hanging Canvas</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 52'><img src='Images/Sheri_chocolate rosesplaque_1.j pg' border='0' alt='Chocolate and Roses Wall Art Plaque' /></a>
    <a href='detail99. php?RecordID=11 52'>Chocolate and Roses Wall Art Plaque</a>&nbsp;($99)</div>
    <div class="item"><a href='detail99. php?RecordID=11 53'><img src='Images/SheriBlum_Story book_WH_1.jpg' border='0' alt='Once Upon A Time Storybook Wall Hanging' /></a>
    <a href='detail99. php?RecordID=11 53'>Once Upon A Time Storybook Wall Hanging</a>&nbsp;($160) </div>

    <div class="item"><a href='detail99. php?RecordID=11 54'><img src='Images/SheriBlum_Story bookBoy_WH_1.jp g' border='0' alt='Brave Prince Storybook Wall Hanging' /></a>

    <a href='detail99. php?RecordID=11 54'>Brave Prince Storybook Wall Hanging</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 55'><img src='Images/Sheri_dramaquee nplaque_1.jpg' border='0' alt='Drama Queen Canvas Wall Art' /></a>
    <a href='detail99. php?RecordID=11 55'>Drama Queen Canvas Wall Art</a>&nbsp;($99)</div>
    <div class="item"><a href='detail99. php?RecordID=11 57'><img src='Images/MJ_soft_1.jpg' border='0' alt='Soft by Mary Jack Studios' /></a>
    <a href='detail99. php?RecordID=11 57'>Soft by Mary Jack Studios</a>&nbsp;($100) </div>
    <div class="item"><a href='detail99. php?RecordID=34 04'><img src='Images/oops_octupusand fishsc_1.jpg' border='0' alt='Octopus and Fish' /></a>
    <a href='detail99. php?RecordID=34 04'>Octopus and Fish</a>&nbsp;($54)</div>
    <div class="item"><a href='detail99. php?RecordID=11 58'><img src='Images/SheriBlum_Pirat esCove_WH_1.jpg ' border='0' alt='Pirates Cove Wall Hanging' /></a>

    <a href='detail99. php?RecordID=11 58'>Pirates Cove Wall Hanging</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 59'><img src='Images/Sheri_girlpirat eplaque_1.jpg' border='0' alt='Girls Pirate Skull Name Plaque' /></a>
    <a href='detail99. php?RecordID=11 59'>Girls Pirate Skull Name Plaque</a>&nbsp;($99)</div>
    <div class="item"><a href='detail99. php?RecordID=11 60'><img src='Images/Sheri_sports12_ 1.jpg' border='0' alt='Boys Sports Themed Wall Art' /></a>
    <a href='detail99. php?RecordID=11 60'>Boys Sports Themed Wall Art</a>&nbsp;($50)</div>
    <div class="item"><a href='detail99. php?RecordID=11 61'><img src='Images/oops_africansaf arisc_1.jpg' border='0' alt='African Safari' /></a>
    <a href='detail99. php?RecordID=11 61'>African Safari</a>&nbsp;($260) </div>
    <div class="item"><a href='detail99. php?RecordID=11 79'><img src='Images/oops_exploresc_ 1.jpg' border='0' alt='Explore' /></a>
    <a href='detail99. php?RecordID=11 79'>Explore</a>&nbsp;($139) </div>

    <div class="item"><a href='detail99. php?RecordID=11 81'><img src='Images/drooz_dayattheb each_1.jpg' border='0' alt='Day at The Beach by Drooz Studio Multiple Colors' /></a>
    <a href='detail99. php?RecordID=11 81'>Day at The Beach by Drooz Studio Multiple Colors</a>&nbsp;($129) </div>
    <div class="item"><a href='detail99. php?RecordID=11 82'><img src='Images/oops_fairytaleb oyssc_1.jpg' border='0' alt='Fairy Tale Boys' /></a>
    <a href='detail99. php?RecordID=11 82'>Fairy Tale Boys</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=11 83'><img src='Images/oops_fairytaleg irlssc_1.jpg' border='0' alt='Fairy Tale Girls' /></a>
    <a href='detail99. php?RecordID=11 83'>Fairy Tale Girls</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=33 49'><img src='Images/MJ_possibilitie sl_1.jpg' border='0' alt='Possibilit ies by Mary Jack Studios' /></a>
    <a href='detail99. php?RecordID=33 49'>Possibiliti es by Mary Jack Studios</a>&nbsp;($140) </div>

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

    <a href='detail99. php?RecordID=33 50'>Knight Scroll Giclee Wall Hanging</a>&nbsp;($160) </div>
    <div class="item"><a href='detail99. php?RecordID=33 51'><img src='Images/drooz_boyannoun cement_1.jpg' border='0' alt='Boy Announcement by Drooz Studio' /></a>
    <a href='detail99. php?RecordID=33 51'>Boy Announcement by Drooz Studio</a>&nbsp;($129) </div>
    <div class="item"><a href='detail99. php?RecordID=33 53'><img src='Images/oops_butterflyp laidsc_1.jpg' border='0' alt='Butterfly Plaid' /></a>
    <a href='detail99. php?RecordID=33 53'>Butterfly Plaid</a>&nbsp;($54)</div>
    <div class="item"><a href='detail99. php?RecordID=33 54'><img src='Images/oops_arabesques c_1.jpg' border='0' alt='Arabesque' /></a>
    <a href='detail99. php?RecordID=33 54'>Arabesque</a>&nbsp;($116) </div>

    <div class="item"><a href='detail99. php?RecordID=33 55'><img src='Images/MJ_solitude_1.j pg' border='0' alt='Solitude by Mary Jack Studios' /></a>
    <a href='detail99. php?RecordID=33 55'>Solitude by Mary Jack Studios</a>&nbsp;($140) </div>

    <div class="item"><a href='detail99. php?RecordID=33 56'><img src='Images/drooz_babyhang_ 1.jpg' border='0' alt='Baby Wall Hanging by Drooz Studio' /></a>
    <a href='detail99. php?RecordID=33 56'>Baby Wall Hanging by Drooz Studio</a>&nbsp;($169) </div>
    <div class="item"><a href='detail99. php?RecordID=33 58'><img src='Images/drooz_circusblo om_1.jpg' border='0' alt='Circus Bloom by Drooz Studio Multiple Colors' /></a>
    <a href='detail99. php?RecordID=33 58'>Circus Bloom by Drooz Studio Multiple Colors</a>&nbsp;($129) </div>
    <div class="item"><a href='detail99. php?RecordID=33 60'><img src='Images/oops_birdprince sssc_1.jpg' border='0' alt='Bird Princess' /></a>
    <a href='detail99. php?RecordID=33 60'>Bird Princess</a>&nbsp;($119) </div>

    <div class="item"><a href='detail99. php?RecordID=33 61'><img src='Images/MJ_puppy_1.jpg' border='0' alt='Puppy by Mary Jack Studios' /></a>
    <a href='detail99. php?RecordID=33 61'>Puppy by Mary Jack Studios</a>&nbsp;($130) </div>
    <div class="item"><a href='detail99. php?RecordID=33 62'><img src='Images/drooz_explorers clubgreen_1.jpg ' border='0' alt='Explorers Club by Drooz Studio' /></a>

    <a href='detail99. php?RecordID=33 62'>Explorers Club by Drooz Studio</a>&nbsp;($129) </div>
    <div class="item"><a href='detail99. php?RecordID=33 65'><img src='Images/drooz_cabanakin g_1.jpg' border='0' alt='Cabana King Wall Hanging by Drooz Studio' /></a>
    <a href='detail99. php?RecordID=33 65'>Cabana King Wall Hanging by Drooz Studio</a>&nbsp;($169) </div>
    <div class="item"><a href='detail99. php?RecordID=33 66'><img src='Images/oops_carriagesc _1.jpg' border='0' alt='Carriage' /></a>
    <a href='detail99. php?RecordID=33 66'>Carriage</a>&nbsp;($198) </div>

    <div class="item"><a href='detail99. php?RecordID=33 67'><img src='Images/MJ_unendinggree n_1.jpg' border='0' alt='Unending Green by Mary Jack Studios' /></a>
    <a href='detail99. php?RecordID=33 67'>Unending Green by Mary Jack Studios</a>&nbsp;($140) </div>
    <div class="item"><a href='detail99. php?RecordID=33 68'><img src='Images/oops_giveadogab onesc_1.jpg' border='0' alt='Give a Dog a Bone' /></a>
    <a href='detail99. php?RecordID=33 68'>Give a Dog a Bone</a>&nbsp;($85)</div>

    <div class="item"><a href='detail99. php?RecordID=33 71'><img src='Images/drooz_cabanaque en_1.jpg' border='0' alt='Cabana Queen Wall Hanging by Drooz Studio' /></a>
    <a href='detail99. php?RecordID=33 71'>Cabana Queen Wall Hanging by Drooz Studio</a>&nbsp;($169) </div>
    <div class="item"><a href='detail99. php?RecordID=33 72'><img src='Images/oops_championsb asketballsc_1.j pg' border='0' alt='Champions Basketball' /></a>
    <a href='detail99. php?RecordID=33 72'>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.
    Tags: None
    • hsriat
      Recognized Expert Top Contributor
      • Jan 2008
      • 1653
      #2
      You forgot to fix the height.

      210px looks good to me.

      And I love that Pirates Cove Wall Hanging. But its too expensive. :(

        Comment

        • vozzek
          New Member
          • Sep 2007
          • 40
          #3
          hsriat, you ROCK. That did the trick. :)

          You want that wall hanging, you got it at half price. Shoot me an email.

            Comment

            • hsriat
              Recognized Expert Top Contributor
              • Jan 2008
              • 1653
              #4
              Thanks dude ... was just kidding...
              Actually I'm a fan of The Pirates of Caribbean movies..

              Glad to know it worked for you...

                Comment

                Previous template Next
                Working...