JavaScript - Website To Work In Ie And Firefox Only

Hi there. Time ago I did come across a rather old but small js library called JQPopUp. it was ideal for a project I am working on (popping out windows with images AND with possibility of CSS styling). I am more skilled at CSS than Javascript and I ignore how to modify it so it works in Firefox. I know that it requires getElementById instead of id's but I don't know how to modify the event.clientX and event.clientY events.

Is there anybody there who can lend a hand? The script is below.

Thanks a lot...

Figaroal

PS: also tried to contact author and website... both gone.

Code:

/*************************************************************
* Program   : JQPopUp.js                                     *
* Purpose   : Genereert diverse Popup schermpjes.            *
* Author    : Ron Bausch                                     *
* Version 1 : 9 mei 2003                                     *
* Copyright : Ron Bausch                                     *
* Website   : www.justquick.com                              *
* Email     : ron.bausch@wanadoo.nl                          *
**************************************************************/
var bStay=false;
var aHelp;
var aFields;
var iWidth;
var sWidth;
var sOption;
var sHtml;
var i,iX,iY,iClX,iClY;
var JQPrompt="";

function JQPopUp(sHelptext) 
{ aHelp=sHelptext.split("|");
  sWidth="";
  iWidth=aHelp[0].length;
  if      (iWidth > 30 && iWidth <= 150) sWidth='width="250"';
  else if (iWidth > 150) sWidth='width="375"';
  if (!bStay)
  { if (aHelp.length==1) 
      idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0"><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
    else if (aHelp.length==2) 
      idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" align="center" cellpadding="0" cellspacing="0"><tr><td>'+aHelp[1]+'</td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
    else if (aHelp.length==3)
    { bStay=true;
      idHelp.innerHTML=
      '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
      '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
      '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
      '</td></tr></table>';
    }
    else if (aHelp.length==4)
    { bStay=true;
      sOption=aHelp[2].replace(/ /g,"");
      if (sOption.toUpperCase()=="CONFIRM")
      { idHelp.innerHTML=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
       '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="'+aHelp[3]+' idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
       '<button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
       '</td></tr></table>'; 
      }
      else if (sOption.toUpperCase()=="PROMPT")
      { sHtml=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr><tr><td>'+
       '<form name="frmJQ">';
       aFields=aHelp[3].split(",");
       for (i=0; i<aFields.length; i++)
       {  sHtml+=
         '<b>'+aFields[i]+'</b><br>\r<input type="text" name="txt'+aFields[i].replace(/ /g,"")+'" size="30"><br>\r';
       }
       sHtml+=
       '</tr></td><tr><td class="JQColorBody" align="center"><button name="cmdOK" class="JQColorTable" onClick="JQPrompt=document.forms.frmJQ; idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
       '<button name="cmdCancel" class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
       '</form></td></tr></table>';
       idHelp.innerHTML=sHtml;
      }
      else
      { idHelp.innerHTML=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
       '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
       '</td></tr></table>';
      }
    }

    iClX=event.clientX+10;
    iClY=event.clientY;
    iX = document.body.clientWidth  - iClX;
    iY = document.body.clientHeight - iClY;

    if ( iX < idHelp.offsetWidth)
      idHelp.style.left = document.body.scrollLeft + iClX - idHelp.offsetWidth;
    else
      idHelp.style.left = document.body.scrollLeft + iClX;

    if (iY < idHelp.offsetHeight)
      idHelp.style.top = document.body.scrollTop + iClY - idHelp.offsetHeight;
    else
      idHelp.style.top = document.body.scrollTop + iClY;
     
    idHelp.style.visibility="visible"; 
    idHelp.style.position="absolute"; 
  }
}

function JQPopOut() 
{ if (!bStay) idHelp.style.visibility="hidden"; 
}

document.write('<span style="visibility:hidden;" id="idHelp"> </span>');

// EOF

function hasTagsInText(text)
{

if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0)
return 'table';


///this line of code doesnt work in firefox

How would I go about having this work for Firefox. Is there away to have JQuery work with it?

Code:

<script type="text/javascript">
region=[//2 dimensional array containing area codes and region pairs
["201","nj"],
["202","dc"],
]


function getRegion(code){
	index=0;
	while(true){
		console.log(index);
		if(region[index][0]==code){
			return(region[index][1]);
		}
		index++;
		if(index>=region.length){
			return(undefined);
		}
	}
}

