How to position an input box properly? 2

[mopacfan]

I am having trouble figuring out how to postition the search box on a page and make it's positioning relative to the table in which it appears rather than the web page. Otherwise it does not appear in the correct location in anything other than 800x600. The page which is in development can be viewed at - pr.michaelnetherton.com

Here is the css from the stylesheet for the id of search:

.search
{
    FONT-SIZE: 10pt;
    Z-INDEX: 5;
    LEFT: 670px;
    BACKGROUND-IMAGE: url(../layout/searchbkg.gif);
    WIDTH: 75pt;
    CURSOR: crosshair;
    BACKGROUND-REPEAT: no-repeat;
    POSITION: absolute;
    TOP: 69px;
    HEIGHT: 14pt;
    BACKGROUND-: fixed
}

Any help will be greatly appreciated.

Thanks.

 

[philote]

It's because most browsers don't place absolutely positioned elements correctly. They 'should' be placed relative to their container, not the window. But most, if not all browsers position them relative to the window. You could instead float all of those links and the search box to the right using styles. And further, if you're feeling brave, you could get rid of your tables altogether and position everything using style sheets. Your layout is basically the "3 column layout", of which there are many examples of how to implement using css positioning. For example:

http://www.glish.com/css/7.asp

 

[mopacfan]

Indeed, I've read the various articles on the three column layouts. I'm not yet that adventureous since this is a commercial site and I need to get it done asap.

I know that absolute positioning is not the answer, that's why I'm asking for help. I can't figure out how to make it relative to it's container, the table.

 

[BillyRayPreachersSon]

mopacfan,

This should do the trick for you:

Change your ".search" style values for the following 3 properties to the values shown:

POSITION: relative;
TOP: -6px;
LEFT: 0px;

And remove the spacer.gif image before your search input box:

<img SRC=&quot;spacer.gif&quot; width=&quot;105&quot; height=&quot;5&quot;>

.

I think you may have been running into problems because of that hidden spacer image.

Hope this helps!

Dan

 

[BillyRayPreachersSon]

Incidentally,

Most browsers *do* position both absolute and relatively position items correctly.

It is just that most users either don't understand what these terms actually represent, or they don't understand the prerequisites for those positioning methods to work correctly.

Dan

 

[mopacfan]

BillyRayPreachersSon,

You're a genius. Thanks for your help. I've posted this on several other forums and Tek-Tips is the only place I've gotten a response, let alone an answer. Thanks again. That did the trick.

 

[philote]

BillyRayPreachersSon,
I see what I missed in the specs. Absolutely positioned elements are positioned relative to their closest ancestor who's position is NOT static, which I guess in most cases is the viewport of the browser.

You learn something new every day. Sorry for the incorrect info, mopacfan.