Still having white space issues :-(

twilitegxa · October 27, 2010

I am still having a bunch of white space at the bottom of my web pages in Firefox. Can anyone help me out with why and how to fix it?

Here is the page:

http://webdesignsbyliz.com/STAFS

What am I doing wrong? Here is the markup and CSS for it:


<!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>Southern Televsision & Film Summit</title>
<link href="STAFS.css" rel="stylesheet" type="text/css" />


<meta name="Keywords" content="events atlanta
online ad
southern television
stafs
competition
monty ross
princess banton
reality
rates
festival atlanta
film premiere tickets
film festival sponsors
movies in atlanta ga
arts 
non profits
summer film
institute
atlanta
festivals
georgia
corporate
events in atl
festival 2010 ga
executive producer
48 hours movies
national advertising schedule" />




</head>
<body id="home">
<img src="images/stafs_logo.png" alt="Southern Television & Film Summit" height="200px" width="250px" />
<div id="info">
<div id="info_text">
Spring 2011<br />
In Atlanta Midtown
<>
<>
<div id="icons">
<a href="#" target="_blank"><img src="images/enewsletter_btn2.png" alt="e-Newsletter" height="25px" /></a>
<a href="http://www.facebook.com/pages/Southern-Television-Film-Summit/120203984688166" target="_blank"><img src="images/Facebook_icon.png" alt="Facebook Icon" height="25px" width="25px"/></a>
<a href="https://twitter.com/STAFSummit" target="_blank"><img src="images/Twitter_icon.png" alt="Twitter Icon" height="25px" width="25px" /></a>
<a href="#" target="_blank"><img src="images/Linkedin_icon.png" alt="Linked In Icon" height="25px" width="25px" /></a>
<>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('STAFSummit').start();
</script>
<>
<div id="facebook">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSouthern-Television-Film-Summit%2F120203984688166&width=250&colorscheme=light&connections=0&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:427px;" allowTransparency="true"></iframe>
<>
<div id="news">
<p class="title">Entertainment News Feed</p>
<iframe src="RSS.php" width="250" height="427" 
frameborder="0" scrolling="auto" name="newsfeed">
<?php include("RSS.php"); ?></iframe>
<>
<div id="rightcontent">
<div id="banner">
placeholder for banner
<>
<div id="nav">
<a href="index.php" id="homenav">Home</a> | <a href="#" id="about">About</a> | <a href="#" id="sponsorship">Sponsorship</a> | <a href="#" id="attend">Attend</a>
<>
<div id="placeholder1">
<img src="images/image.png" height="100px" width="100px" alt="Image1" class="parimg" />


<p class="header">What is the Southern Television and Film Summit (STAFS)?</p>


<p class="bold">With a mission to bring diverse visionaries together to define the future of entertainment, the inaugural Southern Television and Film Summit is a highly anticipated, annual event that fosters business and creative opportunities in development, creation, production and programming of fiction and non-fiction content for television, film and emerging media platforms. The goal is to provide a dynamic marketplace of ideas where diverse voices gather to debate issues, discuss emerging trends, and identify new talent in the field.</p>


<p>STAFS implements our mission by providing summit attendees access to a dynamic slate of public speakers, all eager to showcasing their wealth of knowledge in an engaging forum.  The high impact line-up includes talented and proven industry pros leading lasting education sessions, followed by networking social time, professional enhancement activities and deal-making opportunities like pitch sessions and one-on-one mentoring.</p> 


<p>STAFS also offers a online services, a network of social media activities, and hosts special events throughout the year.</p>
<>
<div id="placeholder2">
<img src="images/image.png" height="100px" width="100px" alt="Image1" class="parimg" />


<p class="header">Why Should I Attend the Southern Television & Film Summit?</p>


<p>Set in the heart of Atlanta--World Headquarters of Turner Broadcasting and home of Tyler Perry Studios, Rainforest Films, Raleigh Studios, Screen Gems, and Turner Studios--the Southern Television & Film Summit will capitalize on the Georgia production juggernaut.  Thanks to the state's competitive tax incentives, Georgia hosted over seven hundred film & television productions last year alone, assuming a coveted spot as a destination for features and series alike.  Because Atlanta also showcases a unique mix of diverse local talent--both above and below the line--STAFS attendees, producers and development executives will have a first crack at the next generation entertainment entrepreneurs.  </p>


<p>2011 will be the inaugural year for STAFS and the organizers are dedicated to establishing STAFS as an annual source for networking, education, professional development and artistic collaboration. STAFS was born out of the need to create synergy amongst the growing television and film community in the South.</p>


<p>The diverse list of attendees will include notable key-note speakers, decision-makers, network and studio development executives, producers, directors, writers, and editors, as well as attorneys, talent managers, casting agents, actors, pitchers, and production students.</p>


<p>This annual gathering of industry talent will become the epicenter of new ideas around on the business of television, film, and new media.</p>


<>
<div id="placeholder3">
<img src="images/image.png" height="100px" width="100px" alt="Image1" class="parimg" />


<p class="header">How Do I Register for the Southern Television & Film Summit?</p>


<p>Registrations will open in December. </p>


<p>In the meantime, "friend" us on Facebook, follow our Twitter stream, connect with us on Linked-In, and sign-up for our e-newsletter.</p>


<p>If you have any questions, email event producers <a href="mailto:Gabe@STAFSummit.com?subject=Registration Questions">Gabe Wardell</a> and <a href="mailto:Paula@STAFSummit.com?subject=Registration Questions">Paula Martinez.</a></p>
<>
<div id="placeholder4">
<div id="headline">
<u>Headline</u><br /><br />
<>
<div id="image">
<img src="images/image.png" height="100px" width="100px" alt="Image1" />
<>
<div id="story">
Nam a lorem augue. Quisque interdum venenatis sollicitudin. Vivamus ut metus sed risus fringilla suscipit eget et magna. In eu elit lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris gravida pellentesque justo at pharetra. Suspendisse odio risus, ullamcorper non scelerisque non, molestie tincidunt lacus. Aenean tempus libero sit amet tellus posuere accumsan. Nunc ornare odio eget magna commodo pharetra. <a href="#"> Read More...</a><>
<>
<> <!-- END OF RIGHTCONTENT CONTAINER DIV -->
<div id="footer">


SOUTHERN TELEVISION AND FILM SUMMIT<br />
      <span class="mid"><img src="images/blue_line2.jpg" width="300" height="1" alt="LINE" />STAFS</span><img src="images/blue_line2.jpg" width="300" height="1" alt="LINE" /><br />
      © 2010 STAF Summit. All rights reserved.<>


<>
</body>


body {
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 10px 8px 1em 8px;
max-width: 53em;
line-height: 1.35;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


html {
border: solid 2px black;
max-height: 1800px;
}


#info {
background-image: url(images/info2.png);
background-repeat: no-repeat;
width: 250px;
height: 150px;
}


#info_text {
top: 20%;
position: relative;
font-size: 24px;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}


