div content shows when display:none


Tags: html,css

Problem :

I have a couple of divs that I only show after a certain action. Like a message for validation. For this one there are a couple of messages in one div, and I want them to be a couple of pixels apart. I know how to do it, but when I change the css you can see a part of the content without clicking the submit button.

With this code everything is okay, except I want the messages to be some pixels apart (padding-top: 5px or something) but when I do that you always see the padding I added, even on display: none.

My div:

<div id="fout"></div>
</div>

Style:

#fout
{
    display:none;
    margin-left:-75px;
    display:block;
    font-size:15px;
    background-color:#D73033;
    width:350px;
    font-family:"Myriad Pro";
    color:#FFFFFF;
    text-align:center;
    border-radius:2px;
}

Here is my jquery just in case you need it:

 $(function(){

        // initialisatie formulier validatie. (validate.min.js)
        var validator = new FormValidator('form', [{
            name: 'voornaam',
            display: 'Voornaam',    
            rules: 'required'
        }, {
            name: 'achternaam',
            display: 'achternaam', 
            rules: 'required'
        },{
            name: 'telefoonnummer',
            display: 'telefoon', 
            rules: 'required|numeric'
        },{
            name: 'email',
            display: 'email', 
            rules: 'required|valid_email'
        }], function(errors, event) {
            var berichten = document.getElementById('fout');
            $("#fout").css("display","none"); 
            $("#fout").fadeIn('slow').css;

            berichten.innerHTML = '';

            // als er fouten zijn:
            if (errors.length > 0) {
                for (var i = 0, l = errors.length; i < l; i++) {
                    berichten.innerHTML += errors[i].message + '<br>';
                }
            // als de validatie goed gegaan is:
            } else {
                var voornaam = $('#voornaam').val();
            var achternaam = $('#achternaam').val();
            var telefoonnummer = $('#telefoonnummer').val();
            var email = $('#email').val();

            $.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam,    telefoonnummer:telefoonnummer, email:email},function(res){
                $('#result').html(res);
            });
        $('#insert').remove();


        $("#formpje").hide('slow').css;
        document.getElementById('goed').innerHTML = 'Verstuurd!';
        }

        // voorkom ten allertijde dat het formulier daadwerkelijk ge-submit wordt!
        event.preventDefault();
    });
});


Solution :

you have set :

    display:none;
    margin-left:-75px;
    display:block;

so display:block; overwrite display:none;

Remove display:block;

#fout
{
    display:none;  /* <-- 1st declaration */
    margin-left:-75px;
    display:block; /* <-- 2nd declaration which overwrites 1st declaration */
    font-size:15px;
    background-color:#D73033;
    width:350px;
    font-family:"Myriad Pro";
    color:#FFFFFF;
    text-align:center;
    border-radius:2px;
}

EDIT

As mentioned in the comments by abhitalks

this is also a problem :

$("#fout").css("display","none"); $("#fout").fadeIn('slow').css;

EDIT 2

to give space between the lines, give :

line-height:2em; in your #fout class!!

demo here


    CSS Howto..

    How to display print preview as same as the webpage using css?

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How to apply two CSS classes to a single div/span

    How to repeat multiple images over one element using CSS

    HTML/CSS: how to put text both right and left aligned in a paragraph

    How to get rid of spaces with CSS

    How to add a background Image using CSS that looks like a border down each side of a div

    How to create a fixed menu (links come from right to left) - HTML & CSS

    How to align text vertical CSS

    How to implement Read more / Read less in pure CSS

    How to specify max-height css property to Screen size

    how to make the osx-like border on css?

    How to make colspan work without affecting width of the other rows

    how to center background image in window resize

    Showing images next to paragraph

    How to set an Ionic list item height with a background image

    How to make like this gradient sun effect using CSS?

    CSS `will-change` - how to use it, how it works

    How do I get 3 horizontal divs to stack in different vertical order or flow when browser width decreases?

    Show hint over a CSS background image on mouse over

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    How to change social network icons colors in fixed menu?

    My sidebar is not going to right of my page, but to my left. How do I fix this?

    How to create image curved using css or jquery (See picture)

    How to get logo to front layer

    How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

    How to fix on Mobile Devices? Custom CSS. (Wordpress)

    How to use CSS to replace or change text? [duplicate]

    CSS div border shows up, but is transparent

    How to translate html, css and js into one javascript (animation)