mcqueena
asked on
Need to set table cell hieght to a multiple of the background pattern.
I have a page with a table. The first row of the table contains a title image, the second row has a menu image in it. The third row has three columns, the first has a left side border, the middle has the body of the page, and the last has the right side board. The fourth row has a footter image to complete the boarder around the page. The problem is that the border is a 12px high pattern. If the row height is not a multiple of 12px it does not line up with the bottom border, to create a continuous pattern. I know that I can change the height of the row but I need to have the body flexible, for data from a database, etc. Thanks in advance for any help. The page is located at http://echelon.laurelfirstassembly.org
You could reduce the height of the border pattern to 6px high and still have the same repeatable pattern.
Different browsers do render tables differently as seanpowell said, so you will still have an issue.
If you set the side cells of the table to be patterened with a known number of images using <img... you could set a max height of your table, but you could still have problems after that.
flaxius
Different browsers do render tables differently as seanpowell said, so you will still have an issue.
If you set the side cells of the table to be patterened with a known number of images using <img... you could set a max height of your table, but you could still have problems after that.
flaxius
I'm sure you were trying to say something there, but it completely eludes me.
Sean
Sean
Having read what I typed I see your point.
What I meant was that the pattern used in the side bar could be dropped to be only 6 pixels high. It would still work as a repeat.
If you used the two side bars as table cells, instead or borders, and put in a set number of these images you could control the hieght of the table by verying how many images you put in the cell. This would mean however, though that you would be using <img src etc> instead of a table border or background.
Hope this makes a bit more sense!
What I meant was that the pattern used in the side bar could be dropped to be only 6 pixels high. It would still work as a repeat.
If you used the two side bars as table cells, instead or borders, and put in a set number of these images you could control the hieght of the table by verying how many images you put in the cell. This would mean however, though that you would be using <img src etc> instead of a table border or background.
Hope this makes a bit more sense!
ASKER
Not sure how changing it to 6px helps. It is still a pattern and with <TD BACKGROUND='...> The row height could be 31 with is not a multiple of 6 and the pattern would be off. Like I said in my question, I can't set the row height because the data may come from a database. If the data exceeds my row height then the table will expand and the pattern will be off.
mcqueena,
There's nothing you can do because your layout is based on the rigidity of print, not the flexibility of the screen.
You need to rework the design.
Sean
There's nothing you can do because your layout is based on the rigidity of print, not the flexibility of the screen.
You need to rework the design.
Sean
ASKER
Actually this is not true, I figured it out myself. Here is what I did. This works and IE and Mozilla.
page header:
<HTML>
<HEAD>
<TITLE>Echelon Youth Ministries - a new experience in God</TITLE>
<LINK REL='stylesheet' TYPE='text/css' HREF='style.css'>
<SCRIPT LANGUAGE='JavaScript'>
function changeCellHeight() {
document.getElementById("b
= (Math.ceil(document.getEle
}
</SCRIPT>
</HEAD>
<BODY onLoad='changeCellHeight()
TOPMARGIN='0' BOTTOMMARGIN='0' LEFTMARGIN='0' RIGHTMARGIN='0'>
cell tag:
<TD ID=\"border\" CLASS='border_ls' WIDTH='60'></TD>
page header:
<HTML>
<HEAD>
<TITLE>Echelon Youth Ministries - a new experience in God</TITLE>
<LINK REL='stylesheet' TYPE='text/css' HREF='style.css'>
<SCRIPT LANGUAGE='JavaScript'>
function changeCellHeight() {
document.getElementById("b
= (Math.ceil(document.getEle
}
</SCRIPT>
</HEAD>
<BODY onLoad='changeCellHeight()
TOPMARGIN='0' BOTTOMMARGIN='0' LEFTMARGIN='0' RIGHTMARGIN='0'>
cell tag:
<TD ID=\"border\" CLASS='border_ls' WIDTH='60'></TD>
"This Friday Kakalicious Kevin brings on the ispiration. So make sure you come and find out how to be Kakalicious too."
Kakalicious????
I do not know in how many languages Kaka is referring to human waste, but it must be quite a few... ;)
However after googling it, I see quite a few deities and birds there too so perhaps I am mistaken
Kakalicious????
I do not know in how many languages Kaka is referring to human waste, but it must be quite a few... ;)
However after googling it, I see quite a few deities and birds there too so perhaps I am mistaken
ASKER
It's just a nickname. You have too much time on your hands.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Browsers will treat row and cell heights differently, so you'll never get it exact.
Sean