General Question

Vincentt's avatar

How can I hide HTML elements using just CSS?

Asked by Vincentt (7449 points ) June 8th, 2008

I’m trying to make sure a <div> is only displayed to users when their browser does not support CSS. For this, I’m looking for CSS rules that will do this for me.

Currently, I have a whopping two:
– display: none; (duh)
– width: 0; height: 0; overflow: hidden;

However, I need as many of these rules as possible, so any other suggestions are welcome :)

Observing members: 0 Composing members: 0

14 Answers

Breefield's avatar

visibility: hidden;
opacity: 0;

Vincentt's avatar

Excellent!

Though I should add that I do want browser compatibility, so opacity (which is new in CSS 3) isn’t what I’m looking for :)

Breefield's avatar

Opacity works in IE7 and FF2…so it’s…I’m not sure…haha.

Vincentt's avatar

Does it? And in IE6?

Breefield's avatar

IE6, nope. But one of the other methods up there will cover it. Mainly display: none;

Vincentt's avatar

Cool. It’s just that each method has to work as I want to interchange between all methods.

Skyrail's avatar

The majority of browsers today support CSS, heck even IE3 did over a decade ago, I guess you’re setting this up for what, a small phone browser? Even then they have limited CSS supoprt I’m sure. I’m just interested in seeing what this is about hehe.

Vincentt's avatar

@Skyrail – actually, it’s just for modern browsers.

What I’m doing is adding an input field to a web form that needs to be left empty – if there’s something in it then it’s a bot. Since most bots understand <input type=“hidden”> that can’t be used. CSS can be used to hide that input element and a label saying the element should be left empty, so real people won’t even know it’s there, and if they do, they’ll leave it empty.

A bot, however, will fill it in so I know it’s spam.

The reason I want different styling rules is so I can alternate between them so even if bots support “display: none;” there’s also a change that it will be hidden using other methods.

Skyrail's avatar

Ah that is quite ingenious, is this a simpler alternative to using a capatcha? Although capatcha’s do slow web page loading times down noticibly on slower servers :) Thanks for enlightening me :)

Vincentt's avatar

Well, I didn’t think of it myself, of course :P

I believe it’s often called a “Reverse Captcha” (at least that’s what I named it in my personal library) and it’s primary advantage is that it does not require user intervention and is easy to create. With a normal captcha, the visitor needs to prove he is a human, with a reverse captcha, the bot will prove that he is a bot – the user needn’t know anything about it. And I suppose it’s faster too.

It’s very rudimentary though, and probably won’t hold the spambots out for long.

stephen's avatar

position:absolute;
left:-1000000000000px; (or)
top:-1000000000000px;

or change the z-index,and position,taht make one other ele be over it

Perchik's avatar

Interesting topic, I’d be willing to see this subjected to various bots to see if it actually is effective. Captchas are getting to the point that it’s often hard to prove you’re human due to the extreme distortion required to fool the computers. I’m going to research the subject, but this would be a great solution!

Breefield's avatar

I’ve seen capachas that ask you to do simple math, like 2 * 3 + 5. I don’t know much about how bots work, but would that work too?

Vincentt's avatar

@Perchik – it isn’t as effective as a captcha, but it’s a lot better than nothing and if it doesn’t help, it doesn’t do any harm either :)

@Breefield – that will also work quite well (though also not as good as a real captcha). It has the advantage of being easier than good captcha, but compared to a reverse captcha it still requires the user to do something else than comment (i.e. calculate the answer) while a reverse captcha doesn’t require the user to do anything.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther