Firefox table align problem - Firefox Browser Usage and Support forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Firefox table align problem

valign not working

Delia_35

1:01 pm on Mar 28, 2005 (gmt 0)

10+ Year Member

Hi all. I'm having some problem with a table in Firefox. I want to make a simple little table that's centered and valigned to the top. Here's the code I used:

<html>
<head>
<title>Scarlett's Web</title>
<style type="text/css">
body {
color: #2C1712;
background: #fff;
margin: 0px;
}
a:link {
text-decoration: none;
color: #2C1712;
}
a:visited {
text-decoration: none;
color: #603811;
}
a:hover, a:active {
text-decoration: underline;
color: #A67C51;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="2C1712">
<table border="1" width="500" height="100%" align="center" valign="top">
<tr align="left" valign="top">
<td><font face="verdana" size="2">lalalalala</font></td>
</tr>
</table>
</body>
</html>

It works fine in IE but in Firefox, the valign is always centered. This table is in an iframe. Could that be the problem? Here's that code, just in case:

<IFRAME NAME="frame1" SRC="main.html" TITLE="content" height="100%" width="507" frameborder="0" scrolling="auto"></IFRAME>

I'd appreciate any help, thanks.

tedster

3:46 pm on Mar 28, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hello, Delia_35, and welcome to the forums.

Try the valign attribute in the table cell (the td itself) that holds the element you want to vertically align.

Delia_35

5:04 pm on Mar 28, 2005 (gmt 0)

10+ Year Member

Actually, I want the table *itself* to be centered and to the top, not what's *in* the table. That alignment goes in the <table> tag, right? For some reason, Firefox just doesn't want to do it.... =(

wrgvt

5:20 pm on Mar 29, 2005 (gmt 0)

10+ Year Member

Does adding align=top in the iframe code do the trick?

Delia_35

5:35 pm on Mar 29, 2005 (gmt 0)

10+ Year Member

Sadly, no. It didn't work. Thanks though.

scottmack

6:11 pm on Mar 29, 2005 (gmt 0)

10+ Year Member

On main.html, set margin-top: 0; padding-top: 0

tedster

1:37 am on Mar 30, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Although I don't see this error in the mark-up you pasted in above, you might also double check your full mark-up for the difference between valign and align. This is often the source of hard-to-find alignment problems.

valign= takes the values "top", "middle", "bottom" or "baseline"
align= takes the values "left", "center" or "right"

Delia_35

1:17 pm on Mar 30, 2005 (gmt 0)

10+ Year Member

Yeah, all my align/valign tags are right... Is there anyway to give the table an id tag and valign it through CSS?

scottmack

3:08 pm on Mar 30, 2005 (gmt 0)

10+ Year Member

What is the table doing now? Where is it on the html page?
Do you want the table to be at the top of the page?

If so, put the table code first in your file, then remove margins and padding of the page.
Valign is not a property of tables.

Delia_35

10:47 pm on Apr 1, 2005 (gmt 0)

10+ Year Member

in firfox, the table is sitting in the middle of the page. The table holds everything else in the page (all the content, etc). Right now, there's like a 2 inches gap from the top of the table to the top of the page. I want the table to be at the stop of the page (so that there is no more gap).

I tried what you said (took the margins and padding out), but that just made it worse... Without those, the table was 2inches from the top and a few cms from the left.

The only reason I'm using a table at all is because I wanted to be able to control the width of the page because it was inside of a iframe. Can I control the width without the table? With CSS or whatnot?

tedster

4:00 am on Apr 2, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Is there anyway to give the table an id tag and valign it through CSS?

vertical-align:top;

Delia_35

4:47 am on Apr 2, 2005 (gmt 0)

10+ Year Member

Woohoo! It works now. Thanks for your help all. A combo of "vertical-align:top;" and tweaking the <iframe> tag made it work. Thanks. :-)