Blinger1
07-09-2008, 09:33 AM
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
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