ASP and some Ajax Tabs....

[khopek]

I hired someone to create a set of tabs for the website I am working on. Unfortunately it seems he has left me hanging with half finished tabs.:bawling:

I'm not familiar with ASP or Ajax [more of a CSS/XHTML gal myself] and desperately need some help figuring out a little bug.

If you go HERE (http://www.latus-harley-davidson.com/TEST/index.asp) in IE, you will notice a rendering issue with the tab images.

CSS for Tabs


<% @ language="vbscript" %>
<% Option Explicit %>
<% Response.ContentType = "text/css" %>
<%
'PROJ: ajax_tabs
'FILE: ajax_tabs.asp
'VERS: 0.0.1
'DATE: 7-20-2009
'INFO: For addressing bugs/quirks/issues in browsers.. ::cough:: internet explorer ::cough::
%>
<%
DIM temp_value
DIM ua
DIM is_ie
DIM old_ie
ua = lcase(Request.ServerVariables("HTTP_USER_AGENT"))
IF instr(ua,"msie") THEN
is_ie = TRUE
IF instr(ua,"msie 4")>0 OR instr(ua,"msie 5")>0 THEN
old_ie = TRUE
ELSE
old_ie = FALSE
END IF
END IF
'ie bug fixes
'#1 - 'Peek-a-Boo' bug
Dim ie_bug_peekaboo
IF is_ie THEN
IF NOT old_ie THEN
'For ie6 & ie7.
ie_bug_peekaboo = "zoom: 1;"
ELSE
'For <=ie5
ie_bug_peekaboo = "height: 1%;"
END IF
END IF

'#2 - Position bug
Dim ie_bug_position
ie_bug_position = 10
%>
/*
Stylesheet for ajax_tabs.. duh.
*/
.tabs{
height: 30px !important;
margin: 0 20px;
padding: 0;
line-height: 30px;
text-align: right;
/*list-style: none; /* remove bullets and li indents*/
text-align: center;
z-index: 100;
white-space: no-wrap;
}
#catTabsContainer {
height: 400px;
width: 610px !important;
padding: 5px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
z-index: 2;
}
.containerTop {
width:620px;
height: 16px;
border-top: 3px solid #97c2ed;
background-image:url('../images/ajax_tabs/container_top.png');
background-repeat: repeat-x;
background-position: top left;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.containerBottom {
width:620px;
height: 16px;
background-image:url('../images/ajax_tabs/container_bottom.png');
background-repeat: repeat-x;
background-position: bottom left;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.ajax_tab_image_left{
width:14px !important;
background-image:url('../images/ajax_tabs/ajax_tab_left.png');
background-position: top right;
background-repeat:no-repeat;
background-color:transparent;
}
.ajax_tab_image_right{
width:14px !important;
background-image:url('../images/ajax_tabs/ajax_tab_right.png');
background-position: top middle;
background-repeat:no-repeat;
background-color:transparent;
}
.ajax_tab_image_mid{
background-image:url('../images/ajax_tabs/ajax_tab_mid.png');
background-position: top left;
background-repeat:repeat-x;
background-color:transparent;
}
.ajax_tab_DIV{
<%
IF is_ie THEN
response.write("position:relative;")
response.write("top:1px;")
END IF
%>
height:30px;
overflow:hidden;
background-color:transparent;
}
.ajax_tab_TABLE{
width:100%;
height:30px;
border: none;
padding: 0px;
background-color: transparent;
}
.ajax_tab_link_DIV{
position:relative;
<%
'the ajax_tab links don't show in ie due to a bug. this addresses that bug (peek-a-boo) and will need
'to be updated from time to time as browsers update and bring with them new bugs.
temp_value = 30 'value of pixels from the bottom.
IF NOT is_ie THEN
response.write("bottom:" & temp_value & "px;")
ELSE
response.write("bottom:" & (temp_value-ie_bug_position) & "px;")
response.write(ie_bug_peekaboo)
END IF
%>
}
.ajax_tab{
float: left;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
color: #999999;
background-color:transparent;
}
.ajax_tab_selected{
float: left;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color:transparent;
}
.ajax_tab_back{
<%
IF is_ie THEN
response.write(ie_bug_peekaboo)
END IF
%>
background-color:transparent;
}
.ajax_tab_txt_hover{
float: left;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
color: #666666;
}
.ajax_tab_txt{
float: left;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
color: #999999;
}
.ajax_tab_loading_txt{
font-size: 12px;
font-weight: bold;
color: #999999;

}



Tabs Page


<div id='navCatContainer' style='position:relative;top:50px;'>
<%
'START ajax_tabs tab container
%>
<div id="catTabs" class="tabs" style></div>
<%
'END ajax_tabs tab container
%>

<div class="containerTop"></div>


<%
'START ajax_tabs request display container
%>
<div id="catTabsContainer"></div>
<%
'END ajax_tabs request display container
%>
</div>
<%
'START ajax_tabs javascript initiation
%>
<script language="javascript" type="text/javascript">
//current index
var ajax_tabs_current = 0;
//id of tab container
var ajax_tabs_container = "catTabs";
//the array containg the tabs to be placed [Text, Page]
var my_ajax_tabs = [ ["Harley Parts", "tpl_harley.asp"], ["Buell Parts", "tpl_buell.asp"], ["Kuryakyn Parts", "tpl_kuryakyn.asp"], ["Clothing &amp; Accessories", "tpl_clothing.asp"] ];
//directory of the pages ajax tabs will be requesting
var ajax_page_dir = "includes/pages/";
//id of where you want ajax pages displayed
var ajax_page_display_div = "catTabsContainer";
//what to display while requesting pages
var ajax_page_display_loading = "<img src='images/ajax_tabs/loading.gif'><br /><span class='ajax_tab_loading_txt'>loading page content</span>";
//what to display if page comes back empty
var ajax_page_display_loading_error = "error retrieving data";
//opacity when tab is selected from 1 to 10
var ajax_tabs_opacity_selected = 10;
//opacity when tab is not selected from 1 to 10
var ajax_tabs_opacity_not = 5;
//the variable that will contain html to dynamically append to tabs container
var ajax_tabs_HTML = "";
//object for cell that will contains this appending of html
var ajax_tab_node = null;
geID(ajax_tabs_container,d).innerHTML = "<table cellspacing='0'><tbody><tr id='ajax_table_TABLE_TR'>";
//this spits it all out and intitiates the tabs
for (var i = 0;i < my_ajax_tabs.length;i++){
if (ajax_tabs_current == i){
ajax_tab_selected = "_selected";
ajax_tab_select = true;
ajax_tab_opacity = ajax_tabs_opacity_selected;
}else{
ajax_tab_selected = "";
ajax_tab_select = false;
ajax_tab_opacity = ajax_tabs_opacity_not;
}
ajax_tabs_HTML = "<div onmouseout='ajax_tab_objects[" + i + "].leave()' onmouseover='ajax_tab_objects[" + i + "].hover()' onclick='ajax_tab_objects[" + i + "].click()' id='ajax_tab_DIV-" + i + "' class='ajax_tab_DIV'> <div id='ajax_tab_back-" + i + "' style='opacity:" + (ajax_tab_opacity/10) + ";filter:alpha(opacity=\""+(ajax_tab_opacity*10)+"\");' class='ajax_tab_back'><table id='ajax_tab_TABLE-" + i + "' class='ajax_tab_TABLE' cellspacing='0'><tr><td class='ajax_tab_image_left'></td><td class='ajax_tab_image_mid'></td><td class='ajax_tab_image_right'></td></tr></table></div> <div id='ajax_tab_link_DIV-" + i + "' class='ajax_tab_link_DIV'><div style='zoom: 1;'id='ajax_tab_txt-"+i+"' class='ajax_tab" + ajax_tab_selected + "'>" + my_ajax_tabs[i][0] + "</div></div> </div>";
ajax_tab_node = geID('ajax_table_TABLE_TR',d).insertCell(i);
ajax_tab_node.innerHTML = ajax_tabs_HTML;
ajax_tab_objects[i] = new ajax_tab(i, "ajax_tab_DIV-"+i,"catTabsContainer", ajax_tab_select);
}
//calls the page specified by the current index
ajax_tab.page_get(ajax_tab_objects[ajax_tabs_current].url);
</script>



I also have a JS file if someone needs to see that.
Thank you in advance for your help!!!