Remove border of DIV in IE 1

[bdichiara]

Is it possible to remove the border of a DIV using javascript?
I've tried:

function hideBorder(id){
	document.getElementById(id).style.border = 'none';
	document.getElementById(id).style.borderBottom = 'none';
	document.getElementById(id).style.borderBottomColor = '';
	document.getElementById(id).style.borderBottomStyle = 'none';
	document.getElementById(id).style.borderBottomWidth = '0';
	document.getElementById(id).style.borderColor = '';
	document.getElementById(id).style.borderLeft = 'none';
	document.getElementById(id).style.borderLeftColor = '';
	document.getElementById(id).style.borderLeftStyle = 'none';
	document.getElementById(id).style.borderLeftWidth = '0';
	document.getElementById(id).style.borderRight = 'none';
	document.getElementById(id).style.borderRightColor = '';
	document.getElementById(id).style.borderRightStyle = 'none';
	document.getElementById(id).style.borderRightWidth = '0';
	document.getElementById(id).style.borderStyle = 'none';
	document.getElementById(id).style.borderTop = 'none';
	document.getElementById(id).style.borderTopColor = '';
	document.getElementById(id).style.borderTopStyle = 'none';
	document.getElementById(id).style.borderTopWidth = '0';
	document.getElementById(id).style.borderWidth = '0';
}

None of it works for IE. In Firefox, it seems to work fine, but IE, nothing happens.

-----

_brian.

 

[adam0101]

Works for me, even using just the first line. What version of IE are you using? Are you sure you're passing in a string for the id and not an object instance?

Adam

http://adameslinger.blogspot.com/

 

[bdichiara]

I'm using IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 (128-bit Cipher Strength)

I've looked at the source to make sure and yeah, the function reads as:

onclick="hideBorder('main')"

I don't get it. I've tried putting an alert at the beginning and end of the function and both of those work as well.

There's an anchor on my page with the same value for "name", do you think that would interfere?

-----

_brian.

 

[cLFlaVA]

with the same value for "name"

did you happen to notice that you're calling the [tt]getElementById[/tt] function? give your element an appropriate ID, and your code will work.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bdichiara]

Sorry, maybe I mis-spoke before, but I am referencing my item's ID with (main). All I was saying is there is another element on my page and its "name" value is also main. I was wondering if for some reason that might not interfere. Remember, I have this working in Firefox, so there shouldn't be anything seriously wrong with the code, I probably need something to help cater to IE's logic.

-----

_brian.

 

[cLFlaVA]

i can't help you any more without seeing an actual link to your page with the problem, or your ACTUAL code.

maybe someone else can.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bdichiara]

JAVASCRIPT:

function hideBorder(id){
    document.getElementById(id).style.border = 'none';
    document.getElementById(id).style.borderBottom = 'none';
    document.getElementById(id).style.borderBottomColor = '';
    document.getElementById(id).style.borderBottomStyle = 'none';
    document.getElementById(id).style.borderBottomWidth = '0';
    document.getElementById(id).style.borderColor = '';
    document.getElementById(id).style.borderLeft = 'none';
    document.getElementById(id).style.borderLeftColor = '';
    document.getElementById(id).style.borderLeftStyle = 'none';
    document.getElementById(id).style.borderLeftWidth = '0';
    document.getElementById(id).style.borderRight = 'none';
    document.getElementById(id).style.borderRightColor = '';
    document.getElementById(id).style.borderRightStyle = 'none';
    document.getElementById(id).style.borderRightWidth = '0';
    document.getElementById(id).style.borderStyle = 'none';
    document.getElementById(id).style.borderTop = 'none';
    document.getElementById(id).style.borderTopColor = '';
    document.getElementById(id).style.borderTopStyle = 'none';
    document.getElementById(id).style.borderTopWidth = '0';
    document.getElementById(id).style.borderWidth = '0';

}

DIV

<div id="main" style="float:left; padding: 5px; border:1px solid #CDCF00; background-color:#FEFFBF;">
    my text is here.
</div>

LINK

<span id="hider"> - <a onclick="hideBorder('main');" style="cursor: pointer; text-decoration:underline;">hide border</a></span>

-----

_brian.

 

[cLFlaVA]

wow... that's very odd.

make the name something other than "main".



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

IE recognizes your other element named main, not the element with ID main.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bdichiara]

holy crazy. that is weird. Why do you think IE does that? Well, that worked, thanks cory.

-----

_brian.