I have been looking for this problem for ages and entered your forums covering this subject with others but as they are personal to their sites it is difficult to relate to.
The background header image shows up fine in Safari but when i try the webpages in FF the image does not display. The site is a long way from finished but i need to sort this problem first. I have hosted it on my other site as I do not have a host for this site as yet.
@charset "utf-8";
body {
font-family:"Baskerville Old Face";
font-size:16px;
background: #101415;
margin: 0;
padding: 0;
color: #000000;
}
h1 {
color:#84be19;
}
#container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
#header {
width: 900px;
height: 215px;
}
#header .headerBackground2 {
float:left;
display:block;
width: 900px;
height: 180px;
background:url(../images/headerBackgroundtitle.jpg) no-repeat;
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 200px 40px 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
color:#FFFFFF;
text-align:right;
font-size:30px;
}
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
margin:20px 40px 20px 0;
}
#sidebar1 a, #mainContent a {
color:#84be19;
font-weight: bold;
}
#mainContent {
margin: 20px 70px 40px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
}
#footer {
height:90px;
background:url(../images/footerBackground.jpg) repeat-x left top;
}
#footer p {
padding-top:28px;
margin:0 240px 0 0;
text-align:center;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*begin main menu*/
#navcontainer {
margin:auto 0;
width:900px;
text-align:center;
}
#navcontainer ul {
padding: 0;
margin: auto 0;
background: url(../images/menuBackground.gif) repeat-x left top;
float: left;
width: 100%;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
color: #626161;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
font-size:16px;
padding:10px 25px;
}
#navcontainer ul li a:hover {
background: url(../images/menuBackgroundActive.gif) repeat-x left top;
color: #fff;
}
#navcontainer ul li #current {
background: url(../images/menuBackgroundActive.gif) repeat-x left top;
color: #fff;
}
/*end main menu*/
/* begin border corners*/
.t {background: #ffffff url(../images/dot.gif) 0 0 repeat-x;}
.b {background:url(../images/dot.gif) 0 100% repeat-x}
.l {background:url(../images/dot.gif) 0 0 repeat-y}
.r {background:url(../images/dot.gif) 100% 0 repeat-y}
.bl {background:url(../images/bl.gif) 0 100% no-repeat}
.br {background:url(../images/br.gif) 100% 100% no-repeat}
.tl {background:url(../images/tl.gif) 0 0 no-repeat}
.tr {background:url(../images/tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end border corners*/
/* begin news border corners*/
.n_t {background: #eeeeee url(../images/n_dot.gif) 0 0 repeat-x;}
.n_b {background:url(../images/n_dot.gif) 0 100% repeat-x}
.n_l {background:url(../images/n_dot.gif) 0 0 repeat-y}
.n_r {background:url(../images/n_dot.gif) 100% 0 repeat-y}
.n_bl {background:url(../images/n_bl.gif) 0 100% no-repeat}
.n_br {background:url(../images/n_br.gif) 100% 100% no-repeat}
.n_tl {background:url(../images/n_tl.gif) 0 0 no-repeat}
.n_tr {background:url(../images/n_tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end news border corners*/
/* start of lightbox styles*/
#lightbox{position: absolute;left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox2/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;}
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/* End of lightbox styles*/
[edited by: incrediBILL at 12:13 pm (utc) on Mar 15, 2010]
[edit reason] removed URL, see TOS #13 [webmasterworld.com...] [/edit]
