...

View Full Version : button width stays the same not matter length of text



NeilPeartRocks
12-19-2005, 05:44 PM
Hello All
I have an ASP page written by our code guy here at work and the page call an XML tree when clicking on buttons expanding more choices etc. It's a question /answer type thing. The problem is that the button width stay the same no matter how much text is on the buttons. I have changed the type="" from button to text. When it was button the width expanded expontially withe the text now, type being "text" the button width stays the same. I have tried everything ( padding, margins - you name it) Can anyone give me some help?


<%@ Language="VBScript" %>
<% option explicit %>
<%
'*********************************************************************************************
' LICENSING INTERACTIVE FLOWCHART
'
' Usage: Public, via our website
' Purpose: Allow user to interactively determine what steps they need to take to get their license.
'
' Accesses: LicenseFlowchart.xml
'*********************************************************************************************
Dim oXChart
Dim aNodeTreePath
Dim sTempPath
Dim aNodeHeirarchyPath
Dim nDeepestLevel '(used to set colspans for indentation)
Dim nSelectionID
Dim I, J
Dim sXMLPath
sXMLPath = Server.MapPath("LicenseFlowchart.xml")

If Request.Form("selectedNode_ID") = "" Then
nSelectionID = "1"
Else
nSelectionID = Request.Form("selectedNode_ID")
End If
'Determine what level of the tree we're on based on the ID of the selected node.
' Node ID's hold keys to every parent level they belong to.
If InStr(nSelectionID, ".") > 0 Then
aNodeTreePath = Split(nSelectionID, ".")
Else
'Root Level.
ReDim aNodeTreePath(1)
aNodeTreePath(0) = nSelectionID
End If
'Now build a special array of ID's that are heirarchial.
' For example, if given SelectedID = "1.A.4.C", the heirarchal array would be:
' 1
' 1.A
' 1.A.4
' 1.A.4.C
ReDim aNodeHeirarchyPath(UBound(aNodetreePath)+1)
For I = 0 To UBound(aNodeTreePath)
If aNodeTreePath(J) <> "" Then
sTempPath = ""
For J = 0 To I
sTempPath = sTempPath & aNodeTreePath(J) & "."
Next
'Trim last period.
sTempPath = Left(sTempPath, (Len(sTempPath) - 1))
aNodeHeirarchyPath(I) = sTempPath
End If
Next
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><!-- InstanceBegin template="/Templates/courseTool.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="metadata" -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Course Finder Tool Rockwell Institute</title>
<!-- InstanceEndEditable -->
<!-- #Include file="../../inc/head.inc" -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#style1 {color: #3e615d}
.bttn_sm_y {
background: #3e615d;
font: normal 9pt Arial;
text-align:center;
color:white;

}
.bttn {text-align:center;background-color:#3e615d;font:normal 9pt Verdana,Arial;color:#000000;cursor:hand;}
.bttn_hilite {text-align:center;background-color:#ffffff;font:bold 9pt Verdana,Arial;cursor:hand;}
.q {font:bold 10pt Tahoma,Arial;padding-top:8px;padding-bottom:8px;}
#topnav{
font-size: 84%;
text-align: center;
color: #3e615d;
}
a.topnav:link{
color: #3e615d;
text-decoration: none;
}

a.topnav:visited{

text-decoration: none;
}

a.topnav:hover{

text-decoration: underline;

}
-->
</style>
<script language="JavaScript">
function openNode(sNodeID) {
var f = document.getElementById("chartForm");
f.elements["selectedNode_ID"].value = sNodeID;
f.submit();
}

<% '+++++++++++++++ BUTTON HILIGHTS ++++++++++++++++++++++++++++++
' easier to have javascript hilite the buttons after they're
' rendered to the screen, rather than as they're built.
%>
function hilitePath() {
<% If nSelectionID <> "1" Then %>
var selectionID = "<%=nSelectionID%>";
var aNodeTreePath = selectionID.split(".");
var aNodeHeirarchyPath = new Array();
var tempPath;
var f = document.getElementById("chartForm");
var b;
for (i=0; i<aNodeTreePath.length; i++) {
tempPath = "";
for (j=0; j<=i; j++) {
tempPath += aNodeTreePath[j] + ".";
}
tempPath = tempPath.substr(0, (tempPath.length - 1));
aNodeHeirarchyPath.push(tempPath);
}
for (i=0; i<aNodeHeirarchyPath.length; i++) {
try {
//work in Mozilla and IE.
b = document.getElementById(aNodeHeirarchyPath[i]);
if (!b) {
b = f.elements.item(aNodeHeirarchyPath[i]);
}
b.className = "bttn_hilite";
} catch (exception) {}
}
<% Else %>
return true;
<% End If %>
}
<% '+++++++++++++++ END BUTTON HILIGHTS +++++++++++++++++++++++++++ %>

</script>
<style type="text/css">
<!--
.style1 {font-size: 36px}
-->
</style>
<style type="text/css">
<!--
.style2 {font-size: 36px}
-->
</style>
<!-- InstanceEndEditable -->
<meta name="keywords" content="california washington real estate school classes license pre-license training careers career education exam agent brokers online satellite newsfeed newsletter rockwell course textbooks">
<script type="text/javascript">self.name = "parentSection"</script>
<script type="text/javascript" src="../../js/PopoffWindow.js"></script>
<script type="text/javascript" src="../../js/GetBrowserOSVersion.js"></script>
<script type="text/javascript" src="../../js/CanSetCookies.js"></script>
<script type="text/javascript" src="../../js/OpenWin.js"></script>
<base target="_top">

<link rel="shortcut icon" href="favicon.ico" >
<link href="../../css/st_default.css" rel="stylesheet" type="text/css">
</head>

<body>
<a name="topofpage"></a>
<table width="770" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="5" valign="top">

<!-- #Include file="../../inc/headerChild.inc" --></td>
</tr>
<tr>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="140" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="1" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="599" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="1" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="1" height="1"></td>
</tr>
<tr>

<td align="left" valign="top">
<!--#Include file="../../inc/leftNavChild.inc" -->

</td>
<td valign="top" class="clrspacerbk"><img src="../../images/clrspacer.gif" width="1" height="800"></td>
<td align="left" valign="top">
<!-- InstanceBeginEditable name="mainBody" -->
<table width="600" border="0" cellspacing="0" cellpadding="6">
<tr>
<td height="212" align="left" valign="top" scope="col"><h2 id="style1">Course Finder Tool</h2>
<FONT class="body">Use our <strong>Course Finder</strong> tool to determine which real estate course best meets your needs.&nbsp; Whether you&rsquo;re located in <st1:State w:st="on">Washington</st1:State> or <st1:place w:st="on"><st1:State w:st="on">California</st1:State></st1:place>, Rockwell has the right real estate course for you. <br><br>All you have to do is make a few simple choices, and our Course Finder will take you to the course you need. Click on the green buttons below to get started.&nbsp;</FONT>
<form id="chartForm" action="courseToolTest.asp" method="POST">
<input type="hidden" name="selectedNode_ID" value="1">
<%
Set oXChart = Server.CreateObject("Microsoft.XMLDOM")
With oXChart
.Async = False
.Load(sXMLPath)
End With
%>
<table border=0 cellpadding=0 cellspacing=0>
<%
'Set deepest level (that's not empty)
For I = 0 To UBound(aNodeHeirarchyPath)
If aNodeHeirarchyPath(I) <> "" Then
nDeepestLevel = I
End If
Next
'correct for level 0
nDeepestLevel = nDeepestLevel + 1

