471,599 Members | 1,302 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

CSS fails on IE7/FireFox?

Hi folks,

This is my first post.

I have an app working perfectly under IE6 but failing in IE7 or FireFox. I believe something wrong with the CSS. I've attached my code below. The whole idea is to attach a dropdown menu to a textbox. In FF or IE7, the dropdown menu will be kind of created but on a wrong position and with no color(or you can say the style is not attached).

To have more background, please refer to "Ajax in Action" by Manning. I am using one of the chapter for TypeAhead, kind of Google suggestion.

Thank you.

Expand|Select|Wrap|Line Numbers
  1. Default.aspx
  2. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" % >
  3.  
[html]
<!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 >Welcome</title >
<style type="text/css" >
<!--
.style3 {
font-size: 72px;
color: #0000FF;
}
.style4 {color: #FF0000}
.style5 {color: #FFCC00}
.style6 {color: #006633}
.style7 {font-size: 100px}
.style8 {font-size: x-small}
-- >
</style >
<LINK href="style.css" type="text/css" rel="stylesheet" >
<script src="net.js" type="text/javascript"></script>
<script language="JavaScript">
window.onload = function(){

var elemSpan = document.createElement("span");
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
//document.body.appendChild(elemSpan);
document.body.appendChild(elemSpan);
.........
function BuildList(theText){
SetElementPosition(theTextBox);
.......

function SetElementPosition(theTextBoxInt){
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = theTextBoxInt;
if (!theElement) return;
var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement = document.getElementById("spanOutput");
//debugger;
xPosElement.style.left = selectedPosX + 'px';
//xPosElement.style.left = "62px";
if(theTextBoxInt.obj.matchTextBoxWidth)
xPosElement.style.width = theElemWidth + 'px';
//xPosElement.style.width = "473px";
xPosElement.style.top = selectedPosY + theElemHeight + 'px';
//xPosElement.style.top = "224px";
xPosElement.style.display = 'block';

//debugger;
if(theTextBoxInt.obj.useTimeout){
xPosElement.onmouseout = StartTimeout;
xPosElement.onmouseover = EraseTimeout;
}
else{
xPosElement.onmouseout = null;
xPosElement.onmouseover = null;
}
}
[/html]
Expand|Select|Wrap|Line Numbers
  1. style.css:
  2. body, table, div, TR, td
  3. {
  4. font: 8pt verdana;
  5. color: black;
  6. background-color: white;
  7. }
  8. p,th { font-size: 9px; font-weight:bold; color: #666666; line-height: 16px;}
  9. A
  10. {
  11. color:black;
  12. }
  13. a:link { font-size: 9px; font-weight:bold; text-decoration: underline; color: green;}
  14.  
  15.  
  16. .span.spanTextDropdown{
  17.         position: absolute;
  18.         top: 0px;
  19.         left: 0px;
  20.         width: 150px;
  21.         z-index: 101;
  22.         background-color: #C0C0C0;
  23.         border: 1px solid #000000;
  24.         padding-left: 0px;
  25.         overflow: visible;
  26.         display: none;
  27. }
  28.  
  29. .span.spanMatchText
  30. text-decoration: underline;
  31.     font-weight: bold; 
  32. }
  33.  
  34. .span.spanNormalElement
  35. {
  36. background: #ccffff;
  37. }
  38. .span.spanHighElement
  39. background: #ffcccc;
  40.     color: red;
  41.     cursor: pointer; 
  42. }
  43. .span.noMatchData
  44. font-weight: bold;
  45.     color: #0000FF; 
  46. }
Oct 29 '07 #1
4 2285
drhowarddrfine
7,435 Expert 4TB
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=Javascript>. 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.spanNormalElement' must be 'span .spanNormalElement'

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.
Oct 29 '07 #2
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=Javascript>. 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.spanNormalElement' must be 'span .spanNormalElement'
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.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Welcome
</title>
<style type="text/css">
<!--
.style3 {
font-size: 72px;
color: #0000FF;
}
.style4 {color: #FF0000}
.style5 {color: #FFCC00}
.style6 {color: #006633}
.style7 {font-size: 100px}
.style8 {font-size: x-small}
-->
</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.createElement("span");
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
//document.body.appendChild(elemSpan);
document.body.appendChild(elemSpan);

//Listing 10.7
//By default, user choose from searching in Contact in front page,
//so the data will be typeAheadData.aspx?t=1
//But if user changes his selection, there should be another event to set property
//and change data source there
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.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(xElem,xHidden,xserverCode,
xignoreCase,xmatchAnywhere,xmatchTextBoxWidth,
xshowNoMatchMessage,xnoMatchingDataMessage,xuseTim eout,
xtheVisibleTime){
var props={
elem: xElem,
hidden: xHidden,
serverCode: xserverCode,
regExFlags: ( (xignoreCase) ? "i" : "" ),
regExAny: ( (xmatchAnywhere) ? "" : "^" ),
matchAnywhere: xmatchAnywhere,
matchTextBoxWidth: xmatchTextBoxWidth,
theVisibleTime: xtheVisibleTime,
showNoMatchMessage: xshowNoMatchMessage,
noMatchingDataMessage: xnoMatchingDataMessage,
useTimeout: xuseTimeout
};
AddHandler(xElem);
return props;
}

//Listing 10.8
var isOpera=(navigator.userAgent.toLowerCase().indexOf ("opera")!= -1);
function AddHandler(objText){
objText.onkeyup = GiveOptions;
objText.onblur = function(){
if(this.obj.useTimeout)StartTimeout();
}
if(isOpera)objText.onkeypress = GiveOptions;
}

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

//Listing 10.10
function GiveOptions(e){

var intKey = -1;
if(window.event){
intKey = event.keyCode;
theTextBox = event.srcElement;
}
else{
intKey = e.which;
theTextBox = e.target;
}
if(theTextBox.obj.useTimeout){
if(isTiming)EraseTimeout();
StartTimeout();
}
if(theTextBox.value.length == 0 && !isOpera){
arrOptions = new Array();
HideTheBox();
strLastValue = "";
return false;
}
if(objLastActive == 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(theTextBox.value);

strLastValue = theTextBox.value;
}

//Listing 10.11
function TypeAhead(xStrText){


var strParams = "q=" + xStrText +
"&where=" + theTextBox.obj.matchAnywhere + "&t=" +
getSelectedRadioValue(document.Form1.rblOption);

// var loader1 = new net.ContentLoader("typeAheadData.aspx",
// BuildChoices,null,"POST",strParams);

var loader1 = new net.ContentLoader(theTextBox.obj.serverCode,
BuildChoices,null,"POST",strParams);
}

//Listing 10.12
function BuildChoices(){

var strText = this.req.responseText;
eval(strText);
BuildList(strLastValue);
bMadeRequest = false;
}

//Listing 10.13
function BuildList(theText){
SetElementPosition(theTextBox);
var theMatches = MakeMatches(theText);
theMatches = theMatches.join().replace(/\,/gi,"");
if(theMatches.length > 0){
document.getElementById("spanOutput")
.innerHTML = theMatches;
document.getElementById(
"OptionsList_0").className=
"spanHighElement";
currentValueSelected = 0;
bNoResults = false;
}
else{
currentValueSelected = -1;
bNoResults = true;
if(theTextBox.obj.showNoMatchMessage)
document.getElementById(
"spanOutput").innerHTML =
"<span class='noMatchData'>" +
theTextBox.obj
.noMatchingDataMessage +
"</span>";
else HideTheBox();
}
}

//Listing 10.14
function SetElementPosition(theTextBoxInt){
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = theTextBoxInt;
if (!theElement) return;
var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement = document.getElementById("spanOutput");
//debugger;
xPosElement.style.left = selectedPosX + 'px';
//xPosElement.style.left = "62px";
if(theTextBoxInt.obj.matchTextBoxWidth)
xPosElement.style.width = theElemWidth + 'px';
//xPosElement.style.width = "473px";
xPosElement.style.top = selectedPosY + theElemHeight + 'px';
//xPosElement.style.top = "224px";
xPosElement.style.display = 'block';
//debugger;
if(theTextBoxInt.obj.useTimeout){
xPosElement.onmouseout = StartTimeout;
xPosElement.onmouseover = EraseTimeout;
}
else{
xPosElement.onmouseout = null;
xPosElement.onmouseover = null;
}
}

//Listing 10.15
var countForId = 0;
function MakeMatches(xCompareStr){
countForId = 0;
var matchArray = new Array();
var regExp = new RegExp(theTextBox.obj.regExAny +
xCompareStr,theTextBox.obj.regExFlags);
for(i=0;i<arrOptions.length;i++){
var theMatch = arrOptions[i][0].match(regExp);
if(theMatch){
matchArray[matchArray.length]=
CreateUnderline(arrOptions[i][0],
xCompareStr,i);
}
}
return matchArray;
}


//Listing 10.16
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";
var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd ="</span>";
function CreateUnderline(xStr,xTextMatch,xVal){
selectSpanMid = "onclick='SetText(" + xVal + ")'" +
"id='OptionsList_" +
countForId + "' theArrayNumber='"+ xVal +"'>";
var regExp = new RegExp(theTextBox.obj.regExAny +
xTextMatch,theTextBox.obj.regExFlags);
var aStart = xStr.search(regExp);
var matchedText = xStr.substring(aStart,
aStart + xTextMatch.length);
countForId++;
return selectSpanStart + selectSpanMid +
xStr.replace(regExp,undeStart +
matchedText + undeEnd) + selectSpanEnd;
}

//Listing 10.17
function MoveHighlight(xDir){
if(currentValueSelected >= 0){
newValue = parseInt(currentValueSelected) + parseInt(xDir);
if(newValue > -1 && newValue < countForId){
currentValueSelected = newValue;
SetHighColor (null);
}
}
}
function SetHighColor(theTextBox){
if(theTextBox){
currentValueSelected =
theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
theTextBox.id.length);
}
for(i = 0; i < countForId; i++){
document.getElementById('OptionsList_' + i).className =
'spanNormalElement';
}
document.getElementById('OptionsList_' +
currentValueSelected).className = 'spanHighElement';
}

//Listing 10.18
function SetText(xVal){
theTextBox.value = arrOptions[xVal][0]; //set text value
theTextBox.obj.hidden.value = arrOptions[xVal][1];
document.getElementById("ServerID").value=arrOptio ns[xVal][1];

document.getElementById("spanOutput").style.displa y = "none";
currentValueSelected = -1; //remove the selected index
}
function GrabHighlighted(){
if(currentValueSelected >= 0){
xVal = document.getElementById("OptionsList_" +
currentValueSelected).getAttribute("theArrayNumber ");
SetText(xVal);
HideTheBox();
}
}
function HideTheBox(){
document.getElementById("spanOutput").style.displa y = "none";
currentValueSelected = -1;
EraseTimeout();
}

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



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

//choose option 1, which is rbtOption_0 (Contact)
if (document.getElementById("rblOption_0").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=1',
true,true,true,true,"No matching Data",false,null);
}
//choose option 2, which is rbtOption_1 (AD)
else if (document.getElementById("rblOption_1").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=2',
true,true,true,true,"No matching Data",false,null);
}
//choose option 3, which is rbtOption_2 (IP)
else if (document.getElementById("rblOption_2").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=3',
true,true,true,true,"No matching Data",false,null);
}
//choose option 2, which is rbtOption_3 (HostName)
else if (document.getElementById("rblOption_3").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=4',
true,true,true,true,"No matching Data",false,null);
}
}

function getSelectedRadio(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.length; i++) {
if (buttonGroup[i].checked) {
return i
}
}
} else {
if (buttonGroup.checked) { 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 "getSelectedRadio" function

function getSelectedRadioValue(buttonGroup) {
// returns the value of the selected radio button or "" if no button is selected
var i = getSelectedRadio(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.value;
}
}
} // Ends the "getSelectedRadioValue" function

function getSelectedCheckbox(buttonGroup) {
// 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.length; 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.checked) { // if the one check box is checked
retArr.length = lastElement;
retArr[lastElement] = 0; // return zero as the only array value
}
}
return retArr;
} // Ends the "getSelectedCheckbox" function

