How to vertically center your page's content in FF and IE.

Thread Solved

Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: How to vertically center your page's content in FF and IE.

 
0
  #11
Apr 14th, 2008
Several facts:

- The viewport height is not normally something the page rendering engine takes into account. It is expected to place things against the top, and then add them on downward until it runs out of material. The emphasis is in fitting things to the page horizontally. If it won't fit, the page expands downward.

- Vertical centering is not generally provided, because of the above, and because different computers have different screen resolutions.

- It is almost impossible to make something exactly fit a page in all browsers, screen resolutions, font size settings, opened window sizes, and browser defaults.

- You can define styles for the td and th tags setting the text-align and vertical-align styles to what you want. This overrides the browser defaults.

- To keep stuff from rendering different between IE and FF, do not put size styles (height and width) and nonzero surrounding styles (margin, border, and padding) in the same tags or styles. IE and FF render them in the opposite nesting order. Use two nested tag pairs to specify the order they will be applied.

I suggest that you center things horizontally, and let the vertical parts end up where they do. Busting your buttons over trying to center stuff on the page vertically in all browsers and window sizes is a waste of time.
Last edited by MidiMagic; Apr 14th, 2008 at 5:53 pm.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: May 2006
Posts: 599
Reputation: kylethedarkn is an unknown quantity at this point 
Solved Threads: 36
Team Colleague
kylethedarkn's Avatar
kylethedarkn kylethedarkn is offline Offline
A.K.A. The Laughing Man

Re: How to vertically center your page's content in FF and IE.

 
0
  #12
Apr 14th, 2008
is
HTML and CSS Syntax (Toggle Plain Text)
  1. <table align="center">
Not standard anymore? Because thats always worked in both browsers for me. Assuming all the content is inside one main table.
"I thought what I'd do was, I'd pretend I was one of those Deaf-Mutes"..."Or should I?"--The Laughing Man
Check out my sig pic.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: How to vertically center your page's content in FF and IE.

 
0
  #13
Apr 22nd, 2008
Use styles instead of center or align=center.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 626
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 10
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: How to vertically center your page's content in FF and IE.

 
0
  #14
Apr 22nd, 2008
Its a pain I have been searching on the internet, like midimagic said "there is no solution".

So just do your best I guess

Thanks anyways, people.
Reply With Quote Quick reply to this message  
Join Date: May 2008
Posts: 1
Reputation: honorsmacked is an unknown quantity at this point 
Solved Threads: 0
honorsmacked honorsmacked is offline Offline
Newbie Poster

Re: How to vertically center your page's content in FF and IE.

 
0
  #15
May 21st, 2008
Originally Posted by kylethedarkn View Post
is
HTML and CSS Syntax (Toggle Plain Text)
  1. <table align="center">
Not standard anymore? Because thats always worked in both browsers for me. Assuming all the content is inside one main table.
This code would indeed center the contents horizontally, but I use
HTML and CSS Syntax (Toggle Plain Text)
  1. <table width=100% height=100%> [line was previously: <table align="center" valign="center">]
  2. <tr>
  3. <td align="center" valign="center">
  4. ...
  5. </td>
  6. </tr>
  7. </table>
to center both horizontally and vertically. When the window changes size, the content adjusts to remain centered. It works in IE and FF , but not sure if this is the way you would go about properly aligning multiple-celled tables though...
Last edited by honorsmacked; May 21st, 2008 at 10:48 pm. Reason: to properly format table, had a centering issue
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 626
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 10
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: How to vertically center your page's content in FF and IE.

 
0
  #16
May 21st, 2008
Ya thats sorta cheating as I was hoping to find a css solution but pretty much thats what I have had to end up resorting to, but thanks
Reply With Quote Quick reply to this message  
Join Date: May 2006
Posts: 599
Reputation: kylethedarkn is an unknown quantity at this point 
Solved Threads: 36
Team Colleague
kylethedarkn's Avatar
kylethedarkn kylethedarkn is offline Offline
A.K.A. The Laughing Man

Re: How to vertically center your page's content in FF and IE.

 
0
  #17
May 21st, 2008
You've tried:

table{
position:absolute;
left:25%;
}

right?
"I thought what I'd do was, I'd pretend I was one of those Deaf-Mutes"..."Or should I?"--The Laughing Man
Check out my sig pic.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: How to vertically center your page's content in FF and IE.

 
0
  #18
May 25th, 2008
Horizontal centering is easy, if you don't have size styles (height, width) and nonzero surrounding styles (margin, border, padding) applied to the same tag. Nest two tags if you need both.

The Internet is not designed for vertical centering. Web pages are designed to expand downward when they need more room. Add in different screen resolutions and window sizes (The browser might be restored down - and don't forget Web TV's 320x192 pixel screen), and the impossibility of vertical centering is quite evident.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Other Threads in the HTML and CSS Forum


Views: 3990 | Replies: 17
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC