[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 ) 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
CSS

CSS Code:

Show Hide

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..

Show Hide

Firefox

Internet Explorer

+rep to all who help

[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 )

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 )

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