Forums
View unanswered posts | View active topics It is currently Thu Oct 02, 2014 12:25 am



Reply to topic  [ 7 posts ] 
 Jcarousel & Pie 
Author Message

Joined: Sat Dec 18, 2010 11:31 am
Posts: 4
Post Jcarousel & Pie
Greetings,


I have a problem using Jcarousel & Pie.

On all other pages everything works fine, but when I click on the Products link and direct to a page containing a Jcarousel product list, the background colour/border/drop-show moves about 5px to the left, leaving everything else (menu, header, footer) slightly out of place.

What's really strange is that this happens randomly. Sometimes the page will load and be fine. Click on the Products link a few times and it's literally random whether it will render it all in line or not. It's definitely an IE and Pie problem though because all other browsers render everything correctly 100% of the time.

I'm currently using a border-radius and drop-shadow on the background, and if I remove the border-radius, only the background and drop shadow will move (and the default straight-line border will stay where it should be).

Does anyone have any ideas how to fix this?


Thanks!


Sat Dec 18, 2010 11:47 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1443
Post Re: Jcarousel & Pie
If you can post a url or some sample code that would help in debugging this.

In situations where I've seen issues like this, I've often found it helpful to make sure the PIE-styled element's immediate parent has position:relative, that makes it easier for PIE to calculate positions.


Sun Dec 19, 2010 12:23 pm
Profile

Joined: Sat Dec 18, 2010 11:31 am
Posts: 4
Post Re: Jcarousel & Pie
The site isn't live yet, so I'm only able to view it locally, but here's some code. The site is made using ASP.net.

The master page:

Code:
<body class="background">
     <div class="borderstyle">   

          <div class="main">
               <form id="form1" runat="server">
                       <asp:ContentPlaceHolder id="ContentPlaceHolder" runat="server">
                       </asp:ContentPlaceHolder>
               </form>
           </div>

    </div>
</body>


The CSS style element:

Code:
.borderstyle
{
    border-top: solid 2px #E8E8E8;
    border-right: solid 2px #E8E8E8;
    border-bottom: solid 2px #E8E8E8;
    border-left: solid 2px #E8E8E8;
    background-color: #181818;
    position: absolute;
    top: 20%;
    left: 25%;
    width: 800px;
    height: 550px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: rgba(0,0,0,0.4) 5px 5px;
    -moz-box-shadow: rgba(0,0,0,0.4) 5px 5px;   
    box-shadow: rgba(0,0,0,0.4) 5px 5px;
    behavior: url(PIE.htc);
}


The Products page where Jcarousel is implemented:

Code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="server">

    <asp:ListView ID="ListView1" runat="server" DataKeyNames="p_id" OnItemDataBound="DetailsView1_OnItemDataBound"
        DataSourceID="EntityDataSource1">

        <ItemTemplate>         
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=<%# Eval("p_id") %>"><asp:Image ID="ProductImage" runat="server" CssClass="productImage"  /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <asp:Label ID="ProductName" runat="server" Text='<%# Eval("name") %>' CssClass="productName" />
                    </div>
                </li>         
        </ItemTemplate>
         
        <LayoutTemplate>

        <div id="carousel" class="jcarousel-skin-tango">
            <ul ID="itemPlaceholderContainer" runat="server">
                <li runat="server" id="itemPlaceholder" />
            </ul>
        </div>

        </LayoutTemplate>
       
    </asp:ListView>

</asp:Content>



I hope this helps!


Mon Dec 20, 2010 6:29 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1443
Post Re: Jcarousel & Pie
Hmm, I don't have a .net environment so those templates aren't much use to me. Can you send a sample of the generated HTML?


Mon Dec 20, 2010 9:47 am
Profile

Joined: Sat Dec 18, 2010 11:31 am
Posts: 4
Post Re: Jcarousel & Pie
In Internet Explorer, HTML code (without styling, with product/image names removed):

