CSS positioning from the center of the screen problem....

[mikenotmike]

Great to find this place, found some help here already so I thought I'd pose this question here...

I'm trying to position a DIV to be in an EXACT location, I have it padded from a DIV anchor located at the top of the screen, so I can go down and left/right with complete control.

I'm using it to mount my search box exactly inside a menu bar, tables were forcing the height of the menu to expand to much, so I thought this would be a good solution.

Seems to have 3 problems...

A) it adjusts automatically from the center up until i place the form or a table within the DIV, then it becomes a static location on the screen in firefox, though IE seems to continue adjusting normally as it should.

B) in ie6 is seems to be about 10 pixels to the left in position than in ie7 or firefox???

C) It's creating about 100 or more wasted space pixels to the right of it, since it's already at the right edge of the design, it's forcing horizontal scroll bars to activate when the width of the window hugs the template.

Would someone mind taking a look and offering advice?

links is http://www.gseworld.com/geosport/test.htm

The specific CSS references are at the bottom of the CSS page

Thanks a lot

MIKE

[mikenotmike]

Is it possible to use css absolute positioning, nested from a centered (margin:auto) DIV, and actually place it in an EXACT location that doesn't vary from browser to browser, or should I just be using javascript for this anyways?

[KevinADC]

<div style="poition: absolute; left: 100px; top: 100px; z-index: 2;">

[mikenotmike]

<div style="poition: absolute; left: 100px; top: 100px; z-index: 2;">

the only difference is the z-index... Hows that supposed to fix it?

[KevinADC]

Sorry, was a sort of general commnt, to answer this question:

Is it possible to use css absolute positioning, nested from a centered (margin:auto) DIV, and actually place it in an EXACT location that doesn't vary from browser to browser, or should I just be using javascript for this anyways?

You would need to write a seperate style sheets for each user agent (IE, Mozilla, etc), detect the user agent when the document is requested, and load up the appropriate style sheet.

[mikenotmike]

That's a good answer, hadn't thought of doing that... only potential problem is I still can't get firefox to position based off the center, as soon as I add the search form, even if it's in a table, it becomes statically located instead of adjusting with the resizing of the window. When I validate, it says I can't have a table or form within a span or <p> tag, but removing those doesn't fix it either :(

[KevinADC]

Welcome to the ugly world of CSS.

[mikenotmike]

I'm sure I've just got one little style wrong and it's screwing it all up, just can't figure out which one is keeping firefox from properly centering with a table or form in the DIV