Solved

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

Posted on 2013-05-28
9
266 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 110

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
 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Compute age Html 2 27
CSRF session and form tokens never match when using php/AJAX 4 30
toggle content 12 25
JSON decode 5 20
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

733 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