CSS styling for error messages

Question

I have a div which has php code to echo out errors on a page, I want to add some style to error appearance which is going well except one problem, every attribute works fine but padding seems to be their even when errors are not called I am using javascript to call errors though the error message is called only when their is some error but padding for error div is always there on the page. How to solve it out.

<div id="error"><?php echo $error; ?></div><br />

<style>
#error {
font-size:
background-color:
opacity:
color:
padding:
}
</style>

Answer 1

since your php code is embedded in your div tag , definitely whether the error is called or not does'nt matter. The padding will still be there. Apply the div within your php code, or just the padding css style in your php code.

Answer 2

Before calling #error write css like this

#error {
font-size:
background-color:
opacity:
color:
padding:
display:none;
}

Now when you are call that #error then make css as

#error {
display:block;
}

Now it will not take any space if error message is not there