Solved

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

Posted on 2013-05-28
9
263 Views
Last Modified: 2013-06-06
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
Comment
Question by:Amanda Watson
9 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 100 total points
ID: 39203187
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
 
LVL 12

Assisted Solution

by:duttcom
duttcom earned 200 total points
ID: 39203190
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
 
LVL 18

Assisted Solution

by:Andrej Pirman
Andrej Pirman earned 100 total points
ID: 39203198
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
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 100 total points
ID: 39204187
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Author Comment

by:Amanda Watson
ID: 39209483
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 39209503
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
 
LVL 12

Assisted Solution

by:duttcom
duttcom earned 200 total points
ID: 39209541
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 39226894
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
 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 39226896
Thank you everyone
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now