Hide something with CSS without display:none or JavaScript

Question

How can I hide the div without using display:none or JavaScript?

In my country, a lot of Blackberrys come with the CSS support disabled (the mobile companies here are not so good to developers). I have text that says

<div class="BBwarn">
please activate your css support and a link
</div>

I want to hide that once the user activates CSS support, but i can't use display:none; because it is only supported in BB firmware 4.6. It is a public site and I can't make all my visitors upgrade.

Does anybody knows a solution to this? I hope the question is easier to understand now.

Update: Thank you all for the answers but I can't use

• position:absolute
• overflow

because they are available from Blackberry firmware 4.6 and up

Ruppert

I know you want a javascript-free solution but I can't help but wonder why can't you just remove the element from the DOM tree with javascript? – Protero

javascript comes disabled by default in the same phones – Ruppert

Answer 1

things to try:

• use the z-index to put it behind some other element
• move it off the screen by absolute positioning
• visbility: hidden
• make the content "invisible" by setting background to foreground color (works only for text)
• opacity: 0

but the real question is: why?

Gilbreath

because i want the warning to disapear once you have activated css – Ruppert

I use it for clipboard copying, I need selectable element but hidden element is not selectable. that's why. – Nilla

Another reason why would be fore accessibility. – Wynd

Why? The datetime-local input has a horrible datetime formatting [without any chance to change it] but the control is very nice. So, it would be stupid just because of the formatting to reinvent the wheel. If you hide the input with display|visibility then you cannot trigger it with the click event to show it. Therefore with this trick the control shows up, the user can make his selection and the value is saved back into the input tag. When I catch the onchange event I can format my personalized datetime field with how ever I want. – Cinder

offsetHeight returns 0 when display:none – Cornaceous

Answer 2

This is a common way:

margin-left: -9999;

Christenechristening

in that case replace the text in the div: <div class="BBwarn"> please upgrade your device if you want this to go away </div> and make it bold red and blinking (if that works) :D – Christenechristening

Answer 3

How about:

  visibility: hidden;

That should hide the DIV, (note how it will still be rendered but be invisible, that means it will take space in the document as if it was visible, but be invisible (unlike display:none; where the div will not be rendered)).

Lagting

See comments by mfx and myself above. – Croce

Yeah I noticed after posting. – Lagting

Answer 4

<div style="height:0;width:0;overflow:hidden;">
<!-- content here -->
</div>

Incidentally, this is what I do to preload images, which is nice because it doesn't use javascript.

Visibility:hidden won't do the same thing because some browsers are smart and won't make the request unless it thinks its actually visible.

Sagittal

i don't understand why this is better than using javascript? if someone without JS comes to your site, they'll download a heap of images they'll never see (presuming these images are used for rollovers, lightboxes, etc) – Scatology

Answer 5

Why not try the simple:

position: absolute;
left: -1000px;

I can't see why it wouldn't work.

Porterfield

You can't use position in firmware previous to 4.6 but thanks – Ruppert

Make it -10000px for sure ;) – Nonmetallic

Answer 6

I'm not sure of the percentages you're talking about that are using < 4.6, but if it's that important to you, then I can see a rationale for accepting that you can't please all the people all the time, and an acceptable cascading solution to this should be achievable. Probably with a link to explain the benefits of upgrading and enabling css.

height: 0; 
overflow: hidden;
visibility: hidden; 
color: #fff; 
background: #fff; 

BTW - you'd better make sure that you're css is good if you're telling someone to turn it on... :-)

Dissonant

Nice -- didn't think of using color/background-color! Maybe toss in font-size: 1px;? – Niall

@Niall - I think the main thing here though is that you should consider how important this is. If it's that important, then having a link to it for some users who already have css enabled shouldn't be that big a deal if it's explained to them – Dissonant

@Steve Perks I am considering it but it is the last resource. – Ruppert

Answer 7

What makes you think display: none is not supported before version 4.6? Did you test that, or are you going by their documentation?

I'm not a mobile developer either, so I'm just going by what I gleaned from the documentation.

The BlackBerry Browser 4.6 CSS Reference indeed mentions "Availability: BlackBerry® Device Software version 4.6 or later" for the display property, but their BlackBerry Browser 4.3 Content Developer Guide indicates that 4.3 already supported a very limited version of the display property, including display: none. Versions before 4.3 don't support the display property (again, going by the BlackBerry Browser developer documentation).

Can you assume your users do at least have firmware version 4.3, or is that just as unacceptable as assuming they have 4.6?

Have you tried simply setting the width and height to zero? I'm not familiar with the BlackBerry (Browser), but I'm sceptically assuming its CSS support is less than perfect, certainly on the older versions. I wouldn't be surprised if this worked:

