6 Replies - 5249 Views - Last Post: 10 January 2013 - 07:33 AM

#1 danbywinby  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 06-January 13

Extra space added to paragraph/div in Firefox

Posted 07 January 2013 - 10:51 AM

Hey Guys

I am experiencing a problem in Firefox where i am seeing extra space above a line of text this only appears in Firefox and it happens whether it is a paragraph of text or a div with text inside.

If you need to view the webpage it is here http://dan.vdsh.net/jwt

My HTML
<!DOCTYPE html>

<html lang="en">

<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>                              <!-- Meta Stuff Required -->
	<link rel="stylesheet" type="text/css" href="styles.css" />                                       <!-- CSS -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>               <!-- JQuery -->
	<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <!-- Jquery Cycle -->


	<script> <!-- Image/Text rotator requires JQuery Cycle above ^^/>^^ -->
	$('.home-page-slideshow').cycle({
		fx: 'fade',
        timeout: 3000
	});
	</script>
	
	<script>
	var currentTime = new Date()
	var month = currentTime.getMonth() + 1
	var day = currentTime.getDate()
	var year = currentTime.getFullYear()
	</script>
	
	<title>
		JWT Haulage Group
	</title>
	
</head>

<body>
	
	<div class='header'>
	
		<h1>JWT Haulage Group Logo</h1>
		
	</div>

	<div class='container'>
		
		<ul class='navigationbar'>
			
			<li><a href="index.html">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">ETS2</a></li>
			<li><a href="#">UKTS/GTS</a></li>
			<li><a href="#">Contact</a></li>
				
		</ul>
			
		<div class='content'>
		
			<p class='home-text1'>JWT Haulage Group Ltd.</p>
			
			<div class='youtube-video'>
			
				<iframe 
					width="420" 
					height="345"
					src="http://www.youtube.com/embed/OGJu04tVIWg">
				</iframe>
				
			</div>
			
		</div>
		
		<div class='clear'>
		</div>
		
		<div class='footer'>
		
			<div class='footer-text1'>
			
				<h3>Links:</h3>
				
				<ul class='footer-links'>
				
					<li><a href="#">Site Map</a></li>
					
				</ul>
				
			</div>
			
			<div class='footer-text2'>
		
				<br>
				<br>
				<script>
					document.write("Date: " + month + "/" + day + "/" + year)
				</script>
				
			</div>
			
			<div class='clear'>
			</div>
			
		</div>
		
	</div>
		
</body>
</html>



My CSS
/* All Page Elements */

Body
	{
	background: url("./images/background.jpg");
	background-color: #3c3231;
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;
	}
	
.header
	{
	background: url("./images/header_background.png");
	background-color: white;
	background-position: center;
	background-repeat:no-repeat;
	position: absolute;
	width: 954px;
	height: 90px;
	margin-left: -475px;
	margin-right: auto;
	left: 50%;
	top: 0px;
	color: black;
	font-family: Arial;
	text-align: center;
	}
	
.container
	{
	background-color: white;
	position: relative;
	width: 954px;
	top: 70px;
	margin-left: -475px;
	margin-right: auto;
	left: 50%;
	min-height: 100%;
	}
	
.content
	{
	position: relative;
	width: 954px;
	margin: 20px;
	width: 912px;
	font-family: Arial;
	text-align: center;
	min-height: 100%;
	}
	
.clear
	{
	clear: both;
	}
	
.footer
	{
	background-color: white;
	position: relative;
	bottom: 0;
	width: 100%;
	height: 150px;
	}
	
.footer-text1
	{
	color: #333333;
	font-family: Arial;
	float: left;
	width: 45%;
	margin-left:4%;
	height: 100%;
	}
	
.footer-links li a
	{
	text-decoration: none;
	color: #333333;
	}
	
.footer-text2
	{
	color: #333333;
	font-family: Arial;
	float: right;
	width: 45%;
	height: 100%;
	}

	
/* Navigation Menu */
	
.navigationbar
	{
	position: relative;
	list-style-type: none;
	margin: 2%;
	padding: 0;
	width: 96%;
	background: #0132AC;
	float: left;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	
.navigationbar li a
	{
	font-family: Arial;
	text-decoration: none;
	width: 16%;
	position: relative;
	left: 10%;
	color: white;
	float: left;
	text-align: center;
	}
	
.navigationbar li a:hover
	{
	background: red;
	}
	

/* Home Page Elements */
	
.home-text1
	{
	position: relative;
	color: white;
	background-color: #01326D;
	width: 45%;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	
.youtube-video
	{
	position:relative;
	top: 0px;
	float: right;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	margin-bottom:30px;
	}




Is This A Good Question/Topic? 0
  • +

Replies To: Extra space added to paragraph/div in Firefox

#2 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1251
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Re: Extra space added to paragraph/div in Firefox

Posted 07 January 2013 - 11:07 AM

The website looks exactly the same on both Chrome and Firefox for me. (Well the font rendering is a TINY bit different, but nothing you can reasonably do about that)
Was This Post Helpful? 0
  • +
  • -

#3 danbywinby  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 06-January 13

Re: Extra space added to paragraph/div in Firefox

Posted 07 January 2013 - 11:47 AM

Well in that case then the extra space is appearing in both browsers but basically the extra space is covering the navigation bar and i want the dark blue background to only be behind the text "JWT Haulage Group Ltd"
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,587
  • Joined: 12-December 12

Re: Extra space added to paragraph/div in Firefox

Posted 07 January 2013 - 01:17 PM

Not sure what you are trying to achieve, but if you want "JWT Haulage Group Ltd." to appear below the navigation bar, then add clear: both to the main content area:

.content { clear: both; }

This clears the floated navigation bar and, as a consequence, removes the extra space to which you refer.

In either Chrome or FF you can right-click and choose Inspect Element. You can then make these amendments live and see their impact straight-away. In FF you may need to install FireBug.
Was This Post Helpful? 1
  • +
  • -

#5 danbywinby  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 06-January 13

Re: Extra space added to paragraph/div in Firefox

Posted 07 January 2013 - 02:41 PM

Thank You Andrewsw

Once again you have helped me, however I don't understand how that clear: both has helped solve the problem. Can you please explain it?
Was This Post Helpful? 0
  • +
  • -

#6 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1251
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Re: Extra space added to paragraph/div in Firefox

Posted 07 January 2013 - 03:29 PM

I'll try to give you a quick rundown (but don't quote me on this - read about it yourself).

All divs, when created, take up full horizontal width of their parent.

Something like this will result in the three "Hellos" appearing one on top of the other because Divs are selfish and want to take up every little bit of horizontal space possible.

<div><p>Hello</p></div>
<div><p>Hello</p></div>
<div><p>Hello</p></div>


However, when you float a div (or an element!), you turn that selfish pig into a magnanimous element. It floats left or right, and let's anything below it take it's place in the document flow - hell it even lets the div below STEP ON IT'S TOES! (Meaning, the div below will completely ignore the floated div)

Proof!

http://jsfiddle.net/FmCcD/

See that tiny, "Hello" container? It's floated left, and let the other bigger, more selfish divs take it's place in the Document Flow.

Truthfully floats are in my opinion the hardest part of learning HTML, one day things will just click and you'll grok them. Eventually.
Was This Post Helpful? 1
  • +
  • -

#7 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,587
  • Joined: 12-December 12

Re: Extra space added to paragraph/div in Firefox

Posted 10 January 2013 - 07:33 AM

Here is a good page to read.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1