CSS - Mid-paragraph <p> Causes Space At Bottom Of Block

I can't seem to work out where the huge space at the bottom of the pages are coming from.

This is the test page
http://midnighttempest.com/layouttest.html

as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off.
Anyone help?

Thanks for taking the time to read my question.

I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why?

In IE you can see the container color (the non Orange colors) but in FF you don't.

I've tried a bunch of stuff but can't figure it out.


http://stuccotech.bravehost.com/

CSS:
Code:

html, body {
height: 100%; 
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center; 
}

.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
  
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}

.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}

.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline; 
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}

.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}

.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}

.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}

p.MainText {
color: white;
font-size: 14px;
}

p.MainText:first-line {
text-indent: 5px;
}

.ContentText {
color: white;
font-size: 14px;
}

.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}

.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}

.PortfolioPicture {
width: 414px;
height: 318px;
}

.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}

.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}

.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}			

.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}

.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}

.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;  
}

.BottomNavHolder {
float: right;
}

.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}

.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}

.ListItemHome {
float: left;
width: 76px;
height: 20px; 
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}

.ListItemBuilding {
float: left;
width: 110px;
height: 20px; 
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}

.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}

.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}

.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}

a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}

a.BottomNav:visited {
text-decoration: none;
color: gray;
}

a.BottomNav:hover {
text-decoration: underline;
color: white;
}

a.BottomNav:active {
text-decoration: none;
color: white;
}

a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}

a.ContentText:visited {
text-decoration: none;
color: gray;
}

a.ContentText:hover {
text-decoration: underline;
color: white;
}

a.ContentText:active {
text-decoration: none;
color: white;
}

a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemHome:hover {
text-decoration: underline;
color: white;
}

a.ListItemHome:active {
text-decoration: none;
color: white;
}

a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}

a.ListItemBuilding:active {
text-decoration: none;
color: white;
}

Thanks,

Brad

The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout.

At the top, I could create the space I want.
Margin-bottom: 30px doesn't do the trick.

I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful!

You can check out the site and css he


I can't post the url because I'm a new user
Can a mod post my url?

EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site.

Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you

I have 2 div .In top div i have menu.In bottom div i have iframe .
i want that top div should take about 20 % space and bottom div take rest of the space .iframe refresh every min and it content changes everytime .Currently scrollbar are appear both horizontally and vertically .
How can i remove this scrollbar.
I give a sample code
<body class="body">
<div class="container">
<div class="top">
some contents here
</div>
<div class="bottom">
<iframe class="iframeclass></iframe>
</div>
</div>
</body>
how i design this classes
The content of iframe is dynamic its height change everytime page refresh.

Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often....
----------
Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve.

So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening.

Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome:

Screenshot

The page is just the index page at:
GuyMerritt.net

The CSS files looks like this:


Code:

body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial; 
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
  width: 100%;
  max-width: 250px;
  height: auto;
}
div#slides {
	width: 500px;
	height: 280px;
	overflow: hidden;
}

div#slides div {
	height: 280px;
	width: 500px;
	font-size: 100px;
	line-height: 200px;
	text-align: center;
	color: #fff;
}

ul#ticker {
	height: 1.4em;
	overflow: hidden;
	border: solid 1px #aaa;
	background: #ccc;
}

ul#ticker li {
	padding: 0.2em 0;
}

/* @group global */

p#links {
	padding-top: 50px;
	clear: both;
}

a#avatar {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

a#avatar img {
	border: none;
}

h1 {
	color: #0094d5;
}

a {
	color: #0094d5;
}

a:visited, a:hover {
	color: #00577e;
}

.red {
	background: #e40053;
}

.blue {
	background: #0094d5;
}

.green {
	background: #43aa38;
}

/* @end */

At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)?

Thanks again,

Guy Merritt,
Flint, MI

Heya guys,

Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done.

I've got this in style.css file:

Code:

/* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}

.topform {
	position: absolute;
	right: 5px;
	top: 65px;
	width: 300px;
	font-size: 10px;
	font-family: myriad, verdana, sans-serif;
	text-align: right; }
	
input, form {
	font-size: 11px;
	font-family: myriad, verdana, sans-serif;
	margin-bottom: 0px;
	margin: 0px; }
/* End of SEARCH Bar */

Which refers to this part of my index.php page:

Code:

  <!-- Top right SEARCH -->
  <div class="topform"> 
    <div class="lb_bl"> 
      <div class="lb_br"> 
        <div class="lb_tl"> 
          <div class="lb_tr">
            <form name="form" id="form" method="post" action=""><input name="search" type="text" />
            <input name="search" type="button" value="SEARCH" /></form>
          </div>
        </div>
      </div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <!-- End of top right SEARCH -->

But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com

Thanks in advance to anyone who can help - Gaz

this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things)

So I have 3 images for the top of my page and 3 images for the bottom.

The page is enclosed in a div frame titled "frame"

each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe"

Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom.

Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame"

I've tried some code in here to do it and it doesn't work..


any help here?

thanks!

Code:

<style type="text/css">
	
	body {
		text-align:center;
		height:100%;
		min-height:100%;
		padding:0px;
		}
	
	#frame {
		width:800px;
		height:100%;
		min-height:100%;
		margin-right:auto;
		margin-left:auto;
		margin-top:0px;
		padding:0px;
		text-align:left;
		position:relative;
		}
		
	#contentlefttop {
		width:155px;
		height:282px;
		padding:0px;
		float:left;
		background-image: url(images/layout_01.gif);
		background-repeat:no-repeat;
		}
	
	#leftframe {
	float:left;
	width:155px;
	position:relative;
	height:100%;
	min-height:100%;
	}
	
	#contentleft {
	clear:left;
	float:left;
	padding:0px;
	width:155px;
	padding-bottom:270px;
	}
	
	#contentleftbottom{
	width:155px;
	height:270px;
	/*clear:left;
	float:left;*/
	padding:0px;
	position:absolute;
	bottom:0;
	background-image: url(images/layout_07.gif);
	background-repeat:no-repeat;
	}
	
	#contentcenter {
		width:486px;
		padding:0px;
		clear:left;
		float:left;
		text-align:center;
		min-height:100%;
		height:100%;
		padding-bottom:53px;
		}
		
	#rightframe {
	float:left;
	position:relative;
	height:100%;
	min-height:100%;
	width:159px;
	}
	
	#centerframe {
	float:left;
	position:relative;
	height:100%;
	width:486px;
	}
	
	#contentrighttop {
		width:159px;
		height:282px;
		padding:0px;
		clear:left;
		float:left;
		background-image:url(images/layout_03.gif);
		background-repeat:no-repeat;
		background-position:top;
		}
		
	#contentright {
	clear:left;
	float:left;
	width:159px;
	padding:0px;
	height:100%;
	padding-bottom:270px;
	}
	
	#contentrightbottom{
	width:159px;
	height:270px;
	/*clear:left;
	float:left;*/
	position:absolute;
	bottom:0;
	padding:0px;
	background-image: url(images/layout_08.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	}
	
	#contentheader {
	width:486px;
	height:135px;
	float:left;
	background-image: url(images/layout_02.gif);
	background-repeat:no-repeat;
		}
		
	#contentfooter {
	/*clear:left;
	float:left;*/
	width:486px;
	height:53px;
	background-image: url(images/layout_09.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:0;
	}
	
	#sitemessage {
	margin-left:17px;
	margin-right:31px;
	height:90px;
	text-align:center;
	font-size:12px;
	}
	
	#wisemanquote {
	margin-left:22px;
	margin-right:24px;
	height:85px;
	text-align:center;
	font-size:12px;
	}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}
	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<div id="frame">
  	<div id="leftframe">
        <div id="contentlefttop">
        	<div id="sitemessage"></div>
        </div>
        <div id="contentleft">Left</div>
        <div id="contentleftbottom"></div>
    </div>
    <div id="centerframe">
    	<div id="contentheader"></div>
        <div id="contentcenter">
          <p>Center</p>
        </div>
        <div id="contentfooter"></div>
    </div>
    <div id="rightframe">
        <div id="contentrighttop">
        	<div id="wisemanquote"></div>
        </div>
        <div id="contentright">Right</div>
        <div id="contentrightbottom"></div>
    </div>
</div>

My "sidebar" div isn't appearing, and neither is my paragraph inside my "mainContent" div. I have looked online and proofed it over and over, but can't seem to find the problem. Any help will be appreciated.

CSS:
Code:

/*

Designed by: Derrick Zavarella
Date: 10/19/2010 

Primary Colors:
#ffffff
#cbe86b (light green)
#f2e9e1 (light gray)
#1c140d (light black)
#cbe86b (lime green)



*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
body{
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
#container{
	width: 960px;
	margin: auto;
}
#header{
	width: 960px;
	height: 135px;
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	margin-top: 20px;
	
}
#header h3, p{
	display: none;
}
#nav{
	width: 960px;
	height: 20px;
	background-color: #1c140d;
}
#nav ul{
	float: left;
	list-style: none;
	margin-top: 3px;
}
#nav ul li{
	display: inline;
	margin-left: 5px;
	
}
#nav ul li a{
	color: #f2e9e1;
	text-decoration: none;
	font-style: italic;
	font-size: 10px;
}
#nav ul li a:hover{
	color: #cbe86b;
}
#mainContent{
	float: right;
	width: 760px;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	
}
#mainContent h2{
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	margin-top: 15px;
}
#mainContent p{
	color: #f2e9e1;
}
#sidebar{
	float: left;
	width: 200px;
	background-color: #e7e6e6;
}

HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="content-type" content=
        "text/html; charset=windows-1250">
        <link rel="stylesheet" href="style.css" type="text/css">

        <title>deBuhrs Seed & Feed</title>
    </head>

    <body>
        <!--container begins here-->

        <div id="container">
            <!--header begins-->

            <div id="header">
                <h3>deBuhrs</h3>

                <p>seed&feed</p>
            </div>
            <!--end header-->
            <!--navigation begins-->

            <div id="nav">
                <ul id="menu">
                    <li><a href="index.html">home</a></li>

                    <li><a href="about.html">about</a></li>

                    <li><a href="products.html">products</a></li>

                    <li><a href="staff.html">staff</a></li>

                    <li><a href="contact.html">contact us</a></li>

                    <li><a href="affiliate.html">affiliate</a></li>
                </ul>
            </div>
            <!--navigation ends--><!--mainContent begins-->

            <div id="mainContent">
                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.<br>
                </p>
                
				<hr align="center" width="450" noshade="noshade" color="#e7e6e6">

                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.</p>
            </div>
            <!--end mainContent-->
            <!--sidebar begins-->

            <div id="sidebar">
            	
            </div>
            <!--sidebar ends-->
            <!--footer begins-->

            <div id="footer">
            </div>
            <!--footer ends-->
        </div>
        <!--end container-->
    </body>
</html>

Hey,

i've got a contact form , and to the right of it i want the contact information.

it's showing up in FF, but won't sit next to the form, it's going to the top, and doesn't even show up in IE...it's in the source, but not visible on the page.

Here's the CSS;
Code:

#formbox {
margin:10px 15px;
padding:15px;
border:1px solid #333;
width:40%;
font-size:8pt;
color:white;
}
.inputareas {
width:60%;
border:1px solid white;
background-color:#FBAB2B;
color:#333;
padding:1px;
margin:2px;
}

.submit {
border:1px solid white;
background-color:#FBAB2B;
color:#333;
margin:2px;
}

textarea {
font-size:8pt;
color:#333;
}

/* contact form paragraph */

.contactform {
border:1px solid #333;
width:35%;
font-size:8pt;
color:white;
position:relative;
left:55%;
z-index:20;
}

and the html;
Code:

		  <p class="contactform"> <strong>Jack Rosenberg</strong><br> phone - 734-536-6088<br> 
			fax - 734-943-6039<br> email - jrosen@canamdesign.com<br><br> <strong>Pete 
			Komsic</strong><br> phone - 519-996-4673<br> email - pkomsic@canamdesign.com<br><br> 
			<strong>Scott Stein</strong><br> phone - 519-564-7175<br> email - sstein@canamdesign.com<br>	
		  </p>
		  <div id="formbox"> 
			<p>Please complete the following form, ensuring <b>ALL</b> fields are 
			  complete.</p>
			<!-- DISPLAYS ERRORS IF FORM IS INCOMPLETE -->
			<?php 
					// Check to see if there has been any errors...
					if(!empty($errors)) {
									
					echo '<h3>Sorry there has been the following errors with your form :</h3>';
					// Print the errors 
					echo "<div class=\"reglist\">";
					echo "<ul>"; 
					foreach($errors as $error) { 
					echo "<li>$error</li>"; 
					} 
					echo "</ul>";
					echo "</div>"; 
					}							
			?>
			<!-- DISPLAYS INFO IF FORM IS PROPERLY COMPLETED -->
			<?php 
									
					// We only want to show the form if there has been no sucessful post
					if(isset($post_sucess)) {
			
			?>
			<h3>The following information was sent to us by you:</h3>
			<p><b>Contact Name:</b><br> <?php echo htmlentities ($_POST['name']); ?></p>
			<p><b>Email:</b><br> <?php echo htmlentities ($_POST['email']); ?></p>
			<p><b>Phone Number:</b><br> <?php echo htmlentities ($_POST['Phone']); ?></p>
			<p><b>Inquiry:</b><br> <?php echo htmlentities ($_POST['inquiry']); ?></p>
			<?php
									
					} else { // Else show the form
								
				?>
			<form method="post" name="contactform" action="<?php $_POST['PHP_SELF'];?>">
			  <fieldset>
			  <legend>Name:<br></legend>
			  <input type="text" name="name" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Email:<br></legend>
			  <input type="text" name="email" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Phone Number:<br></legend>
			  <input type="text" name="phone" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Inquiry:<br></legend>
			  <textarea rows="4" cols="30" class="inputareas" name="inquiry"></textarea>
			  </fieldset>
			  <fieldset>
			  <legend> 
			  <input type="submit" value=".:Submit:." class="submit" name="submit">
			  </legend>
			  </fieldset>
			</form>
			<?php } ?>
		  </div>
		  <!-- CLOSES FORM BOX -->

thanks!

Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas.

Here is the IE Screenshot and the Firefox Screenshot

Also...
The CSS and The HTML

Hi,

I'm getting a weird problem when viewing my client's site with IE6, however, it works fine in IE7 and FF.

Here's the link:
http://www.groundedgroup.com/client...or-sale/554421/

As you'll notice, the middle area containing the description of the home is messed up. Basically, the background resizes as you move the browser scroll bar up and down. Never seen this before. Does the same with the comment area below, too.

Any ideas what's causing this?

Thanks in advance.

I think this is a very basic quesiton, but I am stumped with it. How can I make a paragraph that will be a specific width in the middle of the page for example regardless of the size of the monitor or browser window - that is, the paragraph will stay the same width even though it is on a page that will stretch to fill the entire window? This can be done of course with tables, but I would like to know how to do it with CSS. The margin property seems of no help because you must assume a given size of the page or parent element.