function getSelectedCheckboxValue(buttonGroup) {
// 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 = getSelectedCheckbox(buttonGroup);
if (selectedItems.length != 0) { // if there was something selected
retArr.length = selectedItems.length;
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.value;// return that value
}
}
}
return retArr;
} // Ends the "getSelectedCheckBoxValue" function

function ShowPopup()
{
//for querystring
var str = document.getElementById("txtUserInput").value;
var url = "SearchResult.aspx?q=" + str;
var win = window.open('','','left=0px, top=0px, width=480px, height=270px, scrollbars=yes, status =no, resizable=yes');
win.location.href = url;
win=null;
return false;

}
</script>
</head>
<body>
<form name="Form1" method="post" action="Default.aspx" id="Form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4MjI3OTA2NjYPZBYCAgMPZBYEAgEPEA9kFgIeB29 uY2xpY2sFG2phdmFzY3JpcHQ6IENoYW5nZU9wdGlvbigpO2RkZ AIFDw9kFgIfAAUYamF2YXNjcmlwdDogU2hvd1BvcHVwKCk7ZGQ kT0lhL1v4IPssUpGkVgFo1g/xkA==" />
</div>

<div>
<table width="100%" border="0">
<tr>
<td align="center">
<br />
<br />
<img src="Images\Roogle.gif" /></td>
</tr>
<tr>
<td align="center">
&nbsp; &nbsp;
<table id="rblOption" onclick="javascript: ChangeOption();" border="0">
<tr>
<td><input id="rblOption_0" type="radio" name="rblOption" value="1" checked="checked" /><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="txtUserInput" type="text" id="txtUserInput" style="width:467px;" />
&nbsp;</td>
</tr>
<tr>
<td align="center" style="height: 64px" valign="bottom"><input type="submit" name="btnSearch" value="Roogle Search" onclick="javascript: 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.aspx?Type=Hostname"><a href="http://www.google.cn">Chinese</a></a></td>
</tr>
<tr>
<td align="center"><p>&nbsp;</p>
<p><a href="http://scotiabank.com">Scotia Bank</a> <a href="http://secres-srv2/default.aspx">IS&amp;C</a> <a href="http://isckpkppz9:8080/sites/TSFS/default.aspx">TS&amp;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"><INPUT style="DISPLAY: none" type="text" name="txtIgnore">
<input name="ServerID" type="text" id="ServerID" style="DISPLAY: none" />&nbsp;<br />


<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwL+hoTGBQLBidPXDwLAidPXDwLDidPXDwLCidPXDwLooYz TBALO5vm5AwLywc2TBwKln/PuCgKyrt+HAwL5zpiZAnSUKSYh5yoFrrSGtByO9ouY2SEK" />
</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. spanTextDropdown{
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. spanNormalElement
{
background: #ccffff;
}
span. spanHighElement
{
background: #ffcccc;
color: red;
cursor: pointer;
}
span. noMatchData
{
font-weight: bold;
color: #0000FF;
}
Oct 29 '07 #3
drhowarddrfine
7,435 Expert 4TB
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.
Oct 29 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
Oct 29 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by lkrubner | last post: by
8 posts views Thread by Mark | last post: by
28 posts views Thread by laredotornado | last post: by
4 posts views Thread by hiazle | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.