Solved

HTML Vertical Content Alignment for Website

Posted on 2011-02-22
8
206 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

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
 
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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

623 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