CSS Div Issue

ironclaw

Hi Folks,

Having a weird error in a CSS box. I'm getting large spacing between paragraph tags:



As you can see, there is multiline spacing between the headers and paragraphs

The HTML would look like this:

<div class="exampleboxshadowf">
<span class="examplelabelboxshadow">

<h1>Introduction</h1>
<p>Some info</p>
<h1><em>Location, Location</em></h1>
<p>More Info</p>

The CSS for the box is:

div.exampleboxshadowf {
background-color: #eee;
position:fixed;
top:30px;
left:100px;
float:none;
margin-top: auto;
margin-right: auto;
height: 575px;
width:840px;
text-align: center;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
 overflow: scroll;
}

And I've set the font and p, h tags like:

h1 {
font-size: 16px;
  font-family: 'Noticia Text';
}

h2 {
font-size: 18px;
  font-family: 'Noticia Text';

}

p {
	font-size: 15px;
  font-family: 'Noticia Text';

}

body, span {
	margin:0;
	padding:0;
	
}

Noticia Text is a Google font which is imported and I can confirm is working correctly.

Any idea what is causing such weird spacing?

smash

Your h1 isn't closed properly first of all

ironclaw

smash wrote: »

Your h1 isn't closed properly first of all

Sorry, typo in my post. It is closed properly on the actual page.

ironclaw

Ok, solved. Very odd error caused by a JavaScript in the page.

Changed the content box to this:

#contentBox  {   
position:absolute; 
top:30px;  
left:100px;  
text-align: center;   
background-color: #eee;
height: 575px;
width:840px;
overflow: scroll; 
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
padding:10px;
}

And the HTML is fine when contained within:

<div id='contentBox'><p>Hello</p> </div>

KonFusion

You've got 2 <h1>'s inside of a span tag?

Sort that out! :pac:

Try validating your markup & CSS.

Also stick some dashes in your class names: class="exampleboxshadow" should be class="example-box-shadow" and likewise for the rest.

What was the error? Can you post the js so others may benefit if they experience something similar?