Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Aligning a fieldset form in center of page 1

Status
Not open for further replies.

vego

Programmer
Jun 26, 2004
47
US
Hi, I'm curious to know the syntactically correct method to align the following in the center of a page.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Form</title>

<style type="text/css">
<!-- 
form {width:26em}
fieldset {padding:1ex}
legend {font-size:150%; font-weight:bold}
label {display:block; margin:1em 0}
input {display:block; width:30ex}
textarea {display:block; width:50ex; height:7em}
button {display:block; margin:auto}
-->
</style>

</head>
<body>
<form action="script.cgi">
<fieldset>
<legend>My Form</legend>
<label>First Name:<input type="text" id="fname"></label>
<label>Last Name:<input type="text" id="lname"></label>
<label>E-mail:<input type="text" id="email"></label>
<label>Subject:<input type="text" id="subject"></label>
<label>Message:<textarea id="message"></textarea></label>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>

TIA
 
actually you need to center align the form, that being the enclosing block element. So adding "margin:auto;" to the form style should work.



Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Thanx, Chris...that did it...
but I also viewed it in other older browsers like IE 5.0 and the alignment doesn't change...any work-around for this?
 
Code:
<body style="text-align: center;">
Old IE versions didn't support margins correctly. This will center it there and not effect other browsers. You will probably have to add text-align: left; to your child elements though.
 
Without using deprecated attributes you can to use IE5s mis-behaviour to your advantage here.

add "text-align:left" to the form then wrap the form in a "<div style="text-align:center;"></div>". the strict browsers will disregard this for anything other than text but IE5 will center all elements inside the div. The text-align in the form will then over-ride the style cascade. (in theory)







Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Extra question: how to align it vertically? (kind of useful for login forms & similar stuff).
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top