'Build each branch of the tree, down to the item that was selected.
For I = 0 To UBound(aNodeHeirarchyPath)
If aNodeHeirarchyPath(I) <> "" Then
Call BuildTreeBranch (aNodeHeirarchyPath(I), I, nDeepestLevel - I)
End If
Next
%>
</table>
</form>
</td>
</tr>
<tr>
<td height="339" align="left" valign="top" class="body" scope="col">We hope you find the Course Finder helpful. If you need further assistance in selecting a real estate course, feel free to contact us at 1 800 221- 9347 or email us at <a href="mailto:info@rockwellinstitute.com" id="nav3">info@rockwellinstitute.com</a>.</td>
</tr>
</table>

<!-- InstanceEndEditable -->



</td>
<td valign="top" class="clrspacerbk"><img src="../../images/clrspacer.gif" width="1" height="800"></td>
</tr>
<tr>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="140" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="1" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="599" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="1" height="1"></td>
<td class="clrspacerbk"><img src="../../images/site/clrspacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td colspan="5"><!--#Include file="../../inc/footerChild.inc" --></td>
</tr>
</table>
<p>&nbsp;</p>
</body>
<!-- InstanceEnd --></html>
<%
Set oXChart = Nothing

Sub BuildTreeBranch (ByVal sNodeID, ByVal nIndentation, ByVal nColSpan)
'Response.Write(sNodeID & ":" & nSelectionID & "<br>")
Dim oRoot, oAnswers
Dim K,L
Dim tempID
Set oRoot = oXChart.documentElement.SelectSingleNode("//Q[@ID='" & sNodeID & "']")
Response.Write("<tr>")
'create indentation cells
For L = 1 To nIndentation
Response.Write("<td>&nbsp; </td>")
Next
%>
<td class="q" colspan="<%=nColSpan%>">
<% If oRoot.GetAttribute("TEXT") = "LINK" Then
Response.Write(oRoot.SelectSingleNode("LINKBODY").Text)
Else
Response.Write(oRoot.GetAttribute("TEXT"))
End If
%>
</td></tr>
<% If oRoot.selectNodes("Q").Length > 0 Then
Set oAnswers = oRoot.selectNodes("Q")
Response.Write("<tr>")
'create indentation cells
For L = 1 To nIndentation
Response.Write("<td></td>")
Next
%> <td colspan="<%=nColSpan%>">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img src="../../images/Tree_StepIn.gif" width="16" height="16"></td>
<% 'Loop through all answers except last one. Last loop should not have image after.
For K = 0 To oAnswers.Length - 2
tempID = oAnswers(K).getAttribute("ID") %>
<td><input id="<%=tempID%>" type="text" class="bttn_sm_y" value="<%=oAnswers(K).getAttribute("ANS")%>" onclick="openNode('<%=tempID%>')"></td>
<td><img src="../../images/Tree_StepOv.gif" width="16" height="16"></td>
<% Next
tempID = oAnswers(K).getAttribute("ID") %>
<td><input id="<%=tempID%>" type="text" class="bttn_sm_y" value="<%=oAnswers(K).getAttribute("ANS")%>" onclick="openNode('<%=tempID%>')"></td>
</tr>
</table>
</td>
</tr>
<% End If
End Sub
%>


Thanks
Rob

miranda
12-19-2005, 06:25 PM
input type=text is for form input. How are you trying to use these as buttons? If you want to write text and don't want to use a button, why not use a label instead?

NeilPeartRocks
12-19-2005, 06:34 PM
Oh wow that's working a little better - How do I use the label? type="label" - it's giving me a warning that IE .5.5 and 6, netscape doent support it. I wish this site was live to show you how I am using this. Its a basci question answer thing. Click on WA and it branches down to another lever of questions and to yet another.

miranda
12-19-2005, 07:06 PM
<label>your text here</label>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum