• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 270
  • Last Modified:

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
0
Amanda Watson
Asked:
Amanda Watson
5 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
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
 
duttcomCommented:
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 PirmanCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Ray PaseurCommented:
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 WatsonAuthor 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 WatsonAuthor 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
 
duttcomCommented:
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 WatsonAuthor 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 WatsonAuthor Commented:
Thank you everyone
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now