Javascript tabs renders differently in Safari, IE8 and IE7 [Archive]

jcdesigns

08-17-2010, 08:12 PM

I am trying to use the javascript tab in my website I am working on. I setup four tabs and it shows fine in Safari but in IE8 all of the tabs text is displayed and will not be centered like Safari. In IE7 I am having the same problem and it shifts too much to the right. When I first created the tabs not within my website everything looked fine, but when I inserted the code into my website these problems in IE8 and IE7 occurred. Maybe it has to be arranged differently for IE but I'm not sure.

Please let me know what I can do to resolve this. Please let me know if you need anything else.
Thanks for your help.

Here is the code.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JCD</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">


var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="body" onload="MM_preloadImages('images/proposalpicb.jpg','images/signuppic2b.jpg','images/testimonialspicb.jpg')">

<div id="wrapper">
<div id="header">
<div id="logo">
<h1><img src="images/Header-text4.png" alt="" width="428" height="43" vspace="9" /></h1>

<div></div>
</div>
<div class="newsletter" id="rss">
<div align="center"><a href="#"> Sign Up for Newletter </a><br />
<img src="images/newsletter.jpg" alt="" width="50" height="51" /><br />
</div>
</div>
</div>


<div id="menu">
<ul>
<li class="current_page_item"><a href="#">About Us</a></li>
<li class="current_page_item"><a href="#">Graphic Design</a></li>
<li class="current_page_item"><a href="#">Web Design</a></li>
<li class="current_page_item"><a href="#">Marketing Services</a></li>
<li class="current_page_item"><a href="#">Portfolio</a></li>

</ul>
</div>









<div id="pagepricing">
<body onload="init()">

<ul id="tabs">
<li><a href="#BP">Business Products</a></li>
<li><a href="#WP">Wedding Products</a></li>
<li><a href="#website">Website and Hosting Fees</a></li>
<li><a href="#Payment">Payment Policy</a></li>
</ul>
<div class="tabContent" id="BP">
<h2><img src="images/img08.gif" alt="" width="16" height="15" />About JavaScript</h2>
<div>
<table width="700" border="1">
<tr>
<th bgcolor="#000000" class="style7" scope="col"><span class="style11 style20">Quantities</span></th>
<th bgcolor="#000000" scope="col"><span class="style21">100</span></th>
<th bgcolor="#000000" scope="col"><span class="style21">250</span></th>
</tr>

</table>
<br />
</div>
</div>
<div class="tabContent" id="WP">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great.</p>
</div>
</div>
<div class="tabContent" id="website">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content.</p>
</div>
</div>
<div class="tabContent" id="Payment">
<h2>Using tabs</h2>
<div>
<p>PaymentClick a tab to view the tab's content. <a href="/articles/javascript-tabs/">R</a></p>
</div>
</div>
<div id="bodytextpricing"><span class="style3"><br />
Your Satisfaction Is Our Committment! </span><br />
<br />
<span class="style4">Contact us today.</span></div>
<p><a href="/articles/javascript-tabs/">return</a>
</p>
<p align="center" class="style2"><img src="images/proposalpic.jpg" alt="" width="172" height="88" id="Image2" onmouseover="MM_swapImage('Image2','','images/proposalpicb.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="images/signuppic2.jpg" alt="" width="172" height="88" id="Image1" onmouseover="MM_swapImage('Image1','','images/signuppic2b.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="images/testimonialspic.jpg" alt="" width="172" height="88" id="Image3" onmouseover="MM_swapImage('Image3','','images/testimonialspicb.jpg',1)" onmouseout="MM_swapImgRestore()" /><br />
</p>
</div>
<p>

</p>
<div id="footer">
<p class="legal style1">
©2008 - 2010 Jenkins Creative Designs. All Rights Reserved. </p>
<p class="bottomlinks"><a href="index.html">Online Payments</a>  •  <a href="index.html">Site Map</a>   •  <a href="index.html">Contact Us</a></p>
</div>

</body>
</html>

Beverleyh

08-17-2010, 09:48 PM

I can't do much from my phone but I can see that you have 2 html tags, 2 opening head tags and 2 opening body tags in your document. You should only have one of each so clean the page structure up first before tackling anything else.

Just guessing at the CSS now but try setting a width and text-align:center; on ul#tabs and ul#tabs li

jscheuer1

08-18-2010, 05:34 AM

Please let me know what I can do to resolve this. Please let me know if you need anything else.
Thanks for your help.

If simply cleaning up the document doesn't fix it, we will need a link to the page.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

jcdesigns

08-18-2010, 05:22 PM

Hello

The URLs are below. Just to reiterate the javascript tabs content displays ok only showing one at a time in Safari 4 but in IE8 you can see all of the tab content. Also in IE7 the complete tab frame shifts to the right. It also displays all of the content like IE8. Another thing I noticed about Safari and perhaps the other ones to is that when I click on a tab the footer shifts up. Is there a way I can get the footer to stay at the bottom?

Also how can I remove the horizontal scroll at the bottom which can be annoying to vistors?

I included the css code for reference.

If you can correct the code and resend that would great. I truly thank you for your help with this matter and have a great day.

http://www.jenkinscreativedesigns.com/pricingnw.html

http://www.jenkinscreativedesigns.com/csscode.html

jscheuer1

08-18-2010, 08:48 PM

It was really quite a mess (the whole page), probably still is, but at least now it works. I have no idea what you really intended with the styles, they were also very sloppy, so I took my best guess in correcting the errors. I put the fixed up default.css right on the page in its own style block after the commented out link for it, cleaned up a bit of the HTML, getting rid of the excess body tags and trying to combine their meaning. The external script is invalid, referencing the hard drive, as are two of the preload images, these I also commented out.

I'm attaching a working version in a .zip archive:

3490

jcdesigns

08-19-2010, 03:12 AM

John,

Thanks for your help. I realize the code was messy but I could not get it working right. The tabs are working correct now. I just need to figure out how to center the tab content and arrange the header and footer like I originally had it. If you have any suggestions please let me know. Thanks again.

jscheuer1

08-19-2010, 05:59 AM

Get rid of:

.body {
width: 790px;

}

Change this:

#pagepricing {
width: 790px;
margin: 20px 345px; /* 345 controls centering of price tabs */
padding: 0px 0;

}

to:

#pagepricing {
width: 790px;
margin: 20px auto; /* auto controls centering of price tabs */
padding: 0px 0;

}

Get rid of the highlighted:

#footer {
background: url(Images/bottom.jpg) #000 repeat-x;
clear: both;
width: 100%;
padding: 28px;
/*position: fixed;
bottom: 0px;
}
/*margin: 0 auto 0 auto;
padding: 30px 0;

float: none;
}

#footer {background:blue; padding:20px;color:white;}

border-top: 2px solid #2B2B2B;*/
}

Just a few notes on the messiness of the page. I'm not always the neatest coder myself. However, unless you are just learning HTML, there is no real excuse for having more than one each of the DOCTYPE, html, head, or body tags. Likewise, unless you are just learning css, there's no reason to have multiple opening css comment delimiters that lack their closing counterparts.

That is, unless it was (as appears to be the case here) just a simple typo, or oversight due to multiple edits. But in the case of the tags, it is very easy to check. Just do a search on each of the tags. The comment delimiters are a little harder unless your editor has context highlighting. Even so, they can be missed. That's why it's a very good idea to be careful when opening, closing, and/or editing any type of comment.