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 Chriss Miller 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
Joined
Jun 26, 2004
Messages
47
Location
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