/    Sign up×
Community /Pin to ProfileBookmark

Firefox Table Problem – Will not Center

Copy linkTweet thisAlerts:
Jan 12.2006

I am working on a website for my friend’s upcoming wedding and I am having some problems with Firefox…it works fine IE.

For now all I have is a table split into 3 rows and 3 columns…all either 33% or 34% on the height and width, 34% being the middle square. I have a large jpg in the center square that should show up centered no matter what the resolution and it does this in IE. But in Firefox it works only with 1024.768. If you switch to 1280×1024 it puts the picture all the way at the bottom of the page and I see no reason why it would.

Here is the link.

try it in Firefox at both resolutions and you’ll see what I mean. Thanks in advance.

Mike Knott

[url]http://www.walnot.com/Briana/test.htm[/url]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@powerdemonJan 12.2006 — No matter then
Copy linkTweet thisAlerts:
@mycoolknotauthorJan 12.2006 — Thank you for your help but the code doesn't center the picture in the middle of the browser window. It puts it closer to the top. I need it in the middle both vertically and horizontally. I know this can be done. It works fine in IE but not Firefox. Your code actually puts at the top of the page in IE too but once you remove the XHTML tags from the top it centers it again.

Any more ideas?

Thanks...Mike
Copy linkTweet thisAlerts:
@CytaelJan 13.2006 — To be completely fair, this is an IE problem, not a Firefox problem. Firefox is actually rendering the table correctly. This is because height="" doesn't exist in the HTML spec (though IE uses it proprietarily), and also because your content takes up more than the 34% of the height of the page allotted to it.

That said, this code should get you what you're after. (There's most likely a better way to do it without using a table, but this is working for me in FF1.5)
<html>
<head>
<style type="text/css">
.wrapper { height: 100%; width: 100%; }
</style>
<title>Wedding</title>
</head>
<body>

<table class="wrapper">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td style="text-align: center"><img src="test.jpg" align="middle" border="0" height="527" width="662"></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>

</body>
</html>
Copy linkTweet thisAlerts:
@mycoolknotauthorJan 13.2006 — Give the man a clap

{clap clap clap}

It works! Thanks for your help. I've been stuck using Frontpage for so long and I never realized until recently just how many mistakes IE has in it!

Thanks again,

Mike
Copy linkTweet thisAlerts:
@oldmanJan 15.2006 — the css version is vertical-align:middle.
Copy linkTweet thisAlerts:
@CytaelJan 15.2006 — vertical-align only works on inline elements, doesn't it?
Copy linkTweet thisAlerts:
@thewebmanJan 15.2006 — I've only ever gotten it to work on tables.
×

Success!

Help @mycoolknot spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...