Rounded Corners with a <form>

Please see my website:
(site is in development phase)

http://www.hotpoconorentals.com/contact.php

Scroll to the box where I have the form.

I learned this method of rounded corners from the web a few months ago and I've been using it.

I think you can see the problem (The space between the form and the top of the box.

Here is the code:

HTML



<div id="contactform">
        <b class="c1"></b><b class="c2"></b><b class="c3"></b><b class="c4"></b>
                        <div class="contentc">
                <form action="<?php print $_SERVER['PHP_SELF']; ?>" method="POST">
                <input type="hidden" name="flag" value="1"></input>
                <div class="eaddress">Your Name: <input type="text" name="name"></input></div>
                <div class="eaddress">Your email: <input type="text" name="email"></input></div>
                <div class="eaddress">Your message: <textarea name="message"></textarea></div>

                <div id="smbutton"><input type="image" src="sendmessage.gif"></input></div>
                </form>
                </div>
        <b class="c4"></b><b class="c3"></b><b class="c2"></b><b class="c1"></b>
</div>




CSS


.c1, .c2, .c3, .c4{font-size:1px; overflow:hidden; display:block;}
.c1 {height:1px; background:#CAE4F1; margin:0 5px;}
.c2 {height:1px; background:#CAE4F1; border-right:2px solid #CAE4F1; border-left:2px solid #CAE4F1; margin:0 3px;}
.c3 {height:1px; background:#CAE4F1; border-right:1px solid #CAE4F1; border-left:1px solid #CAE4F1; margin:0 2px;}
.c4 {height:2px; background:#CAE4F1; border-right:1px solid #CAE4F1; border-left:1px solid #CAE4F1; margin:0 1px;}
.contentc {background: #CAE4F1; border-right:1px solid #CAE4F1; border-left:1px solid #CAE4F1;}
.contentc div {margin-left: 5px; color:#00578A;}
.contentc form {padding-top:0;};

Code (markup):

Why am I getting this space between the top of the form and the top part of the box? By the way, I only get this problem when there is a form in the box. If there is no form, then there is no problem.

Thanks for the help!!

 

Wouldn't it be easier to create the image of rounded corners, it would use a lot less markup?

Erm as for the gaps try adding this at the bottom of your CSS file.:

.contentc form { margin: 0; padding: 0; }

But you are using a lot of unnesscary DIVs and so on..

 

Thanks for the info!!!

I was trying to do a pure css rounded corners without using images.
It's something I saw on another website.

 

gets rid of the bottom space, but not the top

I'm 1/2 there!!

 

I suppose, but it depends how you look at it, your method is not using images, but more markup, so it depends what you prioritise as I guess no images have to load, but it's not minimal markup.

OK halfway there, how about adding:
.contentc { margin: 0; padding: 0; }

But I think you could have a margin set on your eaddress class which you haven't pasted.

 

Thanks!!

That was the problem!!!