...

View Full Version : Cross browser scripting.



ILoserMan
08-20-2005, 05:43 PM
Hi all,


I am working on a registration type portion to a site, in which I have a table, a field name, then an input. I decided to add a "Whats This" next a field.

In an attempt to bybass zealous popup blockers, I added a <div> tag, make some java script, all was good. Untill it blew up. Here is an example of the site [ This is just a static HTML rendering of it, since the page is dynamic. ]

Registration Page (http://www.niytrus.com/beta/help.html)


Here are the codes I am using:


/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function display(eid,action,display)
{
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

if ( isDOM )
{
if (action=='s') document.getElementById(eid).style.display=display;
if (action=='h') document.getElementById(eid).style.display=display;
}
else if ( isIE )
{
if (action=='s') eval("document.all."+eid+".style.display="+display+";");
if (action=='h') eval("document.all."+eid+".style.display=display;");
}
else if( isNS4 )
{
if (action=='s') eval("document.layers['"+eid+"'].display="+display+";");
if (action=='h') eval("document.layers['"+eid+"'].display=display;");
}
}


dl {
margin:0 0 0 1em;
padding: 0 0;
position:relative;
}
dl dt, dl dd {
position:static;
margin:0;
}
dl dt {
padding:0;
font-weight:bold;
}
dl dd {
padding:.15em .15em 0 .15em;
text-indent:7ex;
position:relative;
}

fieldset legend {
font-weight:bold;
color:#000; /* IE on XP uses theme colour, and won't accept inherit */
position:relative;
}


label, label input, legend, legend input, legend img, dl.simple dt img, dl.simple dd img
{
vertical-align:middle;
}

dl.simple
{
list-style:none;
margin:0 0 0 0;
padding:0;
}
.simple dl.simple
{
margin:0 0 0 1em;
}
dl.simple dt
{
display:block;
margin:0;
padding:0;
text-indent:0;
vertical-align:middle;
position:relative;
}
dl.simple dt
{
float:left;
clear:left;
font-weight:bold;
line-height:1.5em;
position:relative; /* vanishes in IE without it */
padding-right:1ex;
}
dl.simple dt
{
float:none;
clear:none;
}

.column2 {
float:none;
display:none;
width:265px;
position:relative;
//right:100px;
//width: 50%
align: left;
//padding-right:10ex;
valign: top;
padding: 15px 265px 10px 0px;
//padding: 15px 0px 0px 400px;
}

and the HTML:


<table border="0">
<form action="manage.php" method="post">
<tr>
<td colspan="3"><b>Registration Information</b></td>
</td>
</tr>
<tr>
<td align="left" valign="middle">Name:</td>
<td align="left" valign="middle"><input type="text" name="name" value="{new_artist.NAME}" class="forminput"></td>
<td></td>
</tr>
<tr>
<td align="left" valign="middle">Genre:</td>
<td align="left" valign="middle">{new_artist.GENRE}</td>
<td></td>
</tr>
<tr>
<td align="left" valign="middle">Account Type:</td>
<td align="left" valign="middle">{new_artist.ACCOUNT}<input type="hidden" name="new" value="true"></td>
<td align="left" valign="middle"><a href="#" onclick="display('helpbox', 's', 'inline');display('question', 'h', 'none');" id="question"><b style="font-weight:bold; color:#adc562;" onMouseOver="this.innerHTML = '&nbsp;&nbsp;Whats this?'" onMouseOut="this.innerHTML = '&nbsp;&nbsp;?'" onclick="this.innerHTML = '&nbsp;&nbsp;?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">&nbsp;&nbsp;?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></td>
</tr>
<div class="column2" id="helpbox">
<!--<div style="float:left;align:left;display:block;" -->
<fieldset>
<legend>&nbsp;<b>Help Box</b></legend>
<div id="a_free"><a href="#" onclick="display('free', 's', 'inline');display('tiny', 'h', 'none');display('medium', 'h', 'none');display('giant', 'h', 'none');display('a_free', 'h', 'none');display('a_tiny', 's', 'block');display('a_medium', 's', 'block');display('a_giant', 's', 'block');">Free Account</a></div>
<div id="free" style="display:none;" onclick="display('free', 'h', 'none');display('a_free', 's', 'block');">
<dl class="simple">
<dt>Free Account - Free!</dt>
<dd>Free account.</dd>
</dl>
</div>
<div id="a_tiny"><a href="#" onclick="display('free', 'h', 'none');display('tiny', 's', 'inline');display('medium', 'h', 'none');display('giant', 'h', 'none');display('a_tiny', 'h', 'none');display('a_free', 's', 'block');display('a_medium', 's', 'block');display('a_giant', 's', 'block');">Tiny Account</a></div>
<div id="tiny" style="display:none;" onclick="display('tiny', 'h', 'none');display('a_tiny', 's', 'block');">
<dl class="simple">
<dt>Tiny Account</dt>
<dd>Little bigger</dd>
</dl>
</div>
<div id="a_medium"><a href="#" onclick="display('free', 'h', 'none');display('tiny', 'h', 'none');display('medium', 's', 'inline');display('giant', 'h', 'none');display('a_medium', 'h', 'none');display('a_free', 's', 'block');display('a_tiny', 's', 'block');display('a_giant', 's', 'block');">Medium Account</a></div>
<div id="medium" style="display:none;" onclick="display('medium', 'h', 'none');display('a_medium', 's', 'block');">
<dl class="simple">
<dt>Medium Account</dt>
<dd>A bit more bigger then the previous.</dd>
</dl>
</div>
<div id="a_giant"><a href="#" onclick="display('free', 'h', 'none');display('tiny', 'h', 'none');display('medium', 'h', 'none');display('giant', 's', 'inline');display('a_free', 's', 'block');display('a_tiny', 's', 'block');display('a_medium', 's', 'block');display('a_giant', 'h', 'none');">Giant Account</a></div>
<div id="giant" style="display:none;" onclick="display('giant', 'h', 'none');display('a_giant', 's', 'block');">
<dl class="simple">
<dt>Giant Account</dt>
<dd>This guy is huge.</dd>
</dl>
</div>
<div align="right" style="text-align:right;align:right;"><span style="text-align: right; align: right;"><a href="#" onclick="display('helpbox', 'h', 'none');display('question', 's', 'inline');">[ <b>Close</b> ]</span></div>
</fieldset>
</div>
<!--</div> -->
<tr>
<td></td>
<td align="right" style="padding-top: 10px;"><input type="hidden" name="mode" value="artist_profile"><input type="hidden" name="submit" value=1><input type="image" id="submit" src="images/texts/letters/submit1.gif" onMouseOver="selectletter(this);" onMouseOut="deselectletter(this);">
<td></td>
</tr>
</form>
</table>

Thanks for any and all help,
ILM

ILoserMan
08-21-2005, 09:53 PM
Bump.


I'm afriad I might have to re-script the entire page...is that what it's coming too?


ILM

rmedek
08-22-2005, 01:44 AM
What seems to be the actual problem with the page?

ILoserMan
08-22-2005, 03:24 PM
View the page in IE, then in FireFox.


Notice how once the "?" is pressed the help box shows up fine in Firefox [ to the right of the input boxes


But In IE it pushes all the page down and appears above it [ in the smallest width possible ].


I'll take screen shots for those of you who are missing one browser or the other.



IE Screen Shot (http://www.niytrus.com/random/ie-ss.jpg)

FF Screen Shot (http://www.niytrus.com/random/ff-ss.jpg)



ILM

ILoserMan
08-26-2005, 04:08 AM
bu bu bu bump.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum