Odd problem

[Forge]

Hi im currently in the process of making IUS, ive been coding without a hitch until this little bugger of a problem popped up.
Im stuffed because i dont have a clue why its like this.

Problem


Index code

<div id='container'>

<div id='logo'></div>

<div id='boxtop'></div>

<div id='boxmid'>
<form action='process.php' enctype='multipart/form-data' method='POST'>
<input type='file' name='file' size='50' /><br /><br />
<input type='submit' name='submit' value='upload' />
</form>
</div>

<div id='boxbtm'></div>

</div>

CSS

#container {
width: 550px;
padding: 0;
text-align: left;
}

#logo {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
height: 80px;
}

#boxtop {
background-image: url('../images/boxtop.png');
background-repeat: no-repeat;
height: 30px;
}

#boxmid {
background-image: url('../images/boxmid.png');
background-repeat: no-repeat;
padding-left: 10px;
}

#boxbtm {
background-image: url('../images/boxbtm.png');
background-repeat: no-repeat;
height: 30px;
}

input {
border: 1px solid #004A7F;
padding: 3px;
font-family: trebuchet MS;
font-size: 13px;
color: #000000;
}

Thanks alot for reading
- Luke

[Hypertext]

Are you sure you have the right image/image sizes sure you trimmed your images?

[Forge]

The form is inside the boxmid div, the background should/is expanding but there is two gaps

[RichardKnox]

Add overflow: hidden; to boxmid.

[Forge]

Nothing happened

[Hypertext]

try giving your divs 100% height.

[Forge]

Thats got rid of the top gap but the gap around the submit button is still there

[[Oli]]

Have a try with this:

#container {
width: 550px;
padding: 0;
text-align: left;
}

#logo {
position: relative;
float: left;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
height: 80px;
width: 550px;
}

#boxtop {
position: relative;
background-image: url('../images/boxtop.png');
background-repeat: no-repeat;
height: 30px;
float: left;
width: 550px;
}

#boxmid {
position: relative;
float: left;
background-image: url('../images/boxmid.png');
background-repeat: no-repeat;
padding-left: 10px;
overflow: hidden;
width: 550px;
}

#boxbtm {
position: relative;
float: left;
background-image: url('../images/boxbtm.png');
background-repeat: no-repeat;
height: 30px;
width: 550px;
}

input {
border: 1px solid #004A7F;
padding: 3px;
font-family: trebuchet MS;
font-size: 13px;
color: #000000;
}

[Forge]

Nope, doesnt work. see what i mean? Bloody odd problem!

[DeejayMachoo$]

Try..

#boxmid {
background-image: url('../images/boxmid.png');
padding-left: 10px;
}