Well that's what's even weirder... when I go in to edit the page, it's still showing 500px, even the client side shows 100%. I've tried re-uploading, clearing cache, all with no success.
Also, on the buttons, I'm only seeing code for one of each, one for Previous and one for Next, but those don't seem to be showing properly either... ugh...
Last edited by AChicken9; 04-24-2011 at 11:00 PM..
Try giving the 'ul' that contains all the images a width. It has 'overflow:hidden' but without constraining the width it will just stretch. You might then need to adjust its 'left' position.
I would also move the next/prev buttons after the 'ul' (but still within the carousel div). They don't need to appear in a specific order as they are absolutely positioned, but (I suspect) need to be within the div.
To add a (background) image to these buttons you may need to modify the carousel css file. (Do they need to be 'input' elements?)
Did you add a comment to the file(s) and check that it was visible on the client side - to verify that you have updated the file?
I tried giving the <ul> a fixed width, with no luck. As for the adding a comment to ensure it is the most up to date code, yes, in fact I changed some of the page content and that change is showing, just not the width change from 100% to 500px for whatever reason. I also tried to specify the width within the CSS, and that didn't seem to work either. I'm at a complete loss... it's clearly getting the width 100% from somewhere, I'm just not sure where.
As for the buttons, actually removed them from the HTML as they are already included within the JS I'm assuming which is why I had duplicates. So aside from the actual buttons not showing, I'm closer there.
And to further complicate, it looks closer in FireFox, but looks like crap in Internet Explorer.
To hopefully help, here is my up to date code and CSS:
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$("#tabs").tabs();
$('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" mce_href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />').appendTo($('head'));
});
// ]]></script>
<script src="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$(".JMyCarousel").jMyCarousel({
visible: '100%',
eltByElt: true,
speed: 1500,
});
});
$('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head'));
// ]]></script>
<span class="pageCenterTitle">Welcome to Missouri German Shepherd Rescue!</span> <strong>Check out some of our special featured dogs:</strong>
<table style="width: 715px; height: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td rowspan="3" width="559">
<table style="width: 60%; height: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="808">
<div id="tabs" style="width: 500px;">
<ul>
<li><a href="#fragment-1">DeeDee</a></li>
<li><a href="#fragment-2">Missy</a></li>
<li><a href="#fragment-3">Sampson</a></li>
<li><a href="#fragment-4">Roco</a></li>
</ul>
<div id="fragment-1">
<h2>DeeDee</h2>
<table style="width: 90%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Female | approx. 1 year 4 months<a href="/animals/detail?AnimalID=3164913"><img style="border: 0pt none;" title="DeeDee" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nutsflscqao.jpg" alt="DeeDee" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Poetry in motion!</p>
<p>DeeDee is an absolutely beautiful sleek black girl with lots of energy to burn! She'd be a great dog for an active family who is willing to give her the love, attention, discipline and daily exercise she needs. <a href="/animals/detail?AnimalID=3164913">Learn More About DeeDee</a></p>
<table style="width: 206px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
<div id="fragment-2">
<h2>Missy</h2>
<table style="width: 90%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Female | approx. 6 year 2 months<a href="animals/detail?AnimalID=3136834"><img style="border: 0pt none;" title="Missy" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbqnubuw20m.jpg" alt="Missy" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Complete sweetheart!</p>
<p>Missy is such a sweet girl who was fortunate enough to avoid a tragic end. She is calm, loving and very well behaved. Missy is a complete lovebug who simply wants to snuggle with you.<a href="/animals/detail?AnimalID=3136834">Learn More About Missy</a></p>
<table style="width: 206px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
<div id="fragment-3">
<h2>Sampson</h2>
<table style="width: 90%; height: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Male | approx. 4-5 years<a href="/animals/detail?AnimalID=2950199"><img style="border: 0pt none;" title="Sampson" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nagekpw1vin.jpg" alt="Sampson" hspace="5" vspace="5" width="142" height="215" align="right" /></a></strong></p>
<p>Big, stunning bi-color boy who thinks he's a puppy!</p>
<p><strong>SAMPSON</strong> was also dumped by a puppy mill and had spent his entire life confined to a tiny crate 24/7. He's a stunning bi-color GSD, and a wonderfully sweet fellow who's learned that life is good for a change. He LOVES running around in the play yard, likes soft stuffed toys (jumps and twirls in the air with them) and loves his walks, playtime, attention, the sun, the fresh air. With a little patience and training, he'll be a WOW!-ser of a companion! <a href="/animals/detail?AnimalID=2950199">Learn More About Sampson</a></p>
<table style="width: 207px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
<div id="fragment-4">
<h2>Roco</h2>
<table style="width: 90%;" border="0" cellpadding="2">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Male | approx. 4 years</strong><a href="/animals/detail?AnimalID=2875674"><img style="border: 0pt none;" title="Roco" src="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nvoaek3ewjl.jpg" alt="Roco" hspace="5" vspace="5" width="164" height="215" align="right" /></a></p>
<p>A classic beauty and a serious GSD!</p>
<p><strong>ROCO </strong>is a classic black and tan GSD with amazing potential! He'd love an active owner who is willing to give him the love, attention, discipline and daily exercise he needs. Roco is a serious dog and needs an experienced owner. He's adores men (a true man's dog) and gets along with women who are strong leaders. He gets along with many other dogs, especially females and submissive dogs. <a href="/animals/detail?AnimalID=1765783">Learn More About Roco</a></p>
<table style="width: 204px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="130" align="center" valign="top">
<p><strong>Other Ways To Help:</strong></p>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table style="width: 100%;" border="0" cellpadding="2">
<tbody>
<tr>
<td align="center" valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/info/donate"><span>Donate</span></a> <br /><br /></td>
</tr>
<tr>
<td align="center" valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&keyID=1411&referer=/forms/form_edit.phpQu8FormID=1411"><span>Foster</span></a><br /><br /></td>
</tr>
<tr>
<td align="center" valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&keyID=1413&referer=/forms/form_edit.phpQu8FormID=1413"><span>Volunteer</span></a> <br /><br /></td>
</tr>
</tbody>
</table>
<p><br /> {SaD160x160/}</p>
<p> </p>
</td>
</tr>
<tr>
<td align="center" valign="top"> </td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="10">
<tbody>
<tr>
<td style="background-repeat: no-repeat;" colspan="2" align="center" valign="top" background="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nqv2mqyarm4.gif">
<p><span style="color: #000000;"><strong> Our Favorite Success Stories!</strong></span></p>
<div class="JMyCarousel" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 500px; height: 175px;">
<ul style="overflow: hidden; float: left; display: inline; width: 500px;">
<a class="thickbox" style="overflow: hidden;" title="Pete Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nucm5y5yiz9.jpg" alt="" width="200px" height="150px" /></a>
<li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Ralph (previously Taylor) With His New Family" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njvjhdrkdgj.jpg" alt="" width="200" height="150" /></a></li>
<li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Roz Getting Ready For A Car Ride" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nsos6uemx0d.jpg" alt="" width="200px" height="150px" /></a></li>
<li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Sid (aka Zed) Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbamtbhmn5m.jpg" alt="" width="200px" height="150px" /></a></li>
<li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200px" height="150px" /></a></li>
</ul>
</div>
<h3><span style="font-size: 10pt;"><a href="http://mogsrescue.rescuegroups.org/animals/stories">Read all of our success stories now!</a></span></h3>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td style="background-repeat: no-repeat;" width="50%" valign="top" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152n9dsekpcbtx.gif">
<p><span style="color: #000000;"><strong>The MOGS Team In Action!</strong></span></p>
<p><span style="font-size: 10pt;"><span style="color: #000000;">Sure a good amount of our time is<br /> devoted to rescuing and rehoming <br /> these fantastic dogs. But it doesn't <br /> stop there!</span></span> <a href="/info/display?PageID=10303"><span style="font-size: 10pt;">Read More</span></a><span style="font-size: 10pt;"><br /> <br /> </span></p>
</td>
<td style="background-repeat: no-repeat;" width="50%" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nprimq50hbh.gif">
<p><span style="color: #000000;"><strong>Is a German Shepherd Right For you?</strong><br /> <br /> <span style="font-size: 10pt;">A German Shepherd can make<br /> a great family addition. But <br /> before you bring one in your<br /> home, be sure it's the right dog <br /> for you.</span></span><span style="font-size: 10pt;"> <a href="http://mogsrescue.rescuegroups.org/info/display?PageID=9955&popup=Yes">Read More</a></span></p>
<p> </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS:
Code:
div.jMyCarousel.prev{
background: url('https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nnkxlii9ade.gif') center center no-repeat;
width: 47px;
height: 61px;
border: 0px;
}
div.jMyCarousel .next{
background: url('https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152n1old9ihpxw.gif') center center no-repeat;
width: 40px;
height:61px;
border:0px;
}
div.jMyCarousel {
border:0px ;
width: 550px;
}
div.jMyCarousel ul{
width: 550px;
}
div.jMyCarousel ul li{
margin:0px;
border:1px solid #ccc;
line-height:0px;
padding:0px;
}
div.jMyCarousel ul li a{ /* in case of link */
display:block;
}
div.jMyCarousel ul li img{
display:block;
border:0px;
}
Last edited by AChicken9; 04-25-2011 at 07:09 PM..
Screens showing the 500px width is placed within the Dev on the file, but for whatever reason isn't showing on the live version of the page via Firebug.
Running out of ideas, sorry - where's an expert when you need one
Try width: 550px !important;
or !!!!important! - only kidding
Try disabling the carousel js and css to discover whether these might be changing the width.
You could try starting a new page and constructing just the carousel, but this would still make it tricky to determine where the problem in the original page is. Andy.
LOL no kidding! But you've been great! A quick update... I was able to get the carousel to display properly in FireFox for the most part... I'm still not seeing my buttons, and my background is duplicating for some reason... but other than that it's pretty functional... Bad news is it still doesn't work in Internet Explorer. I don't suppose you have any ideas for that?
div.jMyCarousel .prev {
background: url("left.png") no-repeat scroll center center transparent;
border: 0 none;
height: 61px;
width: 47px;
}
I suppose you could try duplicating this (with your own image) in your css file, perhaps with !important to see if you can countermand the image and size (height/ width). But maybe the carousel documentation will describe a method to replace these with your own images? Andy.
Ahh to fix it, I ended up doing a few things, but the main updates are in red and include giving my <TD> a width, changed my <UL style> and swapped out the style="display: inline" as I understand IE has issues with it.
Code:
<td style="width: 650px; height: 145px; background: url(https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nhpht1wl6n0.gif) repeat scroll 0% 0% transparent;" colspan="2">
<p><span style="color: #000000;"><strong> Just Some of Our Recent Success Stories!</strong></span></p>
<div class="JMyCarousel" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 500px; height: 175px;">
<ul style="overflow: hidden; display: inline; width: 99999px; position: absolute;"><a class="thickbox" style="overflow: hidden;" title="Pete Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nucm5y5yiz9.jpg" alt="" width="200px" height="150px" /></a>
<li style="float: left;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Ralph (previously Taylor) With His New Family" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njvjhdrkdgj.jpg" alt="" width="200" height="150" /></a></li>
<li style="float: left;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Roz Getting Ready For A Car Ride" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nsos6uemx0d.jpg" alt="" width="200px" height="150px" /></a></li>
<li style="float: left;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Sid (aka Zed) Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbamtbhmn5m.jpg" alt="" width="200px" height="150px" /></a></li>
<li style="float: left;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200px" height="150px" /></a></li>
</ul>
</div>
<h3><span style="font-size: 10pt;"><a href="http://mogsrescue.rescuegroups.org/animals/stories">Read all of our success stories now!</a></span></h3>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
Taking that comma out helped the overall display and it now shows in one line in IE! WOO HOO! The only thing is it seems to have some gaps in images within IE (i.e. it's not one continue image string like in FF). Thoughts?
Thanks but the gaps I've got are like multiple missing images. Take a look at the attached. But only in IE... in FF it's fine.
If I find just the right spot where the buttons should be it scrolls, then I see the other images, followed by an open space again before the images cycle through again.
Last edited by AChicken9; 04-26-2011 at 01:58 AM..
When I examine the page currently in IE there is an 'a' link after the fourth image of your carousel which seems to have fallen outside of its 'li'. This breaks the carousel so there are only four images available.
I've also noticed that the page seems to also contain a yui-carousel. Was this there before?
The level of nesting of elements table, table, div, table, etc.., within the page seems disproportionate to the limited content within the page. (I may have mentioned this already..).
I need to stop looking at your page for a while . I shall wake up barking in the middle of the night!?!
Hmm what tool are you using to review in IE? Just the IE built in developer tools? I'm not seeing any extraneous <a>s in there but that doesn't mean much... Here's the code I'm seeing for the fourth image:
Code:
<li style="float: left;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200px" height="150px" /></a></li>
</ul>
Is this different than what you're seeing?
As for the YUI carousel, no... and I'm not seeing that anywhere... could you post an example?
Divs/ Tables, yeah I need to go in and clean up the overall page, it's somewhat of a hodge podge right now. Do you think maybe that's the problem?
Lastly, I know what you mean!! I volunteer with this group and I swear I start to see dogs in my sleep!
Before you post, read our: 
. I shall wake up barking in the middle of the night!?!