function getLocation(number){
	out=document.getElementById('output');
	var answer;
	if(number.length<3){
		return(void(0));
	}
	else{
		var code=number.substring(0,3);
		answer=getRegion(code)
		if(answer==undefined){
			out.innerText="unknown area code";
		}
		else{
			out.innerText=answer;
		}
	}
}
</script>
...
<form>
	<input type="text" id="number" onkeyup="getLocation(this.value)">
</form>
<div id="output">
</div>

I'm a real novice and out of my depth with this, i hope someone can help.

I have a small script that searches a single page for a keyword, it works fine with IE, but will not work with Firefox.

Below is the code thats checks which browser is running and the action to take.

Code:
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert("Not found.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

Can anyone help me out with this problem.

Many thanks
Jasper

i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this?
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 runat="server">
<title></title>
<script type="text/javascript">
function fnCheckScroll() {
document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px";
}
function fnSetHeight() {
oID_1.style.height = oID_1.scrollHeight;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>scrollHeight Property Sample</h1>
<p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve
the height of the viewable content.</p>
<div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left">
The <b>scrollHeight</b> property is read-only, allowing you to obtain the
actual height of the scrollable content. Even though the height of this
<b>div</b> is 200 pixels, the height inside the scrolling text box might
be less, since the wrapped text may not use the entire area within the object.
The <b>scrollHeight</b> dimension may be useful for a variety of reasons;
for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b>
to conserve horizontal space while respecting the set width as a maximum.
</div>

<p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight
</button></p>
<p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight
</button></p>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>

</div>
</form>
</body>
</html>

I'm new to client side js, so I'm trying to figure out the relationship between the js frames object and the <frame></frame> tags. I have read and reread the information in my book on this subject and googled many examples, but still need clarification.

if I have the following code in the body of an HTML document.
Code:

<frame name="f1">
</frame>

<<frame name="f2">
</frame>

Then I should get back 2 when I do this
Code:

alert(document.frames.length);

Instead I get document.frames is undefined from Foxfire and get 0 from ie8. If I replace document with top, window, self or parent I get 0 in both Foxfire and ie8.

I'm confused,
J.

i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function fnCheckScroll() {
document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px";
}
function fnSetHeight() {
oID_1.style.height = oID_1.scrollHeight;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>scrollHeight Property Sample</h1>
<p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve
the height of the viewable content.</p>
<div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left">
The <b>scrollHeight</b> property is read-only, allowing you to obtain the
actual height of the scrollable content. Even though the height of this
<b>div</b> is 200 pixels, the height inside the scrolling text box might
be less, since the wrapped text may not use the entire area within the object.
The <b>scrollHeight</b> dimension may be useful for a variety of reasons;
for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b>
to conserve horizontal space while respecting the set width as a maximum.
</div>

<p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight
</button></p>
<p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight
</button></p>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>

</div>
</form>
</body>
</html>

Hi Coders,

I have a Javascript on my credit card page which populates the elements of a dropdown field (The Year field).
It just works with Internet Explorer and not Firefox.

Here is the script:

<script type="text/javascript">
<%
Dim orderDateYearx
orderDateYearx = cStr(Year(Date))
%>

yy="<%=orderDateYearx%>";
yyyy=parseInt(yy);
yyyy=yyyy

var listDocUpload = document.getElementById("expDate2");
var optn = document.createElement("OPTION");
optn.value = yyyy;
yyyy=yyyy+""
optn.text = yyyy.replace("20","");
listDocUpload.options.add(optn);

yyyy=parseInt(yyyy)+1
var optn2 = document.createElement("OPTION");
optn2.value = yyyy;
yyyy=yyyy+""
optn2.text = yyyy.replace("20","");
listDocUpload.options.add(optn2);

yyyy=parseInt(yyyy)+1
var optn3 = document.createElement("OPTION");
optn3.value = yyyy;
yyyy=yyyy+""
optn3.text = yyyy.replace("20","");
listDocUpload.options.add(optn3);
</script>

The dropdown field in Firefox is just blank. I mean no elements reside within it. (but its clickable)

Any ideas why this dropdown field in Firefox is not going to be populated?
Thank you for all the comments.

Right now, it only works with IE. This goes in the header...

Quote:
<script language="JavaScript1.2">

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}

</script>
and this goes in the image:

Quote:
<img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE">
It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE.

Thanks for the help!

Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted.

[code]
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>603 products page</title>
<link rel="stylesheet" type="text/css" href="css/603.css" />

<script type="text/javascript">
<!-- <![CDATA[
function changeImage(filename)
{
mainimage.src = filename;
}
// ]]> -->
</script>

</head>

<body>
<div id="frame">
<div id="logoheader">
</div>
<div id="navigation">
<table align="center" cellpadding="0" cellspacing="0"border="0">
<tr>
<th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th>

<th><img src="images/buttons/productsup.png" border="0" alt="products"/></th>
<th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th>
<!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>-->
<th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th>
</tr>
</table>
<!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>-->
</div>
<div id="contentproducts">

<div id="tablediv">
<table align="center" cellpadding="0" border="0">
<tr>
<th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th>

<th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th>
<th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th>
</tr>
</table>
<!--START-->
<div id="largeimage">
<img name="mainimage" src="images/blank.jpg" alt="main image"/>
</div>

<!--END-->

</div>
</div>
<div id="footer">
<img src="images/copyright.png" border="0" alt="footer logo"/>
</div>
</div>

</body>

</html>
[code]

Hi all, firstly i'm not a coder but i am capable of doing as instructed. I have some script that when used in conjunction with a button highlights all the text between 2 tags to make it easier for copying, it works great in IE but doesn't work in firefox, could someone help please?
Here's the script and the button is below. Code:

<script type="text/javascript">

function selectCode(a)
{
   // Get ID of code block
   var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

   // Not IE
   if (window.getSelection)
   {
      var s = window.getSelection();
      // Safari
      if (s.setBaseAndExtent)
      {
         s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      // Firefox and Opera
      else
      {
         var r = document.createRange();
         r.selectNodeContents(e);
         s.removeAllRanges();
         s.addRange(r);
      }
   }
   // Some older browsers
   else if (document.getSelection)
   {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
   }
   // IE
   else if (document.selection)
   {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
   }
}
</script>

Html button Code:

<input type="button" value="Highlight Code" onclick="selectCode(this); return false;">

Hello to all,

I think that you will frequently read this boring sentence: "Javascript does not work with Firefox".
Below a very very simple html with Javascript. Using MS IE v8 I have found that the code works very well. Filling nothings in the textfield "your name" and subsequently clicking on the button and a window will popup with the text "Sorry, you forget to: blah-blah ..."
However, using Firefox instead...it does not work. A bit remarkable; the Javascript is very easy!
Could you please check what went wrong?
I have activated Javascript in the Firefox browser and the security is ok for Javascript.

I hope that someone can provide me a useful hint.

Best regards,

Cornelis
The Netherlands - Gouda (yes, the town where cheese is inherently linked)


[CODE]

<html>

<head>

<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">



<title>Inloggen van een nieuw lid</title>

<script language = "Javascript">


function checkDate() {

var message = "Sorry, you forget to: \n";
var voornaam = document.getElementById("voornaam");
var result = true;


if (voornaam.value.length == 0) {

message+="- You have not typed your name\n";
result = false;}

if(!result) {alert(message)};
return result;



}

</script>

</head>

<body>
<FORM METHOD="post" name=CheckDate onsubmit="return checkDate(this);" >
<div style="position: absolute; width: 603px; height: 378px; z-index: 1; left: 30px; top: 13px" id="laag1">
<p align="center"><font face="Trebuchet MS" color="#00750F" size="5"><b>
Test</b></font></p>
<table border="0" width="100%" bgcolor="#C4FFC4" style="border-collapse: collapse" id="table3">
<tr>
<td>

</td>
</tr>
</table>
<p align="left">&nbsp;</p>
<table border="0" width="69%" id="table1" height="210" style="border-collapse: collapse">
<tr>
<td width="37%"><font face="Trebuchet MS">your name</font></td>
<td width="59%">
<p align="center"><input type="text" name="voornaam" size="25"></td>
</tr>

<tr>
<td colspan="2" height="90">
<p align="center">
<input type="submit" value="Register me" name="Registreren">
</td>
</tr>
</table>
<p>&nbsp;</p>

</div>

</body>
</form>

</html>

hi -- someone wrote a script for me to simulate an image map on a background header in wordpress. it works great in chrome and ie, but not firefox. can someone pls. help? thx.

<code>
<script type="text/javascript">
function geturl() {
myMouseX=event.clientX
if(myMouseX < 400) {
return "http://www.alexandrazissu.com/az-blog/books/";
}
else {
return "http://www.alexandrazissu.com/az-blog/";
}
}
</script>
</code>

and then the call:

<code>
<div id="header-image" onclick="location.href = geturl();" style="cursor: pointer;">
</code>

I'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building.

Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2

It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why?

Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow.

I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier:

In the head of my php document:

[CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE]

In the sidebar of my php document:

[CODE] <div class="sidebar">
<div class="tabber">
<div class="tabbertab">
<h2>Welcome</h2>
<img src="images/Welcome.png" alt="" />
<div id="Connect">
<div id="Connect-01">
<img src="images/Connect_01.png" width="315" height="48" alt="" />
</div>
<div id="Connect-02">
<img src="images/Connect_02.png" width="27" height="87" alt="" />
</div>
<div id="Facebook">
<img src="images/Facebook.png" width="76" height="82" alt="" />
</div>
<div id="Connect-04">
<img src="images/Connect_04.png" width="21" height="87" alt="" />
</div>
<div id="Newsletter">
<img src="images/Newsletter.png" width="77" height="82" alt="" />
</div>
<div id="Connect-06">
<img src="images/Connect_06.png" width="21" height="87" alt="" />
</div>
<div id="Twiiter">
<img src="images/Twiiter.png" width="75" height="82" alt="" />
</div>
<div id="Connect-08">
<img src="images/Connect_08.png" width="18" height="87" alt="" />
</div>
<div id="Connect-09">
<img src="images/Connect_09.png" width="76" height="5" alt="" />
</div>
<div id="Connect-10">
<img src="images/Connect_10.png" width="77" height="5" alt="" />
</div>
<div id="Connect-11">
<img src="images/Connect_11.png" width="75" height="5" alt="" />
</div>
</div>

</div>


<div class="tabbertab">
<h2>Features</h2>
<p>Tab 2 content.</p>
</div>


<div class="tabbertab">
<h2>Categories</h2>
<p>Tab 3 content.</p>
</div>

<div class="tabbertab">
<h2>Search</h2>
<p>Tab 4 content.</p>
</div>


</div>
</div>[CODE]

From my CSS stylesheet:

[CODE].sidebar{
position: relative;
top:0px;
padding-top:20px;
padding-right:10px;
padding-left:10px;
padding-bottom:0px;
float:right;
width:350px;
}

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
background:#ffffff;
}

.sidebar ul li{
padding: 10px 0 10px 0;
background:#ffffff;
}

.sidebar ul li h2{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #2d0a0b;
border-top: 1px solid #2d0a0b;
border-bottom: 1px solid #2d0a0b;
padding: 5px 0px 5px 0px;
background:#ffffff;
}

.sidebar ul ul li{
padding: 0;
background:#ffffff;
}


/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}

/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
margin-top:1em;
}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 0px solid #778;
font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 0px;
margin-right: 3px;
border: 1px solid white;
background: white;
text-decoration: none;
}

ul.tabbernav li a:link { color: #2d0a0b; }
ul.tabbernav li a:visited { color: #2d0a0b; }

ul.tabbernav li a:hover
{
color: #2d0a0b;
text-decoration:underline;
background: white;
border-color: white;
}

ul.tabbernav li.tabberactive a
{
color: #fbb1c0;
background-color: #2d0a0b;
border: 1px solid #2d0a0b;
}

ul.tabbernav li.tabberactive a:hover
{
color: #fbb1c0;
text-decoration:underline;
background: #2d0a0b;
border-bottom: 1px solid white;
}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:10px solid #2d0a0b;

/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

height:285px;

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

overflow:auto;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

#Connect {
position:absolute;
left:30px;
top:200px;
width:315px;
height:135px;
}

#Connect-01 {
position:absolute;
left:0px;
top:0px;
width:315px;
height:48px;
}

#Connect-02 {
position:absolute;
left:0px;
top:48px;
width:27px;
height:87px;
}

#Facebook {
position:absolute;
left:27px;
top:48px;
width:76px;
height:82px;
}

#Connect-04 {
position:absolute;
left:103px;
top:48px;
width:21px;
height:87px;
}

#Newsletter {
position:absolute;
left:124px;
top:48px;
width:77px;
height:82px;
}

#Connect-06 {
position:absolute;
left:201px;
top:48px;
width:21px;
height:87px;
}

#Twiiter {
position:absolute;
left:222px;
top:48px;
width:75px;
height:82px;
}

#Connect-08 {
position:absolute;
left:297px;
top:48px;
width:18px;
height:87px;
}

#Connect-09 {
position:absolute;
left:27px;
top:130px;
width:76px;
height:5px;
}

#Connect-10 {
position:absolute;
left:124px;
top:130px;
width:77px;
height:5px;
}

#Connect-11 {
position:absolute;
left:222px;
top:130px;
width:75px;
height:5px;
}[CODE]

I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help.