Welcome to WebmasterWorld Guest from 54.161.128.52

Forum Moderators: incrediBILL

Message Too Old, No Replies

Firefox table align problem

valign not working

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

New User

10+ Year Member

joined:Mar 28, 2005
posts:7
votes: 0


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.

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

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

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

New User

10+ Year Member

joined:Mar 28, 2005
posts:7
votes: 0


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.... =(
5:20 pm on Mar 29, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:May 7, 2003
posts:472
votes: 0


Does adding align=top in the iframe code do the trick?
5:35 pm on Mar 29, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 28, 2005
posts:7
votes: 0


Sadly, no. It didn't work. Thanks though.
6:11 pm on Mar 29, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 1, 2003
posts:70
votes: 0


On main.html, set margin-top: 0; padding-top: 0
1:37 am on Mar 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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"

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

New User

10+ Year Member

joined:Mar 28, 2005
posts:7
votes: 0


Yeah, all my align/valign tags are right... Is there anyway to give the table an id tag and valign it through CSS?
3:08 pm on Mar 30, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 1, 2003
posts:70
votes: 0


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.

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

New User

10+ Year Member

joined:Mar 28, 2005
posts:7
votes: 0


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?

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

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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

vertical-align:top;

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

New User

10+ Year Member

joined:Mar 28, 2005
posts:7
votes: 0


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