Firefox adding space under header - Graphic Design Forums: UK forums for graphic designers

Anglo Design · 10-11-2009, 06:47 PM

Hiya,
I'm using a website template as a base, but i've erased a header section with links and things. I want to simply add my header directly on top of the template. I've done this, and it's fine in IE, but Firefox puts a space underneath the header. This won't work for me as the header image needs to have no space for the images in the header & the template to blend together.

I've added my css directly to the template file, so all code is below for you to see, can you help me?

If you'd like to see the gap itself just say and I'll host the images online and repost the template code, so you can see it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="Premium Series" content="" />
<style media="screen" type="text/css">

body {
	margin-top: 50px;
	padding: 0;
	background: #232323;
	text-align: justify;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #141414;
}

h1, h2, h3 {
	margin-top: 0;
	color: #8C0209;
}

h1 {
	font-size: 1.6em;
	font-weight: normal;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1em;
}

ul {
}

a {
	text-decoration: none;
	color: #8C0209;
}

a:hover {
	border-bottom: none;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin: 0 20px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 20px;
}


/* Wrapper */

#wrapper {
}

/* Page */

#page {
	width: 990px;
	margin: 0 auto;
	padding: 0px 5px;
	background: #FFFFFF;
}

#page-bg {
}

/* Latest Post */

#latest-post {
	padding: 20px;
	border: 1px solid #E7E7E7;
}

/* Content */

#content {
	float: left;
	width: 620px;
}


/* Sidebars */

#sidebar1 {
	float: left;
}

#sidebar2 {
	float: right;
}

.sidebar {
	float: left;
	width: 180px;
	padding: 0;
	font-size: 13px;
}

.sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar li {
	padding: 0 0 20px 0;
}

.sidebar li ul {
}

.sidebar li li {
	margin: 0 5px 0 5px;
	padding: 8px 0px;
	border-bottom: 1px #BBBBBB dashed;
}


.sidebar li h2 {
	height: 18px;
	margin: 0 0 0 0;
	padding: 10px 15px 2px 15px;
	background: #141414 url(images/img05.jpg) no-repeat left top;
	letter-spacing: 0px;
	font-size: 14px;
	color: #FFFFFF;
}

.sidebar a {
}

/* Footer */

#footer {
	width: 960px;
	height: 70px;
	margin: 0 auto;
	padding: 0 20px;
	background: url(images/img04.jpg) no-repeat left top;
}

#footer p {
	margin: 0;
	padding: 25px 0 0 0;
	text-align: center;
	font-size: smaller;
}

#footer a {
}

#footer .link {
	float: right;
}

#footer .copyright {
	float: left;
}

.flower {
	padding-left: 20px;
}

</style>
</head>
<body>
<!-- start header -->
<div align="center"><img src="http://www.graphicdesignforums.co.uk/images/header.jpg"></div>
<!-- end header -->
<div id="wrapper">
	<!-- start page -->
	<div id="page">
		<div id="sidebar1" class="sidebar">
			<ul>
				<li>
					<h2><div align="center">Featured Item</div></h2>
					
					
					
				</li>
				<li>
					<h2><div align="center">Categories</div></h2>
					<ul>
						<li><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/#">Logo & Banner Package</a></li>
						<li><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/#">eBay Listing Template</a></li>
						<li><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/#">eBay Shop-Style Template</a></li>
					</ul>
				</li>
				<li>
					<h2><div align="center">Custom Pages</div></h2>
					
					
					
				</li>
				<li>
					<h2><div align="center">Newsletter Signup</div></h2>
					
					
					
				</li>
			</ul>
		</div>
		<!-- start content -->
		<div id="content">
			<div class="flower"><img src="http://www.graphicdesignforums.co.uk/images/img06.jpg" alt="" width="590" height="234" /></div>
			<div align="center"><p>
			
			
			<font size="3">Text text text text text text text text text text text text text text text text text </font>
			
			
		</p></div>
		</div>
		<!-- end content -->
		<!-- start sidebars -->
		<div id="sidebar2" class="sidebar">
			<ul>
				<li><div>
				<h2><div align="center">Item Search</div></h2>
						
							
						
				</div></li>
				<li>
				<h2><div align="center">Best Sellers</div></h2>
					
					
					
				</li>
				<li>
				<h2><div align="center">Offers</div></h2>
					
					
					
				</li>
				<li>
				<h2><div align="center">Other</div></h2>
					
					
					
			</li>
			</ul>
		</div>
		<!-- end sidebars -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end page -->
</div>
<div id="footer">
	<p class="copyright">&copy;&nbsp;&nbsp;2009 All Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
	<p class="link"><a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/#">Privacy Policy</a>&nbsp;•&nbsp;<a href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/#">Terms of Use</a></p>
</div>
</body>
</html>

Marko · 03-28-2010, 07:02 PM

Try this:

Replace your 'content' with this:


<div id="content">
<div class="flower"><img src="http://www.graphicdesignforums.co.uk/images/img06.jpg" alt="" width="590" height="234" /></div>
<div class="text_text">
<h1> Text text text text text text text text text text text text text text text text text </h1>
</div>
</div>


and add these css styles:

.text_text {
margin-top: -0.5em;
}

.text_text h1 {
text-align: center;
}

I added a class ("text_text") to the Div that holds your Text text text. Changed the text from p to h1.

I hope this points you in the right direction.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode