PDA

View Full Version : copyright floating up, and black bar across page


silverglade
03-04-2009, 09:03 PM
hi, i have 1 problem on each page (2 pages). the first is, my white copyright notice is floating up the page in Firefox. and the second is, there is a black bar showing across my other page in Firefox . any help greatly appreciated. thanks. derek (when i try to add margin to the copyright div, it appears way to low in IE. and its also missing the image i put in the #bottom div on the shoes page)

the copyright div is #copyright, and missing bottom background is on this page

http://derekvanderven.com/Elegant_shoes/shoes.html

the page with the black bar across it is here

http://derekvanderven.com/Elegant_shoes/about.html

here is the css to both pages.

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

#wrapper {
margin: 0 auto 0 auto;
width: 820px;
height: 650px;
}
body {
background-color: #000000;
font-family: "Times New Roman", Times, serif;
}
#topshoes {
margin: 0 auto 0 auto;
width: 820px;
height: 246px;
background-image: url(mainshoes/images/topshoes.jpg);
background-repeat:no-repeat;
}

#middleshoes {
margin: 0 auto 0 auto;
width: 820px;
height: 302px;
background-image: url(mainshoes/images/middleshoes.jpg);
background-repeat:no-repeat;
}

#shoe_navigation {
width: 820px;
height: 120px;
float: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
clear: none;
}

#copyright {
margin: 0 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: 450px;
background-image: url(about_black/images/about_gradient.jpg);
background-repeat:no-repeat;
}
#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 0 auto;
width: 819px;
height: 60px;
}


#about_background {
margin: 0 auto 0 auto;
width:819px;
height: 450px;
background-image: url(about_black/images/about_background.jpg);
background-repeat:no-repeat;
}

#about_info {
width: 450px;
height: 450px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#about_info a {
color: red;
}


/****************SHOES CODE***************/
#shoes_wrapper {
margin: 0 auto 0 auto;
width: 820px;
height: 800px;

}
#shoes_header {
margin: 0 auto 0 auto;
width: 820px;
height: 81px;
background-image: url(shoe_links/links_black/images/top_header.jpg);
background-repeat:no-repeat;
}

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


#middle {
margin: 0 auto 0 auto;
width: 820px;
height: 171px;
background-image: url(shoe_links/links_black/images/middle.jpg);
background-repeat:no-repeat;
}
#shoe_links {
margin: 0 auto 0 auto;
width: 820px;
height: 59px;
}

#bottom {
margin: 0 auto 0 auto;
width: 820px;
height: 105px;
background-image: url(shoe_links/links_black/images/bottom.jpg);
background-repeat:no-repeat;

}



and here is the html to the copyright page

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="elegant.css" rel="stylesheet" type="text/css"/>
<title>Elegant Shoes -our shoes</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('shoe_links/links_red/images/aspen_red.jpg','shoe_links/links_red/images/nolita_red.jpg','shoe_links/links_red/images/chelsea_red.jpg','shoe_links/links_red/images/soho_red.jpg','shoe_links/links_red/images/hampton_red.jpg','shoe_links/links_red/images/home_red.jpg','shoe_links/links_red/images/about_red.jpg','shoe_links/links_red/images/shoes_red.jpg','shoe_links/links_red/images/press_red.jpg','shoe_links/links_red/images/news_red.jpg','shoe_links/links_red/images/location_red.jpg','shoe_links/links_red/images/contact_red.jpg')">

<div id="shoes_wrapper">
<div id="shoes_header"> </div>
<div id="shoes_navigation"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','shoe_links/links_red/images/home_red.jpg',1)"><img src="shoe_links/links_black/images/home_black.jpg" name="Image8" width="150" height="59" border="0" id="Image8" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','shoe_links/links_red/images/about_red.jpg',1)"><img src="shoe_links/links_black/images/about_black.jpg" name="Image9" width="108" height="59" border="0" id="Image9" /></a><a href="shoes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','shoe_links/links_red/images/shoes_red.jpg',1)"><img src="shoe_links/links_black/images/shoes_black.jpg" name="Image10" width="99" height="59" border="0" id="Image10" /></a><a href="press.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','shoe_links/links_red/images/press_red.jpg',1)"><img src="shoe_links/links_black/images/press_black.jpg" name="Image11" width="94" height="59" border="0" id="Image11" /></a><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','shoe_links/links_red/images/news_red.jpg',1)"><img src="shoe_links/links_black/images/news_black.jpg" name="Image12" width="100" height="59" border="0" id="Image12" /></a><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','shoe_links/links_red/images/location_red.jpg',1)"><img src="shoe_links/links_black/images/location_black.jpg" name="Image13" width="118" height="59" border="0" id="Image13" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','shoe_links/links_red/images/contact_red.jpg',1)"><img src="shoe_links/links_black/images/contact_black.jpg" name="Image14" width="151" height="59" border="0" id="Image14" /></a></div>
<!--end shoes_navigation-->

