Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Annoying purple border in footer

    Hey everyone,

    I have a annoying a problem with the website I'm working on. It was passed on work to me, and since then I have made several major improvements since it was given to me. My issue is that I have this purple border in the footer that's really unprofessional, and I'm not sure whether it's in CSS or HTML. I have messed around with the pixels in the CSS file and looked for unneeded spacing in the HTML coding, but I've had no such luck.

    If anyone could look at it, and tell me what I might be missing or should add to get rid of it, I would be appreciated.

    HTML:
    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" />
    <title>Welcome to PAMA (Parkside American Marketing Association)</title>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <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">
    <!--
    #wrapper #bod strong {
    	font-family: Tahoma, Geneva, sans-serif;
    }
    #apDiv1 {
    	position:absolute;
    	width:183px;
    	height:161px;
    	z-index:1;
    	left: 2px;
    	top: 373px;
    }
    #apDiv2 {	position:absolute;
    	width:183px;
    	height:161px;
    	z-index:1;
    	left: 2px;
    	top: 373px;
    }
    #apDiv3 {	position:absolute;
    	width:183px;
    	height:161px;
    	z-index:1;
    	left: 2px;
    	top: 373px;
    }
    #wrapper marquee {
    	color: #060;
    }
    -->
    </style>
    </head>
    
    <body onload="MM_preloadImages('images/buttons/facebook_down.png','images/buttons/twitter_down.png','images/buttons/youtube_down.png','images/buttons/campusconnect_down.png','images/buttons/nav_aboutdown.gif','images/buttons/nav_eventsdown.gif','images/buttons/nav_membersdown.gif','images/buttons/nav_contactdown.gif','images/buttons/nav_homedown.gif')">
    <div id="wrapper">
    
      <div id="header">
        <div id="logo"><a href="index.html"><img src="images/buttons/newpamalogotrans.png" width="262" height="150" alt="PAMA" /></a></div>
        <div id="socialbar"><a href="http://www.facebook.com/pages/Parkside-American-Marketing-Association/206088079461862" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/buttons/facebook_down.png',1)"><img src="images/buttons/facebook_up.png" alt="facebook" name="facebook" width="48" height="48" border="0" id="facebook" /> </a><a href="https://twitter.com/ParksideAMA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/buttons/twitter_down.png',1)"><img src="images/buttons/twitter_up.png" alt="twitter" name="twitter" width="48" height="48" border="0" id="twitter" /> </a><a href="http://www.youtube.com/channel/UCcIJYO7vjOT85kr45t192GQ" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','images/buttons/youtube_down.png',1)"><img src="images/buttons/youtube_up.png" alt="youtube" name="youtube" width="48" height="48" border="0" id="youtube" /> </a><a href="http://campusconnect.uwp.edu/organization/pama/" target="_blank" onmouseover="MM_swapImage('campus connect','','images/buttons/campusconnect_down.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/buttons/campusconnect_up.png" alt="campus connect" name="campus connect" width="48" height="48" border="0" id="campus connect" /></a></div>
      </div>
     
     
     
      <div id="navbar">
        <div id="home"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/buttons/nav_homedown.gif',1)"><img src="images/buttons/nav_homeup.gif" alt="home" name="home" width="180" height="35" border="0" id="home2" /></a></div>
        <div id="events"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/buttons/nav_aboutdown.gif',1)"><img src="images/buttons/nav_aboutup.gif" alt="about" name="about" width="180" height="35" border="0" id="about2" /></a></div>
        <div id="events"><a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/buttons/nav_eventsdown.gif',1)"><img src="images/buttons/nav_eventsup.gif" alt="events" name="events" width="180" height="35" border="0" id="events2" /></a></div>
        <div id="members"><a href="members.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('members','','images/buttons/nav_membersdown.gif',1)"><img src="images/buttons/nav_membersup.gif" alt="members" name="members" width="180" height="35" border="0" id="members2" /></a></div>
        <div id="contact"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/buttons/nav_contactdown.gif',1)"><img src="images/buttons/nav_contactup.gif" alt="contact" name="contact" width="180" height="35" border="0" id="contact2" /></a></div>
      </div>
      <marquee behavior="scroll" direction="left" bgcolor="#999999">The Parkside American Marketing Association website is finally ONLINE!!!</marquee>
      <div id="bod">
        <h3>Welcome the UW-Parkside American Marketing Association!</h3>
        <p>We are a student organization for business students, no not just   marketing. We assist other student organizations with their marketing   needs, as well as, provide our members with career experience and   networking opportunities!</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      
      <div id="footer">
          <div id="footer ama">
            <p><a href="http://www.marketingpower.com/"><img src="images/buttons/ama.png" alt="" width="180" height="66" /></a><a href="http://www.nm-oakcreek.com/"><img src="images/buttons/nwm.png" alt="" hspace="6" width="181" height="59" /></a><a href="https://www.federatedinsurance.com/ws/fi/index.htm"><img src="images/buttons/fedinsurance.png" alt="" hspace="6" width="111" height="40" /></a><a href="https://www.ecu.com/"><img src="images/buttons/ECUTrans.png" alt="" hspace="6" width="92" height="90" /></a><a href="http://www.uwp.edu/"><img src="images/buttons/uwp.png" width="180" height="66" /></a></p></div>
    <div id="footersite">
        <p class="center">Copyright &copy; 2013 by Parkside American Marketing Association</p>
        <p><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" /></a><br />
          This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/deed.en_US">Creative Commons Attribution-ShareAlike 3.0 United States License</a>.
    </p>
        <p><a href="policy.html">Privacy Policy</a></p>
        <p class="center">Design by Birttany Cotter and Matthew Harmon</p>
        </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    CSS:
    Code:
    @charset "UTF-8";
    
    body {
    	background-color: #005826;
    }
    #wrapper {
    	position: relative;
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #header {
    	font-family: Verdana, Geneva, sans-serif;
    	background-color: #005826;
    	width: 960px;
    	height: 165px;
    }
    #wrapper #header #logo {
    	float:left;
    	width: 300px;
    	margin-top: 7px;
    	margin-bottom: 8px;
    }
    a img {
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    }
    #wrapper #header #socialbar{
    	margin-top: 109px;
    	height: 48px;
    	width: 219px;
    	float: right;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    }
    
    #navbar {
    	background-color: #090;
    	height: 35px;
    	width: 960px;
    	background-image: url(../images/buttons/nav_gradient.jpg);
    	background-repeat: repeat-x;
    }
    #home {
    	margin: 0px;
    	float: left;
    }
    #about {
    	width: 0px;
    	float: left;
    }
    #events {
    	margin: 0px;
    	float: left;
    	position: static;
    }
    #members {
    	margin: 0px;
    	float: left;
    	position: static;
    }
    #contact {
    	margin: 0px;
    	float: left;
    	position: static;
    }
    
    #bod {
    	background-color: #FFF3DC;
    	padding: 10px;
    	font-family: Tahoma, Geneva, sans-serif;
    	text-align: left;
    }
    
    #footer {
    	background-color: #330066;
    	background-image: url(../images/buttons/footer_gradient);
    	background-repeat: repeat-x;
    	padding: .5em;
    	font-size: 0.8em;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #fff;
    	width: 98.7%;
    	overflow: hidden;
    	text-align: center;
     }
     
     #footer ama {
    		 width: 300px;
    		 height: 250px;
    		 Top:200px;
    		 Left:0px;
    		 position: absolute;
    		 padding: 20px 20px 20px 20px;
    		 overflow: auto;
    		 background-color:#FF0}
    		 
    #footersite {
    	background-color: #330066;
    	background-image: url(../images/buttons/footer_gradient);
    	background-repeat: repeat-x;
    	text-align: center;
    	padding: .5em;
    
    	font-size: 0
    .em;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #fff;
    	width: 98.7%;
    	overflow: hidden;
    	font-size: 0.8em;

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Code:
    	font-size: 0
    .em;
    Don't think the dot should be here and you don't end the rule with curly bracket.
    Hard to determine your problem since we don't have the images your placing in the footer(s), but my guess is
    Code:
    	background-image: url(../images/buttons/footer_gradient);
    	background-repeat: repeat-x;
    May cover most of the footer and turn
    Code:
    background-color: #330066;
    which is purple into a border.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •