div содержимое показывает, когда отображается: нет

Question

У меня есть пара div, которые я показываю только после определенного действия. Как сообщение для подтверждения. Для этого есть несколько сообщений в одном div, и я хочу, чтобы они были на пару пикселей друг от друга. Я знаю, как это сделать, но когда я изменяю css, вы можете увидеть часть содержимого, не нажимая кнопку отправки.

С этим кодом все в порядке, за исключением того, что я хочу, чтобы сообщения были на несколько пикселей (padding-top: 5px или что-то еще), но когда я делаю это, вы всегда видите добавление, которое я добавил, даже на display: none.

Мой ДИВ:

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

Стиль:

#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; 
} 

Вот мой JQuery только в случае, если вам это нужно:

$(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

вы установили:

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

так display:block; перезаписать display:none;

Удалить 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

Как уже отмечался в комментариях по abhitalks

это тоже проблема:

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

EDIT 2

дать пространство между линиями, дают:

line-height:2em; в вашем #fout классе !!

demo here