Annoying HTML border problem

**wurzel** · 11 February 2013, 14:25

Originally posted by xoggoth View Post

Got a pop up result box:

<div id="info" class="info" onclick="hideinfo();"
style="z-index:16; visibility:hidden; background:white; padding:10px; border:3px solid red;
position:absolute; font-size:30px; line-height:30px;
left:216px; top:175px; width:400px; height:405px;">Correct! etc...</div>

When required, this is made visible in JS:

document.getElementById("info").style.visibility = "visible";

For some wierd reason, the first time this is set to visible in IE9, all or part of the border is missing. It's ok on 2nd or subsequent times in IE. It's always ok in Firefox etc and has a normal border if the element is set to visible in the HTML. Nowt else is being done to it in the jscript.

Any brill ideas? Ta.

What happens when you use display instead of visibility?

**xoggoth** · 11 February 2013, 14:50

Cheers for comment but can't get display:none to work. Then jscript halts with no error shown!

Noticed size looks slightly different on 2nd click. PS Have found a daft solution, set height to 1 pixel less than it should be then set it to what it should be on showing.

**wurzel** · 11 February 2013, 15:00

I have to confess that I use jquery these days & just do something like $(control).toggle() but IIRC that is just switching the display attribute between display:block & display:none

**xoggoth** · 11 February 2013, 15:07

Ah! You obviously saw my previous thing when I said I had ballsed it up by duplicating the element. Actually I hadn't, I did that when I tried out the display thing, so it was my comment on that was the ballsed up bit. Anyway, cheers again.

Jquery appears very powerful, it's just that when doing the stuff I do, much of it not usual stuff, it's too complicated to look through an enormous library on the odd occasions when things don't work.

**jmo21** · 11 February 2013, 15:08

Originally posted by xoggoth View Post

document.getElementById("info").style.visibility = "visible";

My first thought is why are you not using JQuery to do this kind of stuff.

Code:

$('#info').hide();

**xoggoth** · 11 February 2013, 16:31

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

It's no problem assigning elements or their properties to a shorter variable name or a set of them to an array in jscript.

**Bunk** · 11 February 2013, 16:40

Originally posted by xoggoth View Post

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

One of the main benefits of jQuery was that it allowed you to select elements using CSS selectors instead of just getElementById and getElementsByTagName. That's less of a benefit now that you can use getElementsByClassName and querySelectorAll although as usual IE support is patchy.

**d000hg** · 11 February 2013, 17:55

Originally posted by xoggoth View Post

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

It's no problem assigning elements or their properties to a shorter variable name or a set of them to an array in jscript.

It's abstracting things... for all you know on one browser it maps directly to setting a property but on another to a whole wodge of nasty DOM/JS.

I'd echo that it's worth getting to grips with if you're not an expert HTML/CSS guy to start with (which seems not to be the case) as it will save you time down the line. Plus it's good to have on your CV

**xoggoth** · 11 February 2013, 19:53

Plus it's good to have on your CV

Probably right in general, though bit past needing things on my CV personally.

Annoying HTML border problem