| | |
How to vertically center your page's content in FF and IE.
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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.
- 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
is Not standard anymore? Because thats always worked in both browsers for me. Assuming all the content is inside one main table.
HTML and CSS Syntax (Toggle Plain Text)
<table align="center">
"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.
Check out my sig pic.
•
•
Join Date: May 2008
Posts: 1
Reputation:
Solved Threads: 0
•
•
•
•
isNot standard anymore? Because thats always worked in both browsers for me. Assuming all the content is inside one main table.HTML and CSS Syntax (Toggle Plain Text)
<table align="center">
HTML and CSS Syntax (Toggle Plain Text)
<table width=100% height=100%> [line was previously: <table align="center" valign="center">] <tr> <td align="center" valign="center"> ... </td> </tr> </table>
Last edited by honorsmacked; May 21st, 2008 at 10:48 pm. Reason: to properly format table, had a centering issue
You've tried:
table{
position:absolute;
left:25%;
}
right?
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.
Check out my sig pic.
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.
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
![]() |
Other Threads in the HTML and CSS Forum
- Previous Thread: horizontal divs
- Next Thread: alternative to iframes
Views: 3990 | Replies: 17
| Thread Tools | Search this Thread |
Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl







