File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Pro CSS and HTML Design Patterns question Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Pro CSS and HTML Design Patterns question" Watch "Pro CSS and HTML Design Patterns question" New topic
Author

Pro CSS and HTML Design Patterns question

Gabriel Belingueres
Ranch Hand

Joined: Feb 09, 2007
Posts: 34
Hi,

I'm currently in a project where pages must be 100% fully valid and strict both XHTML and CSS.

I came across a problem when trying to center a form in the page, in that it didn't worked the way I though in FF. After a couple of web searches I found that the following solution works:

.centerform /* Internet Explorer */ {
text-align: center;
}

.centerform /* Mozilla Firefox alignment */ {
text-align: -moz-center;
}

but unfortunatelly it breaks the CSS validation, since -moz-center is not standard.

Now my question is: Is there any way to work around this problem using only valid syntax?

Regards,
Gabriel
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61433
    
  67

I've had good luck centering things in a cross-browser fashion using auto for the left-margin and right-margin values.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
This is a great question. It is exactly the kind of question that is answered by my book, which contains hundreds of solutions to problems like this.

A form is a block element not an inline element. Each type of element has a different box model in CSS and requires a different technique for positioning. Unless you understand these six box models, CSS is a great mystery that is hard to unravel.

My book, Pro CSS and HTML Design Patterns, explains the six box models and which XHTML elements use which box model. Armed with this information, my book then shows you how to position any XHTML element in any way you can imagine � using proper, valid, and accessible XHTML and CSS code that always works in all major browsers.

A form uses the block box model. In general, to center a block box, you set the left and right margins to auto using the following CSS code:

margin-left:auto; margin-right:auto;

You can see an example of exactly how to do this on my web site, cssdesignpatterns.com
http://cssdesignpatterns.com/Chapter%2009%20-%20POSITIONING3/Center%20Aligned/example.html

You can see examples of the six box models at
http://cssdesignpatterns.com/Chapter%2004%20-%20BOX%20MODELS/index.html

One last point. In addition to the six box models, there are three ways a box is sized in relation to its container: sized, shrinkwrapped, and stretched. These extents affect what techniques you can use to position a box. All this is clearly explained in my book with great examples that make it easy to understand and to apply in your code.

The bottom line is that there is much more to the story and the rest of the story is found in my book Pro CSS and HTML Design Patterns.
 
Don't get me started about those stupid light bulbs.
 
subject: Pro CSS and HTML Design Patterns question