[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Need to set table cell hieght to a multiple of the background pattern.

Posted on 2004-11-09
Medium Priority
Last Modified: 2010-04-09
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
Question by:mcqueena
  • 3
  • 3
  • 2
  • +2
LVL 31

Expert Comment

ID: 12533588
You need to rethink the design here...
Browsers will treat row and cell heights differently, so you'll never get it exact.


Expert Comment

ID: 12543080
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.

LVL 31

Expert Comment

ID: 12543180
I'm sure you were trying to say something there, but it completely eludes me.

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 12543299
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!

Author Comment

ID: 12543836
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.
LVL 31

Expert Comment

ID: 12544213
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.


Author Comment

ID: 12544817
Actually this is not true,  I figured it out myself.  Here is what I did.  This works and IE and Mozilla.

page header:

<TITLE>Echelon Youth Ministries - a new experience in God</TITLE>
<LINK REL='stylesheet' TYPE='text/css' HREF='style.css'>
function changeCellHeight() {
      = (Math.ceil(document.getElementById("border").clientHeight/6))*6


<BODY  onLoad='changeCellHeight()' BGCOLOR='#595959'

cell tag:

<TD  ID=\"border\" CLASS='border_ls' WIDTH='60'></TD>
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13524037
"This Friday Kakalicious Kevin brings on the ispiration. So make sure you come and find out how to be Kakalicious too."


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

Author Comment

ID: 13536138
It's just a nickname.  You have too much time on your hands.

Accepted Solution

PAQ_Man earned 0 total points
ID: 13561122
PAQed with points refunded (500)

Community Support Moderator

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question