Solved

HTML Vertical Content Alignment for Website

Posted on 2011-02-22
8
205 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

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. …
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

751 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