Code:
    <body class="background">
        <div class="borderstyle">   

            <div class="buttons">
                <table id="menu" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <a href="Page.aspx"><img class="rollover" alt="" src="Images/Website/default_off.png" /></a>     
                        </td>
                        <td>
                            <a href="Page.aspx"><img class="rollover" alt="" src="Images/Website/default_off.png" /></a>
                        </td>
                        <td>
                            <a href="Page.aspx"><img class="rollover" alt="" src="Images/Website/default_off.png" /></a>     
                        </td>
                        <td>
                            <a href="Page.aspx"><img class="rollover" alt="" src="Images/Website/default_off.png" /></a>     
                        </td>
                        <td>
                            <a href="Page.aspx"><img class="rollover" alt="" src="Images/Website/default_off.png" /></a>     
                        </td>
                    </tr>
                </table>
            </div>
            <div class="main">
                <form method="post" action="Products.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="+LB4OSQp6Nrtz3YkWTL2s6UfQKibhJooUTmU0nT5G3ZKEhWDFVaLUgVgXe/fm7pk+LqvtgGvWOJZHfxCM2xTi1g+TN+yfoYUCzZIEkygOcW5YQYrrEiiVHtPADspFOXOTM9YoCx8gb2kdwbuwG36k3Z3GtjVrHp054AxLFqhF+MpDO/N6G6ripTtgoJ96GZVvpRcMa5KnL1TmAEBdMdGb+9IoktSAEHHDnyz+Z1zU/I+DOzuIEtq2CY86Umihs7PTBikWK9nMr/1hA67RAmuh0Fp5KjAdA3kw51+KJf/4AvPLLYF5RXb3tuXlDdK2bBn+1ctZvpNXjOfQUC+36PKSzXYAc9tzsIiYhov98GallJu2lJxKielsDRHAEA6VIOLXHhE+7BN051itq2Dc9DaP5X78hxK8MrfJ7uAjU0m7rr0l1R02h8+sd7IROgPiG01jxFQNPn/EEGkiBoOGSxd0RbIe+gT1B7gH6jnQ7voElro7cWBMUVjxtfRY7Idkc26QJtJW8tnf6g4mRDsTB/prVQsCK32F1jH+61HHxPDDVKCEcinV6SSIeU/Qri9Rv0F2ooPObTnEHXQOvdmTG+VRIixqOcewfcoKMl3/8Lt/gfeV9o5qEpk/YcPKxv8udJJKOslUc/n/7HzxJYzgrvIJIS+xMXXQ3WIqHyL2CtR50fW+QUcLDsBy0vcK4Iw0tCO7+AduPpDCucJFXFMbFTrbn6Y+H1Ru57NSB6zQEduFM/UB2gUM799nXIukWkuW0Nk49jCninad4esD2cjOOt3c3Kohwza0+RnMoCMvdUL3y6rF1ijHUDZ6j0xH4Q82XhxA+Ab1dUvOyGQvdygw1+XLKklXBGWZ65Ugg7NoOrO8PiUCCB2VXDA2DrA1ZEeuYaK87yiQRlaF1C1spKsJuipTInJU8hlP5xXKhz72aD3X54wCuxbgvMTExjQr/NVse1iEpv853HG2ZUXZOn36YcBrkvkXJvjalQQlanGnsW+5Nv0pB2Cq8LJCD+SEwZbN+MvrQLDHK2wNrhD87//YzEdFDhKRnX537GQGPkojNNJ6R/WWUpOlmFe1KcsdRF6fjnRaiGmAwKo3J1l/xJwNgaSgIXruSmR67KEG0qF6zrycdFjyWDeEIQdCxxVX2ey0nk5d88JB0lf3DR3y/wbbr+Cw7YQafssoVXmnvWreIJmwceNg7DcAns/loWxeRZEfVOm3YOeKlkbtV0erNpPQjK2TPTIs42rMa8H+2R9yeR/b7Pc71EFpyUNiE5hsSzijwnPo+SkdePXe0X8mVJRZIjCPZs5wbforDRix7aEZ6GcrBrmPssB0tRQ98WY3+/e8YUldVZLq6lwrV682a6OojtrIuOQ6K5yy2kGEPNQNG9QXSeW+E/ll8BVUgQ7HhmlPBfxwgYPlwc4pCi/6Zue70cEI/fK5OaB1R4rKYN4zyGPmuRucpMbFvgdRHtF4f7sFH4cOPY6h+iiJoA8XkHDv4/JtKWez4PTFsQWMO2GldhjlfnR6Mh4aWc2djarfB5fpv/braFziw14/f/yIZvLULOBDokOrZ/yuOcEy5IBK6qT7ZADaSF/mCYttLZOSziYxw8Qt/87sRR9EngFldZ1ygSGd5liV0hNd5zESwkn2R+Rce4Og+fP3i5FfSNwnOuhwqFZTw5QUbMCozx6dt59/8fctW88EEFfDp6nAHRFHdO18iidDN4Mx/YSDJwioav4SYXeINHlwNf8qZpO4J+YgJSejQ8tSslcoTswYPoc0sxXNXTNtaxXtixgQYQdqC1lOByz6I9QhfjNok056QwhzjeAnicA3uBHaNPd+IbtEpxgXhDNx8/iIiSBI0uI0uSVCUAP2UMa9dR4FiDxff4fs24w7Fn7WHBbFpWflQmgH0CasDY0Mw0yv/aa3xFPK7aaUWmILMaFXvWUQJo1zYbg+9O7NT56Hip95BQzMxhVRcdgsob2IXUGqg8CbzIOv3T1LmpoJ8TYjO8Fg+WO6x6Ny148XuvhehhzPxbwkwvAPhpqoYztLjSdGKz0jlt7+F8ZonwO" />
