CSS fails on IE7/FireFox?

**drhowarddrfine** · Oct 29 '07, 02:09 PM

We have no way of running asp.net stuff so that code doesn't do us any good. We need to see the generated markup. Got link?

There is no such thing as <script languge=Javascr ipt>. Change that to <script type="text/javascript">

In the CSS, 'span' is not a class name so remove the dot before it. Also, there needs to be whitespace inbetween. iow,:
'.span.spanNorm alElement' must be 'span .spanNormalElem ent'

IE6 is horrible with CSS. IE7 is better and Firefox is excellent, so the problem is with IE6 and not the other browsers. Get the markup working in Firefox first. If necessary, adjust for IE7s bugs and quirks. Then we can hack for IE6. Many of the fixes for IE6 no longer work in IE7; and the hacks for IE7 don't work in IE6; and some standard markup doesn't work in either of them at all.

**RaymondXie** · Oct 29 '07, 02:50 PM

Originally posted by drhowarddrfine

We have no way of running asp.net stuff so that code doesn't do us any good. We need to see the generated markup. Got link?

No public link because it is used internally. But I've attached the generated source code here as well as the css file.

There is no such thing as <script languge=Javascr ipt>. Change that to <script type="text/javascript">

In the CSS, 'span' is not a class name so remove the dot before it. Also, there needs to be whitespace inbetween. iow,:
'.span.spanNorm alElement' must be 'span .spanNormalElem ent'

I have made the changes according to your above suggestions. Unfortunately now it fails even in IE6. Even the content of the dropdown menu won't show up.

Source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Welcome
</title>
<style type="text/css">

</style>
<link href="style.css " type="text/css" rel="stylesheet " />
<script src="net.js" type="text/javascript"></script>
<script language="text/javascript">

//Listing 10.4
window.onload = function(){

var elemSpan = document.create Element("span") ;
elemSpan.id = "spanOutput ";
elemSpan.classN ame = "spanTextDropdo wn";
//document.body.a ppendChild(elem Span);
document.body.a ppendChild(elem Span);

//Listing 10.7
//By default, user choose from searching in Contact in front page,
//so the data will be typeAheadData.a spx?t=1
//But if user changes his selection, there should be another event to set property
//and change data source there
document.Form1. txtUserInput.ob j =
SetProperties(d ocument.Form1.t xtUserInput,
document.Form1. txtID,'typeAhea dData.aspx?t=1' ,
true,true,true, true,"No existing matching data, intensive searching started, click search button to continue",false ,null);
}

//Listing 10.6
function SetProperties(x Elem,xHidden,xs erverCode,
xignoreCase,xma tchAnywhere,xma tchTextBoxWidth ,
xshowNoMatchMes sage,xnoMatchin gDataMessage,xu seTimeout,
xtheVisibleTime ){
var props={
elem: xElem,
hidden: xHidden,
serverCode: xserverCode,
regExFlags: ( (xignoreCase) ? "i" : "" ),
regExAny: ( (xmatchAnywhere ) ? "" : "^" ),
matchAnywhere: xmatchAnywhere,
matchTextBoxWid th: xmatchTextBoxWi dth,
theVisibleTime: xtheVisibleTime ,
showNoMatchMess age: xshowNoMatchMes sage,
noMatchingDataM essage: xnoMatchingData Message,
useTimeout: xuseTimeout
};
AddHandler(xEle m);
return props;
}

//Listing 10.8
var isOpera=(naviga tor.userAgent.t oLowerCase().in dexOf("opera")! = -1);
function AddHandler(objT ext){
objText.onkeyup = GiveOptions;
objText.onblur = function(){
if(this.obj.use Timeout)StartTi meout();
}
if(isOpera)objT ext.onkeypress = GiveOptions;
}

//Listing 10.9
var arrOptions = new Array();
var strLastValue = "";
var bMadeRequest;
var theTextBox;
var objLastActive;
var currentValueSel ected = -1;
var bNoResults = false;
var isTiming = false;

