CSS looks fine, so maybe is Pullo’s turn
I have the faulty webpage online to see the effects
The page you link to works fine for me.
Did you post the wrong link?
I’m off to bed now. I’ll pick this up in the morning.
This is what I have, with all the content (all years) below the content tab (yellow) box
?!
I tried the remote page on chrome, Firefox and IE8 and all the same
:injured:
It is a simple misunderstanding about what should have been copied and pasted on the page. Give me a few minutes to see if I can explain it without us having to revert to the previous working code.
I’ll be back shortly.
On the comments.php page, delete lines 290 through 303:
<div id="form" class="content">Form</div>
<div id="yr2013" class="content">2013</div>
<div id="yr2012" class="content">2012</div>
<div id="yr2011" class="content">2011</div>
<div id="yr2010" class="content">2010</div>
<div id="yr2009" class="content">2009</div>
<div id="yr2008" class="content">2008</div>
<div id="yr2007" class="content">2007</div>
<div id="news" class="content">News</div>
</div>
</div>
If doing this does not fix the problem, then lets return to the last working code and go from there.
I reverted to last working version and replaced 2012, 2011… with yr2012, yr2011…
[EDIT : Up to post #37 is fine… when I removed the inline and added the .content - first line of the script, I got problems…]
[ EDIT 2: Yeah, when I removed the style=“display: none;” (and included the .content at first line of the script), I had all content showing in every tab selection]
You did a nice job of setting up comments.php for us to troubleshoot 
I copied the current page, http://maltanaturetours.com/comments.php, and made the following changes and they worked for me.
comments.php
Please replace the JavaScript at the bottom of the page with Pullo’s new JavaScript.
var tabs = function(){
var tabList = $I("tab-nav"),
tabs = tabList.getElementsByTagName("li");
for (var i=0, l = tabs.length; i < l; i++){
tabs[i].onclick = function(e){
handleTabClick(e, this);
}
}
function $I(id){
return document.getElementById(id);
}
function getId(el){
return el.getAttribute("href").replace(/#/, "")
}
function handleTabClick(e, tab){
var activeTab = document.querySelector(".active"),
activeContent = $I(getId(activeTab.childNodes[0])),
newActiveContent = $I(getId(tab.childNodes[0]));
activeContent.style.display = 'none';
activeTab.className = '';
newActiveContent.style.display = 'block';
tab.className = 'active';
e.preventDefault();
}
document.querySelector(".active").click();
}();
(Note: Be aware that line 590 is missing “yr” in the ID. The following changes fix it.)
Then change the following lines to read exactly as follows:
(line 368)
<div id="news" class="content" align="center">
(line 377)
<div id="yr2013" class="content">
(line 409)
<div id="yr2012" class="content">
(line 449)
<div id="yr2011" class="content">
(line 496)
<div id="yr2010" class="content">
(line 553)
<div id="yr2009" class="content">
(line 590)
<div id="yr2008" class="content">
(line 622)
<div id="yr2007" class="content">
Let us know if this works.
I’m not going to meddle too much more in this thread, as too many cooks and all that …
However, here: http://maltanaturetours.com/comments.php
the 2008 tab is not working - you forgot the “yr” prefix.
<div id=“2008” style=“display: none;”>
Thanks for everything, it is working fine. The missing yr in the 2008 was a symptom leak of tiredness yesterday. Maybe you have time to reply post #31. Thanks.
#Tabs ul {
list-style:none; /* Lists, "ul" and "ol", have default styles; this shorthand overrides default and inherited styles such as the bullets that were being applied in an ancestoral container. */
overflow:hidden; /* {overflow:hidden} is required because the list items are floated. Other methods are available. */
padding:16px 0 0 24px; /* List boxes have default padding-left for bullets. This changes the padding values. */
margin:0; /* Like paragraphs, lists have default top and bottom margins. This sets them to zero. */
}
#Tabs ul li { /* The "li" tag assigns the same styles to all list item boxes below this ul; add classnames or IDs to target individual list items. Other targeting methods are available. */
float:left; /* float:left causes the list item boxes to align to the left and "shrink-wrap" around their contents */
}
#Tabs ul li a { /* The "a" tag targets all anchors below this list item. Default properties for all anchors should be set here. */
display:block; /* display:block expands the anchor to the width of the li */
line-height:24px; /* line-height sets the height of the tab via the anchor. This method may be undesirable if text wraps. */
background:#e0d040; /* The background color of anchors */
border:2px solid #ccc; /* A border around anchors */
border-radius:6px 6px 0 0; /* The border-radius of anchors */
color:#000; /* Default text color for all anchors */
font-weight:bold; /* Sets the font-weight to bold for all anchors */
text-decoration:none; /* Removes the HTML default underline from all anchors */
padding:1px 10px; /* Applies padding to all anchors thereby affecting the width of the tabs */
}
#Tabs ul li a:hover { /* Only contains the properties that should change on :hover */
background-color:#fff090; /* Changes the background-color on :hover */
font-style:normal; /* Overrides a font-style setting somewhere earlier in the CSS */
text-decoration:underline; /* Applies an underline to the anchor on :hover */
}
#Tabs ul li a:active { /* Only contains the properties that should change on :active */
color:#000; /* Sets the font-color to black (should not be necessary because font color is set in the anchor and never changed) */
background-color:#fff; /* Changes the background-color on :active */
}
#Tabs ul li.active a { /* Styles the anchor when the list item has the class of .active . These styles override the :hover and :active pseudoclasses */
color:#000; /* Sets the font-color to black when the list item has class .active (should not be necessary because font color is set in the anchor and never changed) */
text-decoration:none; /* Removes the underline from the anchor when the list item has class .active */
background-color:#fff090; /* Sets the background-color when the list item has class .active */
border-bottom:2px solid transparent; /* Allows the background-color to fill the border-bottom area of the anchor and give the illusion of being one with #Content_Area. */
cursor:default; /* Stops the cursor from turning into a pointer when the list item has class .active */
}
#Tabs #Content_Area { /* These styles define the box, #Content_Area */
line-height:19px; /* line-height will be inherited by paragraphs */
width:700px; /* Assigns a fixed width to #Content_Area */
height:600px; /* Assigns a fixed height to #Content_Area. Used in conjunction with overflow:auto to allow long content. An uncommon technique. */
overflow:auto; /* Generates scroll bars if the content exceeds the height or width of #Content_Area. */
border:2px solid #ccc; /* Styles a border around #Content_Area. */
background-color:#fff090; /* Styles a background-color for #Content_Area. */
margin:-2px 24px 24px; /* this {margin-top:-2px} raises #Content_Area under #Tabs so borders overlap */
}
The "#" in front of #Tabs and #Control_Area identifies them as IDs.
However, because an ID can be used only ONCE on a page, they are often used by JavaScript to target specific objects. For example, JavaScript targets the individual content blocks by way of their ID. Also, an ID is used as a fragment identifier.
Please see the comments above beside #Tabs ul and #Tabs ul li .
Used alone, ul and li target all list and list item boxes respectively. To target specific list items, add a classname or ID to the list item or use another targeting technique.
#Tabs ul li a:active { }
This selector styles the :active state of all anchors in these list items and anchors in any children of these list items.
#Tabs ul li.active a { } (Please note that I added "ul" within this selector to add weight to specificity.)
This selector styles all anchors in the list item that has a class of "active" and all anchors in any children of this list item. This overrides previous "#Tabs ul li a" styles.
- I am not a quotable authority on HTML or CSS specifications. Please refer to an authoritative source.
- My comments in the code boxes are probably easier to read if copied to a text file and displayed with a mono-spaced font so they can wrap.
Oh! This is lovely - the post even became a tutorial. Thanks very much mate, it was very very helpful. I can see the thought behind the script and what controls what!