Member Avatar for zobadof
zobadof -7 Junior Poster

Hello,

I am coding a new website but I'm getting a sort of double footer thing. I've put the footer in once but it's appearing twice. It's probably a really simple issue to fix but I cannot seem to find the solution.

Here is the HTML:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//ENS"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CommuniCare :: Home</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
                <link rel="stylesheet" href="style.css" type="text/css" />
                <style type="text/css">
                <!--
                img { border: none; }
                -->
                </style>
	</head>
	<body>
		<div id="main">
			

			<div id="marquee">
				<marquee onmouseout="this.start();" onmouseover="this.stop();" direction="left" behaviour="scroll">this website is under construction</marquee>
			</div>
			Test
			<br >
				
			<div id="footer">				
				<p>CommuniCare - Information, Advice, Support | &copy; Copyright CommuniCare - All Rights Reserved</p>
				<p>233 Kings Road, Reading, RG1 4LS</p>
				<p>Registered Charity Number, 1078694</p>
			</div>
	</body>
</html>

And here's the CSS:

body {
				background: #663399;
			}
			#main {
				background-color: #1165BA;
			    border: 5px solid #FFFBFA;
			    border-radius: 6px;
			    color: #BBBBBB;
			    font-family: sans-serif;
			    margin: 20px auto 0;
			    position: relative;
			    width: 1000px;
			}
			#marquee {
				background-color: #E65A2C;
			    border: 1px solid #000000;
			    border-bottom-left-radius: 5px;
			    border-top-left-radius: 5px;
			    border-bottom-right-radius: 5px;
			    border-top-right-radius: 5px;
			    color: #F0F0F0;
			    font-size: 14px;
			    font-weight: 700;
			    height: 18px;
			    margin: 0;
			    margin-top: 5px;
			    margin-left: 8px;
                            margin-right: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 970px;
			}
			#footer {
			    background-color: #C9C1C1;
			    border-top: 10px solid #D6D0D0;
			    color: #000000;
			    font-size: 12px;
			    padding: 5px;
			    text-align: center;	
			}
 
			/* special classes */
			.clear { clear: both; }

I'm afraid there is no LIVE website yet as I'm doing it from my PC. Here is a link to an image of what I am talking about;

Thanks :)

  • 1 Contributor
  • 0 Replies
  • 99 Views

Dani AI

Generated

Quick diagnostic: the symptom you describe most often comes from an unclosed wrapper element (the main container) or from the footer being injected twice by a template/script. Confirm whether the browser actually has two footer nodes or just one that looks duplicated because of CSS. Use the DOM inspector (Elements panel) rather than the rendered image to see the real structure.

Step-by-step checks to run now:

  • View source (Ctrl+U) and search for the footer text to see if it appears twice in the HTML output.
  • Open DevTools, inspect the footer area, and count footer nodes in the DOM. If there are two nodes, search your templates/includes or scripts for another footer insertion.
  • If the DOM shows only one footer node but two visual boxes, look for CSS pseudo-elements (:before/:after), duplicated backgrounds/borders, or overlapping positioned elements that can create the illusion of a second footer.
  • Validate the page to catch unclosed tags and other markup errors that cause browsers to reparent nodes automatically.

A quick fix to try first: close the main wrapper before the closing </body> so the browser doesn’t implicitly re-balance the DOM. For example:

</div>  <!-- close main wrapper -->
</body>

If that resolves it, run the page through the W3C validator to find any other stray or mismatched tags: https://validator.w3.org/ . For workflow tips, use the browser Elements panel to live-edit and immediately see what change removes the duplicate, then apply that change in your source. Also consider switching to a simple HTML5 doctype to avoid quirks: see https://developer.mozilla.org/en-US/docs/Glossary/Doctype and use DevTools docs at https://developer.chrome.com/docs/devtools/ to guide debugging. This approach usually nails down whether the cause is markup, CSS, or a duplicated include/script.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.