Why are the tabs not shwoing in this page and they are showing on their sister site

Hi, On this page here:
http://ballinacampers.com.au/index.php?page=the-freedom---volkswagon
YOU see the tabs OVERVIEW, STANDARD, OPTIONS, VEHICLES, GALLERY working as tabs.
If you go to this site http://horizonmotorhomes.com.au/index.php?page=the-melaleuca
It is not showing the tabsl

I would love to know how to fix this?  Is is a CSS thing?
I hope to here a solution in the CSS?
Thank you
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
The sites have different javascript/jquery and the one that is broken has js errors.  What happens if you make sure the share the same js files?
0
 
duttcomConnect With a Mentor Commented:
It's your code. By the look of it, the one that works is being generated by some sort of module, where as the one that does not work is being generated by some other sort of module. Here is the code that works -

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs-1">Overview</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-2">Standard</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-3">Options</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-5">Vehicles</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-6">Gallery</a>
</li>
</ul>

Open in new window


And the code that doesn't -

<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Overview</a>
</li>
<li>
<a href="#tabs-2">Standard</a>
</li>
<li>
<a href="#tabs-3">Options</a>
</li>
<li>
<a href="#tabs-5">Vehicles</a>
</li>
<li>
<a href="#tabs-6">Gallery</a>
</li>
</ul>

Open in new window


I would go into the back end of both websites and compare the way those tabs are generated and use the same method as the one that works for the one that doesn't.
0
 
Andrej PirmanConnect With a Mentor Commented:
Yes, it is CSS thing.

I suggest you to use Google Chrome's function on right-click --> Inspect element, or in Firefox install Firebug add-on, and run it on this page.
With any of those tools, you can:
- in Chrome, navigate in showed HTML code in bottom of Inspect window, and you will get accross CSS properties, which define how tabs are designed
- or in Firefox with Firebug, click on blue rectangle, then you can point any object on page and examine its CSS properties

That way you will learn how to use CSS :)

BTW...it would take me about 30 minutes to answer you with correct CSS settings, but I suggest you do it yourself.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
Ray PaseurConnect With a Mentor Commented:
It's often useful to check the page validation (frequently while it is being built)

http://validator.w3.org/check?uri=http%3A%2F%2Fballinacampers.com.au%2Findex.php%3Fpage%3Dthe-freedom---volkswagon&charset=%28detect+automatically%29&doctype=Inline&group=0

http://validator.w3.org/check?uri=http%3A%2F%2Fhorizonmotorhomes.com.au%2Findex.php%3Fpage%3Dthe-melaleuca&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

Also, if you don't know why you are using this doctype declaration, make a Google search for "html5" and switch to a doctype that will give you more consistent rendering across browsers.  HTML5 is much easier to get right!
<!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" xml:lang="en" >

Open in new window

Best regards, ~Ray
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Yes I thought it was a css thing, but which part is missing for me in the horizon site compared to the campers site??
They are using modules...but why does one work, and one doesn't?
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
I just tried using their theme as a new theme and change everything around and it didn't apply any of the styling at all.
I check they style sheets they are the same, but for some reason the calling of the TABS isn't happening on the horizon site like it is on the campers site and I can't figure out how to do it.
0
 
duttcomConnect With a Mentor Commented:
I don't think it is the CSS. PLease see my orignal post; you can change the CSS as much as you want, but if the code that is generated on the page doesn't refer to it in the first place, then it won't work. The code generated to display those tabs is missing the styles that would make it look right.

If you go to the administration area of site that works, how is that set of tabs generated? Is it a module of some kind? Are there parameters which allow you to specify a style for those tabs?

Now go to the administration area of the site that doesn't work - are the tabs set up in exactly the same way? If it's a module, are the settings the same?

If you can tell me what module you are using, I may be able to pinpoint where the problem might be.
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Yes it is a module of CMSMS but I am not very familiar with this program so I can't really tell if the module is broken.

We have decided to move the site to Wordpress so that we are using a more up to date CMS.

Thanks for everyones assistance to solve this, but it will remain a mystery, but I think the reference to the .js is probably the culprit as well as some css...?
Thanks again
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Thank you everyone
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.