SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mystifying block display behaviour in Firefox

    I am trying to create a catalog using CSS rather than tables to display products in rows in a block.

    Everything seemed to work fine when I viewed my page in Internet Explorer, but when I checked it in Firefox something odd happened -- the list I was using to display the products seems to acquired a mysterious left margin that wasn't there in IE. The effect of this was to push the line of product boxes over so that I could only get four in a line instead of 5.

    Does anyone have any clue what is happening here?

    I have pasted the relevant page markup and CSS below.

    SkillShop.html

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name = "Join Skill Club, play games, win prizes, earn Skill Points, convert Points into 
    
    IMVU credits and gifts, chat, make friends." />
    <title>SkillGameStar's Skill Shop</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body bgcolor = "#9oc4e2">
    <div id="container">
      <div id="header">
        <div id="movie">
        <img src="bannered.gif" alt="SkillGameStar banner" width="468" height="120" /></div>
        <div id="logo"><img src="SkillLogo2.gif" alt="SkillGameStar logo" width="285" height="120" 
    
    /></div>
      </div>
      <div class="style2" id="strap"> <strong>... where games and instant messaging come 
    
    together</strong></div>
      <div id="content">
      <div id = "main">
             <div id = "skillshopmain">
    <div id = "shopfront">
    <br>
    <h2><font color = #ff00ff>Start shopping!</font></h2>
    <br>
    <p><strong>This month's featured products</strong></p>
    <br>
    <ul id = "shoplist">
    
    <li><div class = "productbox">
    <a href = "http://www.imvu.com/shop/product.php?products_id=794542&quickfind=new" target = 
    
    "blank"><img src = "products/Mericanadian Meridian-LBRose.jpg" width = "100" height = "80" />
    Meridian LBRose-</a><br>by
    <a href = "http://avatars.imvu.com/mericanadian" target = "blank">Mericanadian</a>
    <br><div class = "buynowimg">
    <a href ="http://www.imvu.com/catalog/web_give_av.php?nav_section=credits&nav_subsection=give" 
    
    target = "blank">
    <img src = "buybutton.gif"></a></div><div class = "creditimg"><img src = 
    
    "creditssmall.gif"></div>
    600</div></li>
    
    <li><div class = "productbox">
    <a href = "http://www.imvu.com/shop/product.php?products_id=794542&quickfind=new" target = 
    
    "blank"><img src = "products/Mericanadian Meridian-LBRose.jpg" width = "100" height = "80" />
    Meridian LBRose-</a><br>by
    <a href = "http://avatars.imvu.com/mericanadian" target = "blank">Mericanadian</a>
    <br><div class = "buynowimg">
    <a href ="http://www.imvu.com/catalog/web_give_av.php?nav_section=credits&nav_subsection=give" 
    
    target = "blank">
    <img src = "buybutton.gif"></a></div><div class = "creditimg"><img src = 
    
    "creditssmall.gif"></div>
    600</div></li>
    
    <li><div class = "productbox">
    <a href = "http://www.imvu.com/shop/product.php?products_id=794542&quickfind=new" target = 
    
    "blank"><img src = "products/Mericanadian Meridian-LBRose.jpg" width = "100" height = "80" />
    Meridian LBRose-</a><br>by
    <a href = "http://avatars.imvu.com/mericanadian" target = "blank">Mericanadian</a>
    <br><div class = "buynowimg">
    <a href ="http://www.imvu.com/catalog/web_give_av.php?nav_section=credits&nav_subsection=give" 
    
    target = "blank">
    <img src = "buybutton.gif"></a></div><div class = "creditimg"><img src = 
    
    "creditssmall.gif"></div>
    600</div></li>
    
    <li><div class = "productbox">
    <a href = "http://www.imvu.com/shop/product.php?products_id=794542&quickfind=new" target = 
    
    "blank"><img src = "products/Mericanadian Meridian-LBRose.jpg" width = "100" height = "80" />
    Meridian LBRose-</a><br>by
    <a href = "http://avatars.imvu.com/mericanadian" target = "blank">Mericanadian</a>
    <br><div class = "buynowimg">
    <a href ="http://www.imvu.com/catalog/web_give_av.php?nav_section=credits&nav_subsection=give" 
    
    target = "blank">
    <img src = "buybutton.gif"></a></div><div class = "creditimg"><img src = 
    
    "creditssmall.gif"></div>
    600</div></li>
    
    <li><div class = "productbox">
    <a href = "http://www.imvu.com/shop/product.php?products_id=794542&quickfind=new" target = 
    
    "blank"><img src = "products/Mericanadian Meridian-LBRose.jpg" width = "100" height = "80" />
    Meridian LBRose-</a><br>by
    <a href = "http://avatars.imvu.com/mericanadian" target = "blank">Mericanadian</a>
    <br><div class = "buynowimg">
    <a href ="http://www.imvu.com/catalog/web_give_av.php?nav_section=credits&nav_subsection=give" 
    
    target = "blank">
    <img src = "buybutton.gif"></a></div><div class = "creditimg"><img src = 
    
    "creditssmall.gif"></div>
    600</div></li>
    </ul>
    
    <p><font color = #009933><strong>Click on a link below to browse the catalog for more 
    
    products</strong></font></p>
    <br>
    <div id = "shopnavigation">
    <ul>
    <li><a href = "Skillshop4">Female fashions</a></li>
    <li><a href = "Skillshop5">Male fashions</a></li>
    <li><a href = "Skillshop4">Furniture</a></li>
    <li><a href = "Skillshop4">Stickers</a></li>
    </ul>
    </div>
    </div> 
    <br>
    <font size = 2>*No purchase necessary. Skill Points can be earned for free in various ways. 
    
    Click <a href = "SkillPointsBalance.html"> here</a> for more details.</font>
                        
         </div>
        </div>
        <div id="leftbar">
        <div class = "HPreturnbutton"><a href = "http://avatars.imvu.com/skillgamestar" target = 
    
    "blank"><img src = "HPbutton.gif" alt = "Click button to go to SkillGameSTar's Home Page on 
    
    IMVU"></a></div>
    <div class = "HPreturnbutton"><a href = "Index.html"><img src = "Skillpointspagebutton.gif" alt 
    
    = "Click button to go to SkillGameStar's Skill Points page"></a></div>
    <div class = "Adleftbarsky">
    <script type="text/javascript"><!--
    google_ad_client = "pub-4580759271309234";
    /* Skill Club sky */
    google_ad_slot = "3648473975";
    google_ad_width = 160;
    google_ad_height = 600;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
              </div>
              </div>
             </div>
             <div id = "footer">
    </div>
    </div>
    </body>
    </html>
    Skillshop.css

    Code:
    .productbox {border: 1px solid purple;
                 width: 100px;
                 height: 140px;
                 padding-top: 1px;
                 padding-left: 1px;
                 padding-right: 1px;
                 color: #666666;
                 background-color: white;
    }
    #skillshopmain {
        height: 790px;
            border: 5px double pink;
            padding: 8px;
    }
    #skillshoppic  {margin-left: 170px;
    }
    #shoplist {list-style-type: none;
    }
    #shoplist img {display: block;
                   margin-bottom: 5px;
                   
    }
    #shoplist li {float: left;
                   width: 80px;
                   margin-right: 28px;
                   margin-bottom: 15px;
                   font-size: small;
    }
    a            {text-decoration: none;
    }
    #howtoshop   {padding: 25px;
                  color: #CC00CC;
    }
    #shop li {color: #009933;
    }
    #shopnavigation li {display: inline;
                        margin-left: 20px;
                        font-size: large;
    }
    #shopfront         {background-color: #FFCC99;
                        padding: 5px;
                        padding-bottom: 8px; 
    }
    Last edited by Paul O'B; Aug 6, 2008 at 02:27. Reason: code tags added


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •