[CSS] Problem.. +rep

[Blinger1]

Hello everyone.
I am new to CSS, and am having a stupid problem!
I have a layout (designed/coded blahblah by me, yes it is simple :P) in CSS/DIVS but there is a huge problem..

Anyway, the main problem is that it works fine in I.E but not in Firefox.
In Firefox just below and above the writing boxes there are huge white gaps that shouldn't be there.. But i dont know how to remove them..

Can anybody help me with this problem? Here is a link to the site:
Site (http://freyta.100webspace.net/)
CSS
(http://freyta.100webspace.net/css/styles.css)
CSS Code:


body{
background-color:#CCFF00;
}


#content {
width: 800px;
background-color:#FFFCD5;

position:absolute;
top: 50%;
left: 50%;

margin-top: -300px;
margin-left: -400px;
}
.clear {
clear: both;
}
#top {
background-image:url(../images/images_01.jpg);
width: 800px;
height: 27px;
}
#leftside {
background-image:url(../images/images_02.jpg);
width: 27px;
height: 573px;
float: left;
}

/*Start navigation*/
#nav {
width: 172px;
float: left;

}
#nav-head {
background-image:url(../images/images_03.jpg);
width: 172px;
height: 19px;
float: left;

}
#nav-middle {
background-image:url(../images/images_09.jpg);
width: 172px;
}
#nav-bottom {
background-image:url(../images/images_11.jpg);
width: 172px;
height: 11px;
}
/* End navigation */

/* Start latest-work */
#latest-gap {
background-image:url(../images/images_12.jpg);
width: 172px;
height: 6px;
background-repeat: no-repeat;
}
#latest-box {
background-image:url(../images/images_12.jpg);
width: 172px;
background-repeat: no-repeat;
}
#latest-head {
background-image:url(../images/images_13.jpg);
width: 172px;
height: 19px;
}
#latest-middle {
background-image:url(../images/images_14.jpg);
background-repeat: repeat;
width: 172px;
}
#latest-bottom {
background-image:url(../images/images_15.jpg);
width: 172px;
height: 11px;
}
/* End latest-work */

/* Start middle */
#middle{
width: 365px;
float: left;

}
#left-box-content-gap{
background-image:url(../images/images_04.jpg);
float: left;
width: 4px;
height: 573px;
}
#middle-head {
background-image:url(../images/images_05.jpg);
width: 365px;
height: 19px;
}
#middle-middle {
background-image:url(../images/images_10.jpg);
width: 365px;

}
#middle-bottom {
background-image:url(../images/images_16.jpg);
width: 365px;
height: 11px;
}


Pictures if anyone prefers that..
Firefox
http://img337.imageshack.us/img337/7459/firefoxsitemw8.png
Internet Explorer
http://img257.imageshack.us/img257/5772/iesitela5.png


+rep to all who help :D

[Blob]

add overflow: hidden; to the div that has white space.

[Blinger1]

I think my main problem is.. I dunno which one it is?

Ill add it to them all, or does that ruin it?

[redtom]

I think my main problem is.. I dunno which one it is?

Ill add it to them all, or does that ruin it?

It should be pretty easy to see what div is causing it.

[Blinger1]

Yeah, i just added it to them all.. seems fine now :) (well, the head/bottom parts :D)

Also, is it just my coding or does this just not work?
If I have a <br> then it does not add the little indent? (sorry if this is noobish/annoying)



p{
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-indent: 10px;

}

[L?KE]

Yeah, i just added it to them all.. seems fine now :) (well, the head/bottom parts :D)

Also, is it just my coding or does this just not work?
If I have a <br> then it does not add the little indent? (sorry if this is noobish/annoying)



p{
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-indent: 10px;

}



It doesn't indent a <br />/<br> because you have styled the p tag ;)

[--ss--]

Add


p {
margin: 0px;
padding: 0px;
}

to your CSS ;)
Paragraph/header tags come with defualt padding and margins set to them so that's what's causing you problems ;).

[Blinger1]

It doesn't indent a <br />/<br> because you have styled the p tag ;)
Does that same even with a <br> tag...

[redtom]

Does that same even with a <br> tag...

Indent only indents the first line so if the first line is only <br /> then you will see no indent as <br /> is indented but it’s a line break so it’s not visibly indented, if you get my dift.

[L?KE]

I think what tom means is that it has to be visible content before it is indented?

If that makes it any easier :P

[Meti]

That happens to me too sometimes, when I want to create a new line, and press ENTER.
You have to press SHIFT + ENTER ;)

[L?KE]

That's only in a WYSIWYG editor rofl..