//Listing 10.10
function GiveOptions(e){

var intKey = -1;
if(window.event ){
intKey = event.keyCode;
theTextBox = event.srcElemen t;
}
else{
intKey = e.which;
theTextBox = e.target;
}
if(theTextBox.o bj.useTimeout){
if(isTiming)Era seTimeout();
StartTimeout();
}
if(theTextBox.v alue.length == 0 && !isOpera){
arrOptions = new Array();
HideTheBox();
strLastValue = "";
return false;
}
if(objLastActiv e == theTextBox){
if(intKey == 13){
GrabHighlighted ();
theTextBox.blur ();
return false;
}
else if(intKey == 38){
MoveHighlight(-1);
return false;
}
else if(intKey == 40){
MoveHighlight(1 );
return false;
}
else{}
}
TypeAhead(theTe xtBox.value);

strLastValue = theTextBox.valu e;
}

//Listing 10.11
function TypeAhead(xStrT ext){

var strParams = "q=" + xStrText +
"&where=" + theTextBox.obj. matchAnywhere + "&t=" +
getSelectedRadi oValue(document .Form1.rblOptio n);

// var loader1 = new net.ContentLoad er("typeAheadDa ta.aspx",
// BuildChoices,nu ll,"POST",strPa rams);

var loader1 = new net.ContentLoad er(theTextBox.o bj.serverCode,
BuildChoices,nu ll,"POST",strPa rams);
}

//Listing 10.12
function BuildChoices(){

var strText = this.req.respon seText;
eval(strText);
BuildList(strLa stValue);
bMadeRequest = false;
}

//Listing 10.13
function BuildList(theTe xt){
SetElementPosit ion(theTextBox) ;
var theMatches = MakeMatches(the Text);
theMatches = theMatches.join ().replace(/\,/gi,"");
if(theMatches.l ength > 0){
document.getEle mentById("spanO utput")
.innerHTML = theMatches;
document.getEle mentById(
"OptionsList_0" ).className=
"spanHighElemen t";
currentValueSel ected = 0;
bNoResults = false;
}
else{
currentValueSel ected = -1;
bNoResults = true;
if(theTextBox.o bj.showNoMatchM essage)
document.getEle mentById(
"spanOutput").i nnerHTML =
"<span class='noMatchD ata'>" +
theTextBox.obj
.noMatchingData Message +
"</span>";
else HideTheBox();
}
}

//Listing 10.14
function SetElementPosit ion(theTextBoxI nt){
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = theTextBoxInt;
if (!theElement) return;
var theElemHeight = theElement.offs etHeight;
var theElemWidth = theElement.offs etWidth;
while(theElemen t != null){
selectedPosX += theElement.offs etLeft;
selectedPosY += theElement.offs etTop;
theElement = theElement.offs etParent;
}
xPosElement = document.getEle mentById("spanO utput");
//debugger;
xPosElement.sty le.left = selectedPosX + 'px';
//xPosElement.sty le.left = "62px";
if(theTextBoxIn t.obj.matchText BoxWidth)
xPosElement.sty le.width = theElemWidth + 'px';
//xPosElement.sty le.width = "473px";
xPosElement.sty le.top = selectedPosY + theElemHeight + 'px';
//xPosElement.sty le.top = "224px";
xPosElement.sty le.display = 'block';
//debugger;
if(theTextBoxIn t.obj.useTimeou t){
xPosElement.onm ouseout = StartTimeout;
xPosElement.onm ouseover = EraseTimeout;
}
else{
xPosElement.onm ouseout = null;
xPosElement.onm ouseover = null;
}
}

//Listing 10.15
var countForId = 0;
function MakeMatches(xCo mpareStr){
countForId = 0;
var matchArray = new Array();
var regExp = new RegExp(theTextB ox.obj.regExAny +
xCompareStr,the TextBox.obj.reg ExFlags);
for(i=0;i<arrOp tions.length;i+ +){
var theMatch = arrOptions[i][0].match(regExp);
if(theMatch){
matchArray[matchArray.leng th]=
CreateUnderline (arrOptions[i][0],
xCompareStr,i);
}
}
return matchArray;
}

