Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

vertically aligned table problem 1

Status
Not open for further replies.
moron3

moron3

Technical User
Dec 2, 2008
17
US
The code below aligns a table exactly how I want and works in all browsers. The problem is when I open a link from that page to another page that uses the exact same method, the top of the table on that page will be at the very top of the page, not vertically aligned. If you hit the brower's refresh button, it will vertically align, but that's no good.

Is there a fix for this problem? Or do you know of a better way to vertically align a table that works in all browsers?


<body bgcolor="#000000" topmargin="0" leftmargin="0">

<table border="0" width="100%" id="table1" cellpadding="0" style="border-collapse: collapse" height="100%">
<tr>
<td>
<div align="center">
<table border="0" width="100%" id="table2" cellpadding="0" style="border-collapse: collapse" height="500" bgcolor="#000000">
<tr>
<td>
<p align="center"><font color="#FFFFFF">Table contents here</font></td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<p align="center"><a target="_blank" href="artmuseum.htm"><img border="0" src="itsok.png" width="273" height="14"></a></p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>

</body>
 
Sort by date Sort by votes

This is the best method of vertical align I've seen. If you wish to use only tables, try giving all your parent elements (html, body) height of 100% and use vertical align on the holding table. I would however advise the above described code.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
that looks good and works good but I don't see how to make the container bigger. If I try to put a bigger picture in there it throws it all off.

looks like there's absolute height/width values like this

margin-bottom:-13.75em; /* half of container's height */

which I don't understand that you have to adjust to make the box bigger and still have it be vertically aligned?
 
Upvote 0 Downvote
ok I got. I had a headache and didn't see the height/width values below it. *duh*
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
499
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
316
PeDa
PeDa
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
100
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
98
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
87
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top