SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird FF behavior on first page load.

    Hello

    I'm having hard time with FireFox - sometimes one of my DIVs 'moves' on top of another. It happens only with first page load, only under FF. After reload everything is fine. It's fine under IE too.

    For better explanation I attached 2 images : wrong.jpg shows how 'paginator' DIV is displayed on top of previous DIV, which is incorrect; correct.jpg show same page after reload - this is how it's supposed to be.

    Does anybody have any idea what's wrong and how to fix it?

    Here is my CSS:
    HTML Code:
    /* Common Properties */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, sub, sup, tt, var,
    dl, dt, dd, ol, form, 
    fieldset, form, label, legend,
    caption {
        margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: normal;
    	font-style: normal;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: top;
    }
    
    body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	position: relative;
    }
    
    div.cell-1-col {
    	width: 728px;
    	margin: 0 0 10px 0;
    	padding: 0 0 10px 0;
    	overflow: hidden;
    }
    
    div.cell-1-col h4 {
    	display: block;
    	width: 728px;
    	height: 30px;
    	padding: 0 20px;
    	line-height: 30px;
    	float: left;
    	background: #2188B3;
    	color: #FFF;
    	font-weight: bold;
    	overflow: hidden;
    	letter-spacing: .1ex;
    }
    
    div.cell-1-col h4 a, div.cell-1-col h4 a:visited {
    	color: #FFF;
    	font-weight: bold;
    }
    
    div.cell-1-col-left {
    	width: 100px;
    	padding: 10px 20px 0 20px;
    	float: left;
    	overflow: hidden;
    }
    
    div.cell-1-col-left  img {
        width: 100px;
    }
    
    div.cell-1-col-middle {
    	width: 415px;
    	padding: 10px 20px 0 0;
    	float: left;
    	overflow: hidden;
    }
    
    div.cell-1-col-right {
    	width: 153px;
    	padding: 10px 0 0 0;
    	float: left;
    	overflow: hidden;
    }
    
    #paginator {
        width: 728px; 
        float:left;
    }
    
    #pag-drop {
        width: 364px; 
        float:left;
    }
    
    #pag-drop select {
        border:1px solid #888; 
        width:45px;
    }
     
    #pag-string {
        width: 359px; 
        float:left;
        text-align:right;
        padding-right:5px;        
    }
    Here is HTML snippet:
    HTML Code:
    <form action="/cart.php?asc_action=AddToCart&prod_id=100" name="ProductForm_100" id="ProductForm_100" method="post">
                            <script type="text/javascript">
                            function ProductFormSubmit_100()
                            {
                                document.forms['ProductForm_100'].submit();
                            };
                            </script>
    <div class="cell-1-col">
        <h4><a href="/garmin-zumo-550-gps-pid-100.html">Garmin Zumo 550</a></h4>
        <div class="cell-1-col-left">
            <a href="/garmin-zumo-550-gps-pid-100.html"><img src="http:///gps-images/garmin-zumo-550-gps-sm.jpg" alt="Garmin Zumo 550" /></a>                    
        </div>
        <div class="cell-1-col-middle">
          	some text ...........
        </div>
        <div class="cell-1-col-right">
            <p class="reg-price">Regular Price: <em>$1,076.91</em></p>
            <p class="our-price">Our Price: </p>
            <p><a href="/garmin-zumo-550-gps-pid-100.html">click to see price</a> (<a href="#" onclick="window.open('/mapprice.html', 'mappricepop', 'resizable=yes,scrollbars=yes,height=190,width=500', false);">why?</a>)</p>
            <img src="/images/add-to-cart.png" alt="Add to Cart" onclick="javascript: ProductFormSubmit_100();" style="cursor: pointer; margin-top:5px;" />
        </div>
    </div>
    </form>
    
    <div id="paginator">
        <div id="pag-drop">
            <form action="/index.php" id="Paginator" method="get">  
            <input type="hidden" name="asc_action" value="Paginator_SetRowsPerPage" />
            <input type="hidden" name="pgname" value="Catalog_ProdsList_1" />
            Number of products displayed:
            <select name="rows" onchange="document.forms['Paginator'].submit();">
                <option>5</option><option selected="selected">10</option><option>20</option><option>30</option>
            </select>
            </form>
        </div>
        <div id="pag-string">&nbsp;</div>
    </div>
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody? Any ideas?
    Last edited by pumba; Mar 18, 2008 at 15:12.


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
  •