<div id="middle"></div>

<div id="shoe_links"><a href="aspen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','shoe_links/links_red/images/aspen_red.jpg',1)"><img src="shoe_links/links_black/images/aspen_black.jpg" name="Image3" width="210" height="236" border="0" id="Image3" /></a><a href="nolita.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','shoe_links/links_red/images/nolita_red.jpg',1)"><img src="shoe_links/links_black/images/nolita_black.jpg" name="Image4" width="143" height="236" border="0" id="Image4" /></a><a href="chelsea.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','shoe_links/links_red/images/chelsea_red.jpg',1)"><img src="shoe_links/links_black/images/chelsea_black.jpg" name="Image5" width="121" height="236" border="0" id="Image5" /></a><a href="soho.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','shoe_links/links_red/images/soho_red.jpg',1)"><img src="shoe_links/links_black/images/soho_black.jpg" name="Image6" width="140" height="236" border="0" id="Image6" /></a><a href="hampton.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','shoe_links/links_red/images/hampton_red.jpg',1)"><img src="shoe_links/links_black/images/hampton_black.jpg" name="Image7" width="206" height="236" border="0" id="Image7" /></a></div>

<div id="bottom"> </div>

<div id="copyright"> &copy; <a href="http://derekvanderven.com">derekvanderven.com</a> web design </div>
</div>
<!-- end wrapper-->

</body>
</html>


and here is the black bar page 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="elegant.css" rel="stylesheet" type="text/css"/>
<title>Elegant Shoes About us</title>
<script type="text/javascript">
<!--
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_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_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('about_red/images/home_about.jpg','about_red/images/about_about.jpg','about_red/images/shoes_about.jpg','about_red/images/press_about.jpg','about_red/images/news_about.jpg','about_red/images/location_about.jpg','about_red/images/contact_about.jpg')">

<div id="about_wrapper">
<div id="about_header"> </div>
<div id="about_navigation"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','about_red/images/home_about.jpg',1)"><img src="about_black/images/about_home.jpg" name="Image2" width="149" height="60" border="0" id="Image2" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','about_red/images/about_about.jpg',1)"><img src="about_black/images/about_about.jpg" name="Image3" width="106" height="60" border="0" id="Image3" /></a><a href="shoes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','about_red/images/shoes_about.jpg',1)"><img src="about_black/images/about_shoes.jpg" name="Image4" width="105" height="60" border="0" id="Image4" /></a><a href="press.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','about_red/images/press_about.jpg',1)"><img src="about_black/images/about_press.jpg" name="Image5" width="98" height="60" border="0" id="Image5" /></a><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','about_red/images/news_about.jpg',1)"><img src="about_black/images/about_news.jpg" name="Image6" width="94" height="60" border="0" id="Image6" /></a><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','about_red/images/location_about.jpg',1)"><img src="about_black/images/about_location.jpg" name="Image7" width="116" height="60" border="0" id="Image7" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','about_red/images/contact_about.jpg',1)"><img src="about_black/images/about_contact.jpg" name="Image8" width="151" height="60" border="0" id="Image8" /></a></div>
<!--end about navigation-->

<div id="about_background">
<div id="about_info">
<div>
<p> Canít wear your zebra-print coat because youíre having trouble looking like a fashionista with mismatched shoes? Fret no more! The Shoe New York carries a compendium of comprehensive gems thatíll satisfy <br />
even the most scrupulous accessory fanatic.</p>
<p>Imported straight from Korea, with genuine materials from Italy (faux leather equals faux pas), this Manhattan-based boutique will assuage your shoe fetish. <br />
<p >Even the highest heel (4 inches) will feel like second skin once you slip <br />
into these puppies. If heels arenít your thing, the almost perfect shoe can <br />
be trimmed to perfection. Whether itís just a centimeter off or (gasp!) you want to saw off an entire inch, THE shoe can be tailored to your preference. </p>
<p>Come see the success story thatís been keeping our Eastern trendsetters on top of the fashion chain and what will surely become a sleeper hit in the West.<br />
Take a peep through the <a href="shoes.html">Shoes</a>. You know you want to.</p>
</div> <!--end about background-->
</div><!--end about div-->

<div id="copyright"> &copy; <a href="http://derekvanderven.com">derekvanderven.com</a> web design </div>
</div>
<!-- end wrapper-->

</body>
</html>

silverglade
03-05-2009, 03:12 PM
nevermind i got a fix from someone, my problem was i was using image slices instead of one large background image to my #wrapper div. thanks. derek