CSS Forum

**silverglade** · 04:49 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 it is on this page

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

the black bar across the screen is on this page

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

here is the css for both pages..

Code:

@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: 700px;
 
}    
#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: 102px;
background-image: url(shoe_links/links_black/images/bottom.jpg);
    background-repeat:no-repeat; 

}

here is the html for the popped up copyright notice

Code:

<!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_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 html code for the black bar page

Code:

<!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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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>

**LadynRed** · 03-05-2009, 09:58 AM

Your copyright is falling where it can, right after #bottom, which is below #shoelinks, which falls after #middle. Since #shoelinks is sitting about at the top of the boot on the left, and #bottom falls about the middle of that boot, #copyright is following right after that... the only place it can go given what you've defined.

Rather than setting the gradient as background to #middle, just use that as a repeating vertical background on #wrapper, then you won't need to stack things like you're doing tables. This will also allow you to make your divs any height you want to accommodate your design.

You can use min-height for standards-compliant browsers, and use conditional comments and a separate css file for IE, which does NOT support min/max height/width.

**silverglade** · 10:25 AM

wow! thank you for your time on that. also, if i make the #bottom image a small gradient, wont it flow from dark to light over and over and not flow from dark, to light, to dark again? thanks . derek

edit- i just used the full background image instead of a slice. you are so awesome!! i didnt know i could put images over backgrounds . duh!. now my bottom area shows up because its not a slice. im going to start putting "thanks to ladynred" at the top header of all my web pages from now on. LOL. im serious too. thank you ladynred. youre the BEST.

**LadynRed** · 03-05-2009, 10:28 AM

Thanks, glad to help

Backgrounds on divs (or anything else) are exactly that, and it leaves the div 'open' for you to put anything else inside it, including more images. You can 'stack' divs, each with it's own background to achieve lots of cool effects.

**silverglade** · 01:42 PM

this is awesome. with one reply you fixed 3 problems i had on 2 pages!!!

check out my home page and other pages, view source, and look at the top of the header ! hehehe. thank you. derek

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

the sites not done yet, and i was afraid to use a background slice because the image goes from dark, to light, to dark again.

edit- oops i just realized i can slice the background horizontally to get the dark, light, dark pattern.