In need of quick CSS help

EDIT: new small issue. I’ve got an email submit box but have no idea how to code it to actually work. Here’s an image:

What software do I use to make it functional? I have the dummy code from a template I found online but don’t know where to find a free solution.

Hey everyone, I threw up a quick "Coming soon" page for a school web project that we’re doing. I’ve got an email submit box but it’s located too far down below the header image. I can’t figure out for the life of me how to remove this gap. I can’t find anything in the code. If someone has a minute or two could you PM me? Don’t feel comfortable putting the domain on here since its got our names, etc.

why not copy the css code and paste in here without the names

Ok I’ll do that.

body {
background: #21211f;
width: 702px;
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
padding: 40px 0 0 0;
}

.header{
width: 702px;
float: left;
clear: both;
padding: 0;
margin: 0 0 10px 0;
}
.duck{
position: relative;
top: -110px;
width: 702;
float: right;
clear: both;
padding: 5px;
margin: 0 107 10px 0;
}
img.duck {
width: 18%;

}

h1 img{
float: left;
padding: 0;
margin: 0;
}

#content{
width: 612px;
background: #707070 url(images/corner.jpg) top right no-repeat;
line-height: 22px;
font-size: 18px;
font-family: Georgia, times, serif;
margin: 0 0 10px 0;
float: left;
clear: both;
color: #ffffff;
padding: 20px 60px 20px 30px;
}

a, a:visited{
text-decoration: none;
color: #666666;
}

a:hover, a:hover:visited{
text-decoration: none;
color: #FFFFFF;
}

img {
border: none;
}

p.copy {
float: left;
font-size: 12px;
color: #444444;
padding: 5px 0 5px 0;
}

p.social {
background: url(twitter.jpg) center right no-repeat;
float: right;
font-size: 12px;
color: #444444;
padding: 5px 30px 5px 0;
}

p.tagline {
font-family: georgia, times, serif;
font-style: bold;
float: left;
font-size: 18px;
color: #666666;
padding: 0px 42px 0 0;
}

.form{
margin: 15px 0;
padding: 20px 0 20px 0;
background: url(form1.jpg) no-repeat;
font-family: helvetica, arial, sans-serif;
}

.formname{
background: #FFFFFF;
font-family: helvetica, arial, sans-serif;
color: #000000;
padding: 10px;
border: 1px solid #30435D;
font-size: 18px;
margin: 0 15px 0 0;
width: 170px;
font-weight: bold;
}

.sendform{
background: #6288BC;
font-family: helvetica, arial, sans-serif;
color: #ffffff;
cursor: pointer;
font-size: 18px;
padding: 10px;
border: 1px solid #7DAEF0;
margin: 0 0 0 0;
font-weight: bold;
}

Here’s a screenshot of the header text and the top of the email submit box…pretty big gap

next time use code tags. Much easier to read

body {
    background: #21211f;
    width: 702px;
    font-family: helvetica, arial, sans-serif;
    margin: 0 auto;
    padding: 40px 0 0 0;
}
.header{
    width: 702px;
    float: left;
    clear: both;
    padding: 0;
    margin: 0 0 10px 0;
}
.duck{
        position: relative;
    top: -110px;
    width: 702;
    float: right;
    clear: both;
    padding: 5px;
    margin: 0 107 10px 0;
}
img.duck {
     width: 18%;
 }
h1 img{
    float: left;
    padding: 0;
    margin: 0;
}
#content{
    width: 612px;
    background: #707070 url(images/corner.jpg) top right no-repeat;
    line-height: 22px;
    font-size: 18px;
    font-family: Georgia, times, serif;
    margin: 0 0 10px 0;
    float: left;
    clear: both;
    color: #ffffff;
    padding: 20px 60px 20px 30px;
}
a, a:visited{
    text-decoration: none;
    color: #666666;
}
a:hover, a:hover:visited{
    text-decoration: none;
    color: #FFFFFF;
}
img {
    border: none;
}
p.copy {
    float: left;
    font-size: 12px;
    color: #444444;
    padding: 5px 0 5px 0;
}
p.social {
    background: url(twitter.jpg) center right no-repeat;
    float: right;
    font-size: 12px;
    color: #444444;
    padding: 5px 30px 5px 0;
}
p.tagline {
    font-family: georgia, times, serif;
    font-style: bold;
    float: left;
    font-size: 18px;
    color: #666666;
    padding: 0px 42px 0 0;
}
.form{
    margin: 15px 0;
    padding: 20px 0 20px 0;
    background: url(form1.jpg) no-repeat;
    font-family: helvetica, arial, sans-serif;
}
.formname{
    background: #FFFFFF;
    font-family: helvetica, arial, sans-serif;
    color: #000000;
    padding: 10px;
    border: 1px solid #30435D;
    font-size: 18px;
    margin: 0 15px 0 0;
    width: 170px;
    font-weight: bold;
}
.sendform{
    background: #6288BC;
    font-family: helvetica, arial, sans-serif;
    color: #ffffff;
    cursor: pointer;
    font-size: 18px;
    padding: 10px;
    border: 1px solid #7DAEF0;
    margin: 0 0 0 0;
    font-weight: bold;
}

All browsers. It was clearly a CSS code issue. Just threw in some shitty code that looked like:

position: relative;
top: -120px

For the table and a couple links under that. Never worked with CSS before today so it’s all pretty confusing but I’m getting the hang of it.

You should try and use the Developer Tools in Chrome to see what CSS styles are applied where the gap is. Just press CTRL+SHIFT+I in google Chrome and choose the magnifying glass icon at the bottom. Then click on the area where the gap is.

If you ask for my advice - It’s a bad idea to start ‘patching’ fixes like that because you will eventually get really messy code and any small change you make will mess up a lot of other stuff.