//Listing 10.16
var undeStart = "<span class='spanMatc hText'>";
var undeEnd = "</span>";
var selectSpanStart = "<span style='width:10 0%;display:bloc k;' class='spanNorm alElement' onmouseover='Se tHighColor(this )' ";
var selectSpanEnd ="</span>";
function CreateUnderline (xStr,xTextMatc h,xVal){
selectSpanMid = "onclick='SetTe xt(" + xVal + ")'" +
"id='OptionsLis t_" +
countForId + "' theArrayNumber= '"+ xVal +"'>";
var regExp = new RegExp(theTextB ox.obj.regExAny +
xTextMatch,theT extBox.obj.regE xFlags);
var aStart = xStr.search(reg Exp);
var matchedText = xStr.substring( aStart,
aStart + xTextMatch.leng th);
countForId++;
return selectSpanStart + selectSpanMid +
xStr.replace(re gExp,undeStart +
matchedText + undeEnd) + selectSpanEnd;
}

//Listing 10.17
function MoveHighlight(x Dir){
if(currentValue Selected >= 0){
newValue = parseInt(curren tValueSelected) + parseInt(xDir);
if(newValue > -1 && newValue < countForId){
currentValueSel ected = newValue;
SetHighColor (null);
}
}
}
function SetHighColor(th eTextBox){
if(theTextBox){
currentValueSel ected =
theTextBox.id.s lice(theTextBox .id.indexOf("_" )+1,
theTextBox.id.l ength);
}
for(i = 0; i < countForId; i++){
document.getEle mentById('Optio nsList_' + i).className =
'spanNormalElem ent';
}
document.getEle mentById('Optio nsList_' +
currentValueSel ected).classNam e = 'spanHighElemen t';
}

//Listing 10.18
function SetText(xVal){
theTextBox.valu e = arrOptions[xVal][0]; //set text value
theTextBox.obj. hidden.value = arrOptions[xVal][1];
document.getEle mentById("Serve rID").value=arr Options[xVal][1];

document.getEle mentById("spanO utput").style.d isplay = "none";
currentValueSel ected = -1; //remove the selected index
}
function GrabHighlighted (){
if(currentValue Selected >= 0){
xVal = document.getEle mentById("Optio nsList_" +
currentValueSel ected).getAttri bute("theArrayN umber");
SetText(xVal);
HideTheBox();
}
}
function HideTheBox(){
document.getEle mentById("spanO utput").style.d isplay = "none";
currentValueSel ected = -1;
EraseTimeout();
}

//Listing 10.19
function EraseTimeout(){
clearTimeout(is Timing);
isTiming = false;
}
function StartTimeout(){
isTiming = setTimeout("Hid eTheBox()",
theTextBox.obj. theVisibleTime) ;
}

//Supplemental function added for handle option changes event
function ChangeOption()
{

//choose option 1, which is rbtOption_0 (Contact)
if (document.getEl ementById("rblO ption_0").check ed)
{
document.Form1. txtUserInput.ob j =
SetProperties(d ocument.Form1.t xtUserInput,
document.Form1. txtID,'typeAhea dData.aspx?t=1' ,
true,true,true, true,"No matching Data",false,nul l);
}
//choose option 2, which is rbtOption_1 (AD)
else if (document.getEl ementById("rblO ption_1").check ed)
{
document.Form1. txtUserInput.ob j =
SetProperties(d ocument.Form1.t xtUserInput,
document.Form1. txtID,'typeAhea dData.aspx?t=2' ,
true,true,true, true,"No matching Data",false,nul l);
}
//choose option 3, which is rbtOption_2 (IP)
else if (document.getEl ementById("rblO ption_2").check ed)
{
document.Form1. txtUserInput.ob j =
SetProperties(d ocument.Form1.t xtUserInput,
document.Form1. txtID,'typeAhea dData.aspx?t=3' ,
true,true,true, true,"No matching Data",false,nul l);
}
//choose option 2, which is rbtOption_3 (HostName)
else if (document.getEl ementById("rblO ption_3").check ed)
{
document.Form1. txtUserInput.ob j =
SetProperties(d ocument.Form1.t xtUserInput,
document.Form1. txtID,'typeAhea dData.aspx?t=4' ,
true,true,true, true,"No matching Data",false,nul l);
}
}

