div content shows when display:none - html

Question

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();
});
});

Answer 1

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