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
http://img108.imageshack.us/img108/6100/whileinsertingformwl7.png

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

[Forge]

That just brings the top gap back

[Hypertext]

try removing the submit button and then going back into it and adding it again, namely to see if anything expandable is going wrong.

[Forge]

huh? delete the code and then add it again?

[[Oli]]

huh? delete the code and then add it again?

This is what I'd do, but I dont have a good view at it as I don't have the images etc:

html (modified):


<div id="container">

<div id="logo"></div>

<div id="boxtop"></div>

<div id="boxmid">
<div id="boxmid_content">
<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>

<div id="boxbtm"></div>

</div>


css:


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

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

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

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

#boxmid_content{
position: relative;
width: 500px;
padding-left: 25px;
}

#boxbtm {
position: relative;
float: left;
width: 550px;
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;
}

[Forge]

Its just moved the form a few pixels to the right, the gaps still there.
P.S. thanks alot for the help everyone ;)

[[Oli]]

Its just moved the form a few pixels to the right, the gaps still there.
P.S. thanks alot for the help everyone ;)

hmm.. Can you send me the images ? or links to them.

(edit: only the images from container right, so top mid btm)

[Forge]

Sure, ill come on msn

[[Oli]]

Okay, I guesse everyone looked over this, but your mid image was set to no-repeat... might wanna set it to repeat-y :p

html:


<div id="container">

<div id="logo"></div>

<div id="boxtop"></div>

<div id="boxmid">
<div id="boxmid_content">
<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>

<div id="boxbtm"></div>

</div>





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

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

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

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

#boxmid_content{
position: relative;
width: 500px;
padding-left: 25px;
}

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

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

[Forge]

I just spotted that as you said lmao! no wonder nobody could fix it!