div background disappearing in IE

@FangMar 09.2010 — #Add a space after the image url and before 'top'

@jaypicsauthorMar 10.2010 — #Thank you very much it worked. Can you help me with the css of a combo box i.e., <select></select>. The CSS is possible but the problem is with the drop down I am unable to CSS it. Pls help

@FangMar 10.2010 — #The CSS is possible but the problem is with the drop down I am unable to CSS it. Pls help[/QUOTE]
To do what exactly?

@jaypicsauthorMar 10.2010 — #I want to make a country selector using a <select> element in the page. To maintain the same look and feel I want that <select> element to CSS.

"Its like without any borders just the text and the arrow upside down but in a different color."

@FangMar 10.2010 — #Requires JavaScript

@jaypicsauthorMar 12.2010 — #I tried it with the java script and its working too but only in FF. The concept is like the <select> element it converted into <ul> . But its not working in IE.

@FangMar 12.2010 — #We need to see what you have done if you require further help.

@jaypicsauthorMar 13.2010 — #//Follwing is the code for <select> element in the HTML page.

<form>

<select id="myselectbox" name="myselectbox">

<option value="1">India</option>

<option value="2">Pakistan</option>

<option value="3">Bangladesh</option>

<option value="4">SriLanka</option>

<option value="5">Baluchistan</option>

</select>

</form>

//following is the code where the <select> element is converted into <ul> and CSS it as //it is a normal <ul>. This one is nicely working in FF but not in IE.

function selectReplacement(obj) {

// append a class to the select

obj.className += ' replaced';

//create list style for styling

var ul = document.createElement('ul');

ul.className = 'selectReplacement';

if (window.attachEvent) {

ul.onmouseover = function() {

ul.className += ' selHover';

}

ul.onmouseout = function() {

ul.className =

ul.className.replace(new RegExp(" selHoverb"), '');

}

}

// collect our object’s options

var opts = obj.options;

// check for the selected option (default to the first option)

for (var i=0; i<opts.length; i++) {

var selectedOpt;

if (opts[i].selected) {

selectedOpt = i;

break; // we found the selected option, leave the loop

} else {

selectedOpt = 0;

}

}

// iterate through them, creating <li>s

for (var i=0; i<opts.length; i++) {

var li = document.createElement('li');

var txt = document.createTextNode(opts[i].text);

li.appendChild(txt);

li.selIndex = opts[i].index;

li.selectID = obj.id;

li.onclick = function() {

setVal(this.selectID, this.selIndex);

selectMe(this);

}

if (i == selectedOpt) {
   li.className = 'selected';
  }
  if (window.attachEvent) {
   li.onmouseover = function() {
   this.className += ' selHover';
   }
   li.onmouseout = function() {
   this.className = 
   this.className.replace(new RegExp(" selHover\b"), '');
   }
  }
 
 
  ul.appendChild(li);

}

// add the ul to the form

obj.parentNode.appendChild(ul);

}

// ***********************************************************************************

function setForm() {

var s = document.getElementsByTagName('select');

for (var i=0; i<s.length; i++) {

selectReplacement(s[i]);

}

}

window.onload = function() {

setForm();

}

// ***********************************************************************************

function selectMe(obj) {

// get the <li>’s siblings

var lis = obj.parentNode.getElementsByTagName('li');

// loop through

for (var i=0; i<lis.length; i++) {

// not the selected <li>, remove selected class

if (lis[i] != obj) {

lis[i].className='';

} else { // our selected <li>, add selected class

lis[i].className='selected';

}

}

}

// ***********************************************************************************

function setVal(objID, selIndex) {

var obj = document.getElementById(objID);

obj.selectedIndex = selIndex;

}

//Please try this code and give some suggestion

@FangMar 13.2010 — #Produces a ul list in IE

div background disappearing in IE

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

div background disappearing in IE

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