a img {
border: none;
}


#icons {
text-align: center;
width: 250px;
}


#twitter, #facebook, #news {
padding-top: 15px;
}


#news {
width: 250px;
position: relative;
top: 15px;
font-size: 12px;
border-top: solid 1px #315c99;
border-right: solid 1px #aaaaaa;
border-bottom: solid 1px #aaaaaa;
border-left: solid 1px #aaaaaa;
}


#rightcontent {
position: relative;
top: -103em;
left: 270px;
width: 69%;
}


#banner {
position: relative;
border: dotted gray 2px;
height: 100px;
}


#nav {
color: #ffffff;
background: #0086bf;
text-align: center;
font-size: 26px;
border-top: black solid 2px;
border-bottom: black solid 2px;
margin-top: 15px;
}


#nav a {color: #ffffff;
text-decoration: none;}
#nav a:active {color: #0081bb;}
#nav a:visited {color: #ffffff;}
#nav a:hover {text-decoration: none; color: #ff9900;}


body#home a#homenav,
body#about a#aboutnav,
body#sponsorship a#sponsorshipnav,
body#attend a#attendnav {
color: navy;
text-decoration: none;
}


#placeholder1, #placeholder2, #placeholder3, #placeholder4 {
margin-top: 15px;
font-size: 12px;
}


#placeholder4 {
border: dotted gray 2px;
}


#headline {
color: #0081bb;
font-weight: bold;
font-size: 18px;
}


#story {
position: relative;
top: -100px;
left: 110px;
width: 78%;
}


#footer {
text-align: center;
color: #999999;
font-size: 10px;
position: relative;
top: -1250px;
padding-bottom: 50px;
}


.mid {
font-family: Tahoma, Geneva, sans-serif;
   font-size: 16px;
   }
   
.bold {
font-weight: bold;
}


.header {
font-size: 18px;
margin-bottom: -8px;
}


.parimg {
float: left;
margin: 4px;
padding-right: 6px;
}




.title {
font-size: 12px;
background-color: #eceef5;
padding: 8px;
margin-top: -15px;
font-weight: bold;
color: #333333;
}

Can anyone please tell me why it does this and how I can fix it and avoid it in the future?

haku · October 27, 2010

Some fairly major errors in your HTML: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwebdesignsbyliz.com%2FSTAFS%2F

Fix those, see if the problem goes away.

twilitegxa · October 27, 2010

I have fixed the problem by adding a display: inline block property to my html and #rightcontent elements. I don't think the errors in my code were the problem, as this issue was there before I added those elements, but I will still look into correcting those. :-)

As always, you have been very helpful!

haku · October 28, 2010

You should fix those errors anyways - you have a random head tag and body tag in the middle of your body. This is just going to cacade your issues as you go further and further, and make cross-browser testing pretty much impossible.

Sign In

Still having white space issues :-(

Recommended Posts

twilitegxa

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information