PDA

View Full Version : my site is coming up black in firefox


silverglade
05-13-2009, 05:48 PM
i dont know why but my site is coming up black in firefox. any help greatly appreciated. thanks. derek


here is the site im talking about

http://derekvanderven.com/elegant_shoes/home.html

here is the css for the page

@charset "utf-8";
/* CSS Document */

#wrapper {
margin: 0 auto 0 auto;
width: 820px;
height: 650px;
background-image: url(new_images/black_slices/shoes_top.gif);
}
body {
background-color: #000000;
font-family: "Times New Roman", Times, serif;
margin: 0 ;
padding: 0;

}

#navigation{
width: 820px;
height: 76px;
margin-top: 574px;
}


#copyright {
margin: 20px auto 0 auto;
text-align:center;
color: #ffffff;
width: 820px;
height: 30px;
}

a:link {
color: #FFFFFF;

}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #FF0000;
}
a:active {
color: #FFFFFF;
}

p
{
text-indent: 20px;
}


/******************ABOUT CODE******************/

#about_wrapper {
margin: 0 auto 0 auto;
width: 819px;
height: 700px;
background-image: url(shoe_links/shoe_slice.gif);
background-repeat:repeat-y;
}
#about_header {
margin: 0 auto 0 auto;
width: 819px;
height: 81px;
background-image: url(about_black/images/about_header.jpg);
background-repeat:no-repeat;
}

#about_navigation {
margin:0 auto 0px auto;
width: 819px;
height: 60px;
}

#about_info {
margin: 50px auto 0 auto;
width: 400px;
height: 400px;
}





#about_background a {
color: red;
}


/****************SHOES CODE***************/
#shoes_wrapper {
margin: 0 auto 0 auto;
width: 820px;
height: 650px;
background-image: url(new_images/shoes/black_slices/shoes_top.gif);
background-repeat: no-repeat;
background-position:0 84px ;

}

#shoes_navigation {
margin:0 auto 0 auto;
width: 820px;
height: 84px;
}





/*******************ASPEN PAGE 1 CODE ************************/

#aspen1wrapper {

margin: 0 auto 0 auto;
width: 820px;
height: 780px;
background-image: url(aspen/background_slice.gif);
background-repeat:repeat-y;
}

#aspen1header {
width: 820px;
height: 87px;
background-image: url(aspen/page1/page1slices/images/aspen_page1_header.jpg);
background-repeat:no-repeat;
}

#aspen1navigation {
margin: 50px auto 0 auto;
width: 820;
height: 57;
}

#aspen1text {
width: 500px;
height: 150px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#aspen1text p {
text-indent-20px;
}
#aspen {
margin: 0 auto 0 auto;
width: 200px;
height: 20px;
text-align: center;
color: red;
}

#aspen_shoe_links {
width: 820px;
height: 350px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#bottom_links {
margin: 0 auto 0 auto;
width: 820px;
height: 20px;
text-align: center;
}

#bottom_links a {
color: blue;
}
/********************SOHO CODE***************/
#soho1text {
width: 500px;
height: 175px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#soho1text p {
text-indent-20px;
}
#soho_bottom_links {
margin: 60px auto 0 auto;
width: 820px;
height: 20px;
text-align: center;
}

#soho_bottom_links a {
color: blue;
}

/**************************LOCATION CODE************************/

#location {
margin: 0 auto 0 auto;
width: 200px;
height: 200px;
text-align: center;
color: black;
}

and here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--thanks to ladynred-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="elegant.css" rel="stylesheet" type="text/css"/>
<title>Elegant Shoes Home</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">

</style></head>

<body onload="MM_preloadImages('redslices/images/aboutred.jpg','new_images/red_slices/home_red.gif','new_images/red_slices/about_red.gif','new_images/red_slices/shoes_red.gif','new_images/red_slices/press_red.gif','new_images/red_slices/location_red.gif','new_images/red_slices/contact_red.gif')">

<div id="wrapper">

<div id="navigation"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','new_images/red_slices/home_red.gif',1)"><img src="new_images/black_slices/home_black.gif" name="Image1" width="142" height="76" border="0" id="Image1" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','new_images/red_slices/about_red.gif',1)"><img src="new_images/black_slices/about_black.gif" name="Image2" width="108" height="76" border="0" id="Image2" /></a><a href="shoes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','new_images/red_slices/shoes_red.gif',1)"><img src="new_images/black_slices/shoes_black.gif" name="Image3" width="112" height="76" border="0" id="Image3" /></a><a href="press.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','new_images/red_slices/press_red.gif',1)"><img src="new_images/black_slices/press_black.gif" name="Image4" width="112" height="76" border="0" id="Image4" /></a><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','new_images/red_slices/news_red.gif',0)"><img src="new_images/black_slices/news_black.gif" name="Image5" width="99" height="76" border="0" id="Image5" /></a><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','new_images/red_slices/location_red.gif',1)"><img src="new_images/black_slices/location_black.gif" name="Image6" width="119" height="76" border="0" id="Image6" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','new_images/red_slices/contact_red.gif',1)"><img src="new_images/black_slices/contact_black.gif" name="Image7" width="128" height="76" border="0" id="Image7" /></a></div>
</div>
<!-- end wrapper-->

</body>
</html>

silverglade
05-13-2009, 05:51 PM
nevermind, after about a half hour, i realized i had to add overflow: auto to my wrapper and delete the height again. when will i learn......

coloeagle
05-14-2009, 01:53 PM
Hello Derek,

Regarding the navigation, you are just changing the text color on mouseover.

Q - Why use images?

You should be using text and then use css to control the link behaviors.

silverglade
05-14-2009, 06:28 PM
darn i should have thought of that. im so tired of doing that site im going to have to quit on that one. i will remember for that the next time. thank you very much. boy thats going to slow my site down. oh well. :confused:

coloeagle
05-14-2009, 07:29 PM
Not sure what you mean about slowing your site down.
Try this out. Took me about 15 minutes to write the css and change the html.
Add this to your style sheet
#navigation{
text-align:center;
width: 820px;
height: 76px;
margin-top: 574px;
}
#navigation ul {
list-style-type:none;
margin:0;
padding:0;
}

#navigation ul li {
display:inline;
margin:0;
}

#navigation a {
text-decoration:none;
color:#000;
font:bold 1.4em Georgia, "Times New Roman", Times, serif;
padding:20px 10px;
}

#navigation a:hover,#navigation a:focus,#navigation a:active {color:#f00;}
Then the html will consist of the short and sweet;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--thanks to ladynred-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="elegant.css" rel="stylesheet" type="text/css"/>
<title>Elegant Shoes Home</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shoes.html">Shoes</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="news.html">News</a></li>
<li><a href="location.html">Location</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- end navigation-->
</div><!-- end wrapper-->
</body>
</html>

silverglade
05-14-2009, 08:58 PM
thank you for the code, i decided to take the time to redo the links like you said. i am having am having new problems with a box not going down ill post in a new post. thanks derek.