.BBwarn {
    display: none; /* for 4.6 and up */
    width: 0px;    /* for 4.3 */
    height: 0px;
}

But then width and height are only supported on all elements starting from version 4.3. Before that they could only be applied to <button> and <img> tags and some <input> types (according to the documentation).

So perhaps the safest way to really make it work on all BlackBerry firmware versions is to use an image for the warning, and use CSS to set its width and height to zero.

If an image is not an option (due to lozalization issues or so, perhaps), an ugly hack might be to specify an empty/illegal image source and put the warning text in the alt attribute. I don't know if setting its width and height to zero would still hide that alt text then.

Summersault

Answer 8

visibility: hidden; will work, but the space taken up by that particular div will still appear. If you are going to use the negative left-margin method, remember that you will need to set the object's position to absolute.

Croce

Answer 9

How about this:

clip: rect(0,0,0,0);

Note: Please note the clip property does not work if "overflow:visible" is used.

In your case:

<div class="BBwarn">
  please activate your css support and a link
</div>

just add this css:

.BBwarn{
  position: absolute;
  clip: rect(0,0,0,0);
}

Optometrist

Answer 10

You could position it absolutely off the screen.

But I, also, am not a mobile developer.

Evonevonne

I don't know how to do that without using margin – Ruppert

Answer 11

I assume You don't want to use JavaScript because the Blackberrys don't support it.

What about if you did the opposite and displayed the block of code with JavaScript, rather than tried to hide it?

<script type="text/javascript"><!--
document.open();
document.writeln('<div class="BBwarn">');
document.writeln('please activate your css support and a link');
document.writeln('</div>');
document.close();
//--></script>

This is a bit of a hack, but would not display the text with disabled JavaScript...

Croce

Your solution doesn't work because I want to show the warning to phones with css and javascript disabled . Thanks anyway. – Ruppert

Answer 12

You can do something like wise:

.class{
opacity:0; overflow:hidden; visibility: hidden; height:0;
}

for being more precise you can add :

color:transparent; background-color:transparent;

Darya

Answer 13

What exactly is wrong with (the earlier mentioned)

width: 0 height:0 visibility: hidden

Labrador

Answer 14

width: 0 height:0 visibility: hidden

...Does not always work with firmware 2.2 and older. Sometimes you can get an element to be hidden, but it will reappear with certain keystrokes (like underscore, for instance).

Bolme

Answer 15

Or you could use Please enable Javascript

And use an image that reads "Enable CSS" and style it using "display:none".

So that whenever the corresponding feature is enabled these warnings wont show.

Alternately, I presume you are using some server side code? You could try detecting for the most common known platforms that support specific versions of css/javascript and deliver content accordingly. You might not even have to write it all yourself.

Frobisher

Answer 16

I had a similar problem when I was trying to customize a select box using javascript in BlackBerry Curve 8530 (OS 5.0). But, the menu created couldn't be hidden because the css following properties still don't work:

display
overflow
position: absolute
visibility
z-index

And destroying and recreating the HTML elements didn't work either, so I got here and could solve my problem. I know my answer isn't exactly about the question raised here, but once I got here when had problems, I think I'm not the only one with it happened and is going to.

Anyway, even if those css properties worked, what I needed was some code that could work on the most of the BB models.

My solution was made using all the answers found here. It was simple. I made two classes:

.element
{
    width: 100px;
    height: 100px;
    font-size: 12px;
    color: black;
    background-color: transparent;
    border: 1px solid black;
}
.element_hidden
{
    width: 0px;
    height: 0px;
    font-size: 0px;
    color: white;
    background-color: white;
    border: none;
}

Yes. I've made two of them for each kind of element I had in my page. Initially, all classes are set to class="element_hidden", so when the mouse is over the select box menu, all the classes are changed to class="element" and they are shown and hidden as if they were made invisible/visible.

I hope this can be useful to someone! ;D

Maje

Answer 17

We can use the transform property to scale the element along the x and y axis.

. BBwarn{
   transform : scale(0,0);
}

Babettebabeuf

Unfortunately this doens't seem to work with say a span with text in it. – Hussite

Answer 18

I used font size to obtain this without using display none

font-size: 0px;

Sizzle

Answer 19

As you said in question that you need solution for Blackberry version below 4.6 and there are very few CSS properties supported for Blackberry version below 4.6 so we can use some sort of hack for this purpose. Try and set the text color to whatever the background is or set font-size to 0. It's a hack, but it makes it invisible. Run the following snippet and let me know if its works for you.

.alert1 {
    color: #fff; //3.8 or later
    
}

.alert2 {
    font-size: 0; //3.8 or later
}

<b>Alert1</b>
<div class="alert1">
please activate your css support and a link
</div>

<b>Alert2</b>
<div class="alert2">
please activate your css support and a link
</div>

Kelvinkelwen