</div>
 
<div class="aspNetHidden">
 
   <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
</div>
                       
 
    <div class="normal" style="width:95%; margin:auto;">
        <br /><br />
               
        <blockquote class="tab">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit amet.</blockquote>
       
        <blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
        erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.</blockquote>
 
   
 
        <div id="carousel" class="jcarousel-skin-tango">
            <ul id="ContentPlaceHolder_ListView1_itemPlaceholderContainer">
                         
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=14"><img id="ContentPlaceHolder_ListView1_ProductImage_0" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_0" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=15"><img id="ContentPlaceHolder_ListView1_ProductImage_1" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_1" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=10"><img id="ContentPlaceHolder_ListView1_ProductImage_2" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_2" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=20"><img id="ContentPlaceHolder_ListView1_ProductImage_3" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_3" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=8"><img id="ContentPlaceHolder_ListView1_ProductImage_4" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_4" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=11"><img id="ContentPlaceHolder_ListView1_ProductImage_5" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_5" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=5"><img id="ContentPlaceHolder_ListView1_ProductImage_6" class="productImage" src="Images/5_defaultphoto_management.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_6" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=18"><img id="ContentPlaceHolder_ListView1_ProductImage_7" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_7" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=7"><img id="ContentPlaceHolder_ListView1_ProductImage_8" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_8" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=17"><img id="ContentPlaceHolder_ListView1_ProductImage_9" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_9" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=13"><img id="ContentPlaceHolder_ListView1_ProductImage_10" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_10" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=9"><img id="ContentPlaceHolder_ListView1_ProductImage_11" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_11" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=12"><img id="ContentPlaceHolder_ListView1_ProductImage_12" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_12" class="productName">*Product Name*</span>
                    </div>
                </li>         
                 
                <li>
                    <div style="text-align: center;">
                        <a href="ProductDetail.aspx?p_id=16"><img id="ContentPlaceHolder_ListView1_ProductImage_13" class="productImage" src="Images/Website/no_image.jpg" /></a>
                    </div>
                    <div style="text-align: center;">                         
                        <span id="ContentPlaceHolder_ListView1_ProductName_13" class="productName">*Product Name*</span>
                    </div>
                </li>         
       
            </ul>
        </div>
 
       
    </div>
 
   
 
 
 
                </form>
            </div>
        </div>
    </body>



Mon Dec 20, 2010 10:50 am
Profile

Joined: Sat Dec 18, 2010 11:31 am
Posts: 4
Post Re: Jcarousel & Pie
Any ideas?


Mon Dec 27, 2010 5:10 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1443
Post Re: Jcarousel & Pie
Sorry, I'm on vacation right now, won't be able to debug this until I get home next week.


Tue Dec 28, 2010 8:51 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 6 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.