function getSelectedRadi o(buttonGroup) {
// returns the array number of the selected radio button or -1 if no button is selected
if (buttonGroup[0]) { // if the button group is an array (one button is not an array)
for (var i=0; i<buttonGroup.l ength; i++) {
if (buttonGroup[i].checked) {
return i
}
}
} else {
if (buttonGroup.ch ecked) { return 0; } // if the one button is checked, return zero
}
// if we get to this point, no radio button is selected
return -1;
} // Ends the "getSelectedRad io" function

function getSelectedRadi oValue(buttonGr oup) {
// returns the value of the selected radio button or "" if no button is selected
var i = getSelectedRadi o(buttonGroup);
if (i == -1) {
return "";
} else {
if (buttonGroup[i]) { // Make sure the button group is an array (not just one button)
return buttonGroup[i].value;
} else { // The button group is just the one button, and it is checked
return buttonGroup.val ue;
}
}
} // Ends the "getSelectedRad ioValue" function

function getSelectedChec kbox(buttonGrou p) {
// Go through all the check boxes. return an array of all the ones
// that are selected (their position numbers). if no boxes were checked,
// returned array will be empty (length will be zero)
var retArr = new Array();
var lastElement = 0;
if (buttonGroup[0]) { // if the button group is an array (one check box is not an array)
for (var i=0; i<buttonGroup.l ength; i++) {
if (buttonGroup[i].checked) {
retArr.length = lastElement;
retArr[lastElement] = i;
lastElement++;
}
}
} else { // There is only one check box (it's not an array)
if (buttonGroup.ch ecked) { // if the one check box is checked
retArr.length = lastElement;
retArr[lastElement] = 0; // return zero as the only array value
}
}
return retArr;
} // Ends the "getSelectedChe ckbox" function

function getSelectedChec kboxValue(butto nGroup) {
// return an array of values selected in the check box group. if no boxes
// were checked, returned array will be empty (length will be zero)
var retArr = new Array(); // set up empty array for the return values
var selectedItems = getSelectedChec kbox(buttonGrou p);
if (selectedItems. length != 0) { // if there was something selected
retArr.length = selectedItems.l ength;
for (var i=0; i<selectedItems .length; i++) {
if (buttonGroup[selectedItems[i]]) { // Make sure it's an array
retArr[i] = buttonGroup[selectedItems[i]].value;
} else { // It's not an array (there's just one check box and it's selected)
retArr[i] = buttonGroup.val ue;// return that value
}
}
}
return retArr;
} // Ends the "getSelectedChe ckBoxValue" function

function ShowPopup()
{
//for querystring
var str = document.getEle mentById("txtUs erInput").value ;
var url = "SearchResult.a spx?q=" + str;
var win = window.open('', '','left=0px, top=0px, width=480px, height=270px, scrollbars=yes, status =no, resizable=yes') ;
win.location.hr ef = url;
win=null;
return false;

}
</script>
</head>
<body>
<form name="Form1" method="post" action="Default .aspx" id="Form1">
<div>
<input type="hidden" name="__VIEWSTA TE" id="__VIEWSTATE " value="/wEPDwULLTE4MjI3 OTA2NjYPZBYCAgM PZBYEAgEPEA9kFg IeB29uY2xpY2sFG 2phdmFzY3JpcHQ6 IENoYW5nZU9wdGl vbigpO2RkZAIFDw 9kFgIfAAUYamF2Y XNjcmlwdDogU2hv d1BvcHVwKCk7ZGQ kT0lhL1v4IPssUp GkVgFo1g/xkA==" />
</div>

<div>
<table width="100%" border="0">
<tr>
<td align="center">
<br />
<br />
<img src="Images\Roo gle.gif" /></td>
</tr>
<tr>
<td align="center">
   
