CSS Forum

**silverglade** · 04:59 PM

hi, ive been having a problem getting my copyright footer down at the bottom of the page, and getting my link text in the footer red. both in ff and IE6 ..( i put all my floats into a display: inline iefixes css file.also my link is showing up purple instead of red. any help greatly appreciated. thanks. derek

here is the page im talking about.

http://derekvanderven.com/war/index.html

and here is the css for the page

Code:

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

body {
margin: 0 ;
padding: 0;
background-color: black;
}
#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 819px;
}

#header {
width: 819px;
height: 673px;
background-image: url(war_images_raw/front_slices/front_bg_top.jpg);
background-repeat: no-repeat;
 }
 
 #content_background {
 
 width: 819px;
 height: 463px;
 background-image: url(war_images_raw/front_slices/front_bg_bottom.jpg);
background-repeat: no-repeat;
 }

#left_content {
    float: left;
    width: 240px;
    /*height: 300px;*/
    color: black;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 125px;
    color: red;
    font-size: small;
    padding-top: 15px;
    
}
#left_content p {
text-indent: 10px;
padding-left: 10px;
padding-right: 10px;

}

#right_images_header {
    text-align: center;
    float: right;
    color: white;
    width: 100px;
    margin-top: 80px;
    margin-right: 220px;
    margin-bottom: 0;
    margin-left: auto;
}

#right_images_wrapper {
    float: right;
    width: 300px;
    /*height: 250px;*/
    margin-top: 0px;
    margin-right: 120px;
    margin-bottom: 0;
    margin-left: auto;
}
.image {
    float: left;
    width: 80px;
    height: 80px;
    margin: 20px auto 0 13px;
    border: 1px solid black;
    }

#footer {
    width: 200px;
    text-align: center;
    color: white;
    font-size: small;
    font-weight: bold;
    margin: 0 auto 0 auto;
     
    }

#footer a:link, #footer a:visited, #footer a:hover ,#footer a: active {
text-decoration: none;
color: red;
}

and here is the html for the 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="war.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<!-- LIGHTBOX CODE-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- END LIGHTBOX CODE-->
<title>War home</title>
</head>

<body>

<div id="wrapper">
    <div id="header"> </div>
    <div id="content_background">
    <div id="left_content">
      <p> <strong>Ever since the dawn of man, humanity has been perpetually engaged in War      </strong>....... </p>
        <p><strong>The Bible states that it just gets worse until the Son of Man, Jesus        Christ, comes back to destroy the armies of the world.....</strong> </p>
      <p><strong>The causes of war are eternal and unchanging. The fallen human condition.        </strong><br />
      </p>
    </div><!--end leftcontent-->
    
     <div id="right_images_header"><strong> War Images</strong></div>
     <div id="right_images_wrapper">  
          <div class="image"><a href="war_images_raw/war_images2/1.jpg" rel="lightbox[placecard]"><img src= "war_images_raw/war_images2/1_t.jpg" width="80" height="80" border="0" /></a></div>
     
     <div class="image"><a href="war_images_raw/war_images2/2.jpg" rel="lightbox[placecard]"><img src= "war_images_raw/war_images2/2_t.jpg" width="80" height="80" border="0" /></a></div>
     
     <div class="image"><a href="war_images_raw/war_images2/3.jpg" rel="lightbox[placecard]"><img src= "war_images_raw/war_images2/3_t.jpg" width="80" height="80" border="0" /></a></div>
     
     <div class="image"><a href="war_images_raw/war_images2/4.jpg" rel="lightbox[placecard]"><img src= "war_images_raw/war_images2/4_t.jpg" width="80" height="80" border="0" /></a></div>
     
     <div class="image"><a href="war_images_raw/war_images2/5.jpg" rel="lightbox[placecard]"><img src= "war_images_raw/war_images2/5_t.jpg" width="80" height="80" border="0" /></a></div>
     
     <div class="image"><a href="war_images_raw/war_images2/6.jpg" rel="lightbox[placecard]"><img src= "war_images_raw/war_images2/6_t.jpg" width="80" height="80" border="0" /></a></div>
     
     
     </div><!-- right images wrapper end-->
    
    
    <div id="footer">&copy; 2009 <a href="http://derekvanderven.com">Derekvanderven.com </a></div>

  </div>
    <!--end contentbackground-->

     
</div><!--end wrapper-->
</body>
</html>

**silverglade** · 05-26-2009, 05:22 PM

ok after about 2 hours trying to fix this i decided to add bottom margin on the div on top of the footer, and that pushed it down ok where i wanted it but it showed up slightly different in IE6 and FF. then i fixed a space i had in the #footer: a:visited, or similar and that made the text red. did i do a good fix? any advice appreciated. thanks. derek