DankaShine
06 Jun 2006, 03:48 PM
Okay, I'm <a href="http://chandelleproductions.com/new" target="_blank">really stumped</a>.
In IE: it looks perfect, except that there is a huge gap between the end of the main content area and the footer. I have no clue why. I've included heights, removed all heights, there's no bottom positioning, it doesn't make sense.
In Firefox: same thing, except on top of that, the main content area's background doesn't repeat after a certain point. Why?
/* Overall CSS */
* {
margin: 0;
padding: 0;
}
body {
background: #464646 url(images/mainbg.jpg) repeat-x fixed 0 0;
margin: 0;
padding: 0;
text-align: center;
color: #4b4552;
font-family: georgia, garamond, times new roman, serif;
font-size: 15px;
}
div {
padding: 0;
margin: 0;
}
img {
border: 0;
}
p {
line-height: 18px;
padding-bottom: 15px;
}
/* CSS For the Main Layouts */
#contentContainer {
width: 800px;
margin:0 auto;
position: relative;
top: 190px;
text-align: center;
}
#mainContent{
margin: 0;
width: 800px;
text-align: left;
background:url("images/repBg.jpg") repeat-y;
}
#header
{
min-width: 800px;
width: 100%;
position: absolute;
top: 25px;
left: 0px;
height: 233px;
text-align: center;
}
.center {
text-align: center;
}
#menu {
position:relative;
top: 0;
z-index: 1;
font-size: 15px;
height: 25px;
margin:0 auto;
left: 140px;
}
#menu ul {
margin:0;
padding:1px 10px 0;
list-style-type:none;
}
#menu li {
float:left;
background:url("images/tabLeft.gif") no-repeat left bottom;
margin:0;
padding: 0 1px 0 10px;
list-style-type:none;
}
#menu a {
float:left;
display:block;
width:.1em;
background:url("images/tabRight.gif") no-repeat right bottom;
padding: 2px 16px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#menu > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a {float:none;}
/* End IE5-Mac hack */
#menu a:hover {
color:#333;
}
#home #nav-home, #about #nav-about,
#services #nav-services, #entertainers #nav-entertainers,
#contact #nav-contact, #links #nav-links {
background-position: left top;
padding: 0 1px 0 10px;
}
#home #nav-home a, #about #nav-about a,
#services #nav-services a, #entertainers #nav-entertainers a,
#contact #nav-contact a, #links #nav-links a {
background-position: right top;
padding: 2px 16px 4px 6px;
color:#333;
}
#menu li:hover, #header li:hover a {
background-position: left top;
padding: 0 1px 0 10px;
color:#333;
}
#menu li:hover a {
background-position: right top;
padding: 2px 16px 4px 6px;
}
#footer {
width: 800px;
background:url("images/bottomBg2.jpg") no-repeat;
font-size: 12px;
clear: both;
}
#topMain {
z-index: 0;
}
#text {
position: relative;
top: -446px;
z-index: 45;
padding: 0 65px 15px 50px;
}
#contentBar {
float: right;
width: 450px;
padding: 0;
top: 0;
position: relative;
}
#sidebar {
float: left;
width: 200px;
text-align: center;
top: 0;
position: relative;
}
blockquote.withquote {
color: #4e0473;
font-size: 21px;
line-height: 20px;
padding-bottom: 20px;
}
#sidebar h3 {
font-size: 14px;
font-weight: bold;
text-align: left;
line-height: 16px;
padding: 15px 0 0 12px;
}
#sidebar h2 {
font-size: 15px;
font-weight: bold;
text-align: left;
line-height: 17px;
padding: 0 0 10px 12px;
}
#sidebar p {
font-size: 12px;
line-height: 15px;
text-align: left;
padding: 0 0 10px 12px;
}
#sidebar img {
border: 0px;
padding: 10px;
}
#sidebar ul {
text-align: left;
}
h2 {
font-size: 17px;
line-height: 20px;
padding-bottom: 8px;
padding-top: 15px;
}
h3 {
font-size: 15px;
line-height: 18px;
padding-bottom: 8px;
padding-top: 15px;
}
ul {
padding-left: 50px;
font-family: georgia, garamond, times new roman, serif;
}
Any help is much appreciated. I've tried margins, paddings, heights, nothing has worked so far. I don't know what on earth is going wrong. Thanks!!
In IE: it looks perfect, except that there is a huge gap between the end of the main content area and the footer. I have no clue why. I've included heights, removed all heights, there's no bottom positioning, it doesn't make sense.
In Firefox: same thing, except on top of that, the main content area's background doesn't repeat after a certain point. Why?
/* Overall CSS */
* {
margin: 0;
padding: 0;
}
body {
background: #464646 url(images/mainbg.jpg) repeat-x fixed 0 0;
margin: 0;
padding: 0;
text-align: center;
color: #4b4552;
font-family: georgia, garamond, times new roman, serif;
font-size: 15px;
}
div {
padding: 0;
margin: 0;
}
img {
border: 0;
}
p {
line-height: 18px;
padding-bottom: 15px;
}
/* CSS For the Main Layouts */
#contentContainer {
width: 800px;
margin:0 auto;
position: relative;
top: 190px;
text-align: center;
}
#mainContent{
margin: 0;
width: 800px;
text-align: left;
background:url("images/repBg.jpg") repeat-y;
}
#header
{
min-width: 800px;
width: 100%;
position: absolute;
top: 25px;
left: 0px;
height: 233px;
text-align: center;
}
.center {
text-align: center;
}
#menu {
position:relative;
top: 0;
z-index: 1;
font-size: 15px;
height: 25px;
margin:0 auto;
left: 140px;
}
#menu ul {
margin:0;
padding:1px 10px 0;
list-style-type:none;
}
#menu li {
float:left;
background:url("images/tabLeft.gif") no-repeat left bottom;
margin:0;
padding: 0 1px 0 10px;
list-style-type:none;
}
#menu a {
float:left;
display:block;
width:.1em;
background:url("images/tabRight.gif") no-repeat right bottom;
padding: 2px 16px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#menu > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a {float:none;}
/* End IE5-Mac hack */
#menu a:hover {
color:#333;
}
#home #nav-home, #about #nav-about,
#services #nav-services, #entertainers #nav-entertainers,
#contact #nav-contact, #links #nav-links {
background-position: left top;
padding: 0 1px 0 10px;
}
#home #nav-home a, #about #nav-about a,
#services #nav-services a, #entertainers #nav-entertainers a,
#contact #nav-contact a, #links #nav-links a {
background-position: right top;
padding: 2px 16px 4px 6px;
color:#333;
}
#menu li:hover, #header li:hover a {
background-position: left top;
padding: 0 1px 0 10px;
color:#333;
}
#menu li:hover a {
background-position: right top;
padding: 2px 16px 4px 6px;
}
#footer {
width: 800px;
background:url("images/bottomBg2.jpg") no-repeat;
font-size: 12px;
clear: both;
}
#topMain {
z-index: 0;
}
#text {
position: relative;
top: -446px;
z-index: 45;
padding: 0 65px 15px 50px;
}
#contentBar {
float: right;
width: 450px;
padding: 0;
top: 0;
position: relative;
}
#sidebar {
float: left;
width: 200px;
text-align: center;
top: 0;
position: relative;
}
blockquote.withquote {
color: #4e0473;
font-size: 21px;
line-height: 20px;
padding-bottom: 20px;
}
#sidebar h3 {
font-size: 14px;
font-weight: bold;
text-align: left;
line-height: 16px;
padding: 15px 0 0 12px;
}
#sidebar h2 {
font-size: 15px;
font-weight: bold;
text-align: left;
line-height: 17px;
padding: 0 0 10px 12px;
}
#sidebar p {
font-size: 12px;
line-height: 15px;
text-align: left;
padding: 0 0 10px 12px;
}
#sidebar img {
border: 0px;
padding: 10px;
}
#sidebar ul {
text-align: left;
}
h2 {
font-size: 17px;
line-height: 20px;
padding-bottom: 8px;
padding-top: 15px;
}
h3 {
font-size: 15px;
line-height: 18px;
padding-bottom: 8px;
padding-top: 15px;
}
ul {
padding-left: 50px;
font-family: georgia, garamond, times new roman, serif;
}
Any help is much appreciated. I've tried margins, paddings, heights, nothing has worked so far. I don't know what on earth is going wrong. Thanks!!