<table id="rblOption" onclick="javasc ript: ChangeOption(); " border="0">
<tr>
<td><input id="rblOption_0 " type="radio" name="rblOption " value="1" checked="checke d" /><label for="rblOption_ 0">Contact</label></td><td><input id="rblOption_1 " type="radio" name="rblOption " value="2" /><label for="rblOption_ 1">AD</label></td><td><input id="rblOption_2 " type="radio" name="rblOption " value="3" /><label for="rblOption_ 2">IP</label></td><td><input id="rblOption_3 " type="radio" name="rblOption " value="4" /><label for="rblOption_ 3">Host</label></td><td><input id="rblOption_4 " type="radio" name="rblOption " value="Job" /><label for="rblOption_ 4">Job</label></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"> <input name="txtUserIn put" type="text" id="txtUserInpu t" style="width:46 7px;" />
 </td>
</tr>
<tr>
<td align="center" style="height: 64px" valign="bottom" ><input type="submit" name="btnSearch " value="Roogle Search" onclick="javasc ript: ShowPopup();" id="btnSearch" />
<input type="submit" name="btnLucky" value="I'm feeling lucky" id="btnLucky" /></td>
</tr>
<tr>
<td align="center">
Roogle in
<a id="HyperLink1 " href="search.as px?Type=Hostnam e"><a href="http://www.google.cn"> Chinese</a></a></td>
</tr>
<tr>
<td align="center"> <p> </p>
<p><a href="http://scotiabank.com" >Scotia Bank</a> <a href="http://secres-srv2/default.aspx">I S&C</a> <a href="http://isckpkppz9:8080/sites/TSFS/default.aspx">T S&FS</a></p></td>
</tr>
<tr>
<td align="center"> <span class="style8"> @2007 Roogle</span></td>
</tr>
</table>

</div>
<INPUT id="htmlID" type="hidden" name="txtID"><I NPUT style="DISPLAY: none" type="text" name="txtIgnore ">
<input name="ServerID" type="text" id="ServerID" style="DISPLAY: none" /> <br />

<div>

<input type="hidden" name="__EVENTVA LIDATION" id="__EVENTVALI DATION" value="/wEWCwL+hoTGBQLB idPXDwLAidPXDwL DidPXDwLCidPXDw LooYzTBALO5vm5A wLywc2TBwKln/PuCgKyrt+HAwL5z piZAnSUKSYh5yoF rrSGtByO9ouY2SE K" />
</div></form>
</body>
</html>

css file:
body, table, div, TR, td
{
font: 8pt verdana;
color: black;
background-color: white;
}
p,th { font-size: 9px; font-weight:bold; color: #666666; line-height: 16px;}
A
{
color:black;
}
a:link { font-size: 9px; font-weight:bold; text-decoration: underline; color: green;}

span. spanTextDropdow n{
position: absolute;
top: 0px;
left: 0px;
width: 150px;
z-index: 101;
background-color: #C0C0C0;
border: 1px solid #000000;
padding-left: 0px;
overflow: visible;
display: none;
}

span. spanMatchText
{
text-decoration: underline;
font-weight: bold;
}

span. spanNormalEleme nt
{
background: #ccffff;
}
span. spanHighElement
{
background: #ffcccc;
color: red;
cursor: pointer;
}
span. noMatchData
{
font-weight: bold;
color: #0000FF;
}

**drhowarddrfine** · Oct 29 '07, 04:28 PM

Again this is wrong:
<script language="text/javascript"> should be:
<script type="text/javascript"> There is no such thing as "languge=".

Hold on while I fix your post.

**drhowarddrfine** · Oct 29 '07, 04:39 PM

Unfortunately now it fails even in IE6. Even the content of the dropdown menu won't show up.

Of course. There were errors and you can't rely on errors to work properly. IE6 fooled you by working like you wanted but it wasn't what you wrote. IE7 and Firefox did what you wrote but not what you wanted. This is why you should always use a standards compliant browser to initially check your markup. Always use Firefox or Opera or Safari for this. Never any version of IE.

You still have many CSS and HTML errors. Validate both for those lists of errors that need fixing. The HTML errors are javascript related so you may need to ask about those on that board.

CSS fails on IE7/FireFox?

CSS fails on IE7/FireFox?

Comment

Comment

Comment

Comment