PDA

View Full Version : cant get my copyright footer positioned and link color purple


silverglade
05-26-2009, 08:17 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

@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: 120px;
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: 100%;
text-align: center;
color: white;
font-size: small;
font-weight: bold;
clear: both;
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

<!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, 08:23 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