Click to See Complete Forum and Search --> : Centering a block in IE, Nav, & Firefox


tmigliorino
12-19-2005, 02:37 PM
I have a form within a box (<div>). The css statement below is the statement for the box.

#idClientLoginMainPage{ position: absolute; left: 0px; top: 0px; width: 700px; height: 550px; padding:10px; align:center; text-align:center }

I want to center the form in the 'ClientLoginMainPage'. The code above works fine in IE but it doesn't work in Nav or FF. The form moves to the left in both Nav and FF.

This css statement is the statment for the form:
#idSelectClientForm{ position: absolute; border:5px outset #C0C0C0; top: 50px; width: 350px; padding:15px; height:160px; text-align:center }

The website is http://www.cjmnew.cjmgraphics.com. Select 'Client Pages' from the top menu.

Although I have been working with websites for a while I've not really concered myself with crossbrowser problems. Well I need to now.

Thanks,

_Aerospace_Eng_
12-19-2005, 02:42 PM
#idClientLoginMainPage{width: 700px; height: 550px; padding:10px; margin:auto; text-align:center; }

#idSelectClientForm{ border:5px outset #C0C0C0; margin-top: 50px; width: 350px; padding:15px; height:160px; text-align:center;margin:auto; }
What is up with all of the absolute positioning? Once you use absolute positioning its taken out of flow and the browser kind of ignores it. align:center; isn't valid CSS either. Your opening form tag should actually be before the opening div tag and your closing form tag should be after your closing div tag rather than the way you have it now. You will get an error (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cjmnew.cjmgraphics.com%2FCJMClientPage.asp) from the validator. When you use any strict doctype the name isn't valid either in the form tag, you must use id if you want to access the form or use square bracket notation.

Kravvitz
12-19-2005, 09:45 PM
How to Center Elements with CSS (in IE5+/Win and other browsers) (http://www.dynamicsitesolutions.com/css/center_element/)

There is no "align" property in CSS.