New to CSS: Strange jCarousel Rendering Issue

CMS & WordPress
1

I am working on my site here: http://www.fortysomethingbride.com

The home page is gorgeous and I love the theme, however, on any page other than the home page the jCarousel is running vertical down the page and making the page unreadable. (Click on any reference in the carousel to see what I mean.)

I used firebug to find the error in html. But I don’t understand coding enough to know where to make the change in the source. Unfortunately for me, the person who wrote the theme told me that he doesn’t know enough to understand why I am having the problem.

Here is the code from the home page:

<div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" id="mycarousel" style="position: relative; display: block;">
<div class="jcarousel-scroll">
<h3 class="featured">Featured Stories</h3>
<form action="">
<a id="mycarousel-next" href="#">Next »</a>
<a id="mycarousel-prev" href="#">« Prev</a>
</form>
</div>
<div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 1080px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1">
<div class="img-title">

And this is what is on any other page:

<div class="jcarousel-skin-tango" id="mycarousel">
<div class="jcarousel-scroll">
<h3 class="featured">Featured Stories</h3>
<form action="">
<a id="mycarousel-next" href="#">Next »</a>
<a id="mycarousel-prev" href="#">« Prev</a>
</form>
</div>
<ul>
<li>
<div class="img-title">

I have identified the code that needs to be fixed, but I have no idea where to fix the error. Is it in a php file or a css file?

When I run debugger in ie, it tells me that this is the issue:

jQuery("#mycarousel").jcarousel({
        wrap: 'last',
        scroll: 1,
        animation: 'fast',
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    })

I would be truly grateful if someone could point me in the right direction.

The other alternative (and I rather like it) is to turn off the jcarousel on pages other than the home page. If you can tell me what to change in the header file to do that, that would be awesome.

Thank you for any assistance and your patience with a newbie.

Colleen

2

Looks like you’ve got an extra jquery link in the other page.


$(function(){
 
$('select.styled').customStyle();
 
});


</script>
[B]<script type='text/javascript' src='http://www.fortysomethingbride.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
[/B]

Removing that seems to allow the page to work.

3

Thank you so much for your response. I have looked around at my files, and unfortunately, I do not have the skill to understand which file needs to be edited to remove the reference. (I was looking at the php files using notepad and css using editor within WP).

Would you be able to point me in the right direction? I looked at the php and css files and couldn’t find this or find where the call was for it.

Sorry for being such a newbie, but I am just learning, and really, I haven’t set out to do code, just to build a WP site.

Thanks again for your patience and assistance.

4

Hi,

Sorry but I don’t use wordpress and wouldn’t know where to look. It’s probably included with one of your other plug ins but you’d be better off asking in a dedicated wordpress forum as you could make a mess if you remove code blindly. I can tell you where it is in the html from view source but how it got there in the first place is not so easy to answer.

Sitepoint has wordpress section here or you may get a more specific reply at the [URL=“http://wordpress.org/support/”]wordrpess support site.

5

Thanks. I may just throw in the towel and go in a different direction. I really appreciate your assistance on this. (I’ll give it one more kick at the can first.)

WP is a bit difficult to understand when things go wrong. I still can’t figure out how it puts the html together.

Have a great weekend & thanks again.

Colleen

6

Yes, I had a similar problem with vbulletin forum code and it takes ages to work out where everything is at first.

It’s probably worth persevering as whatever you learn will hold you in good stead for the future when you want to make other changes.

7

Thank you for your encouragement. I have decided to get this thing fixed. I really do like the look of the theme.

I am about to post it on the Sitepoint WP Forum.

Colleen

8

I originally posted my question on the CSS forum group.

9

Threads merged to keep them together.

10

Thank you Paul!

11

Does anyone have any suggestions? I have the theme developer working on it, but he (and his team) is stumped. There is another site using this theme that is experiencing the same issue, so it doesn’t seem to be related just to my install, yet a few other sites using the theme haven’t experienced any problems at all. Who knows?

12

Unless I’m mistaken it looks like you got it working with the jquery noConflict() routine.

13

Yes, you are correct, that was the solution that worked. This issue has been solved. Thanks! (Actually, at the time you posted your comment, noconflict had not been used…we had found and disabled the plugin that was causing the conflict…your comment lead us in the right direction.)

14

This has been solved and should be closed. Thank you!