Solved

HTML Vertical Content Alignment for Website

Posted on 2011-02-22
8
201 Views
Last Modified: 2013-11-05
I am creating my first website and ran into a CSS problem.  I'm attaching two pictures to show you what I mean.  I would like all browsers to display like IE does in the attached photo.  I want them to show fullscreen.  As you can see firefox is not doing this.  Here is my CSS file:  Thanks!
Not sure why the IE picture duplicated, sorry bout that.

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	line-height:1.5em;
}
body {
	  padding: 0;
  margin: 0;
  background: #f8f7e5 url(background.jpg) no-repeat center top;

  width: 100%;
  display: table;

}
a {
	font-size: 14px;
	color: #03F;
}
a:link {
	text-decoration: none;
	color: #006;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #03F;
}
#pageHeader {
	border:#999 1px solid;
	border-bottom:none;
	background: #f8f7e5 url(background.jpg) no-repeat center top;
	width:900px;
	
}
#pageContent {
	border:#999 1px solid;
	border-bottom:none;
	background: #f8f7e5 url(background.jpg) no-repeat center top;
	width:900px;

}
#pageFooter {
	border:#999 1px solid;
	background: #f8f7e5 url(background.jpg) no-repeat center top;
	width:900px;
	
}

Open in new window

IE IEff.JPG
0
Comment
Question by:clcinc
  • 3
  • 3
  • 2
8 Comments
 
LVL 7

Expert Comment

by:rgranlund
ID: 34955293
Add a height to #pageContent {
 also, you can add a clear both after you close the <div id="pageContent">
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 34955297
OR add the page background to the body in css.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34955346
You can't judge your display when you are missing one of the pictures.  IE has a user selectable option in Internet Options under the Advanced tab "Show image download placeholders"  to reserve the space on the page for pics and Firefox does not.
0
 

Author Comment

by:clcinc
ID: 34955412
@rgranlund
I tried both to no avail.  Would you mind showing me inside of my code what to do, please?  I am new to CSS.  

@DaveBaldwin
I uploaded a pic to the one where there was no pic, and it made no noticeable difference.  
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 7

Expert Comment

by:rgranlund
ID: 34955470
Try this:
body {
        padding: 0;
  margin: 0;
  background: #f8f7e5 url(background.jpg) no-repeat center top;
height:100%;
  width: 100%;
  display: table;}

#pageContent {
      border:#999 1px solid;
      border-bottom:none;
      background: #f8f7e5 url(background.jpg) no-repeat center top;
      width:900px;
height:600px; (or whatever)
clear:both;
}
#pageFooter {
      border:#999 1px solid;
      background: #f8f7e5 url(background.jpg) no-repeat center top;
      width:900px;
height:150px;
clear:both;
      
}


0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 34955497
I would take "display: table;" out of your body definition and as far as I know, body is always 100% width of the browser window so I wouldn't use that either.
0
 

Assisted Solution

by:clcinc
clcinc earned 0 total points
ID: 34955552
Okay, I got it.  I removed "display: table;" and added a height:100%; to the body.  

Here is the code for anyone that may need it.   Thanks fellas.

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	line-height:1.5em;
	
}
body {
	  padding: 0;
  margin: 0;
  background: #f8f7e5 url(background.jpg) no-repeat center top;

  width: 100%;
  heigth: 100%;

}
a {
	font-size: 14px;
	color: #03F;
}
a:link {
	text-decoration: none;
	color: #006;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #03F;
}
#pageHeader {
	border:#999 1px solid;
	border-bottom:none;
	background: #f8f7e5 url(background.jpg) no-repeat center top;
	width:900px;
	
}
#pageContent {
	border:#999 1px solid;
	border-bottom:none;
	background: #f8f7e5 url(background.jpg) no-repeat center top;
	width:900px;
	
}
#pageFooter {
	border:#999 1px solid;
	background: #f8f7e5 url(background.jpg) no-repeat center top;
	width:900px;
	
}

Open in new window

0
 

Author Closing Comment

by:clcinc
ID: 34990857
Accepting my own comment because it contains the solution.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now