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!

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

Need help with CSS

Status
Not open for further replies.
gorgered

gorgered

Programmer
Dec 13, 2005
24
US
Hi,

I have a dynamic HTML form which is display to the user.
Code: 
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
<style>
    fieldset {
      padding: 1em;
    }
    
    label {
      float:left;
      width:25%;
      margin-right:0.5em;
      padding-top:0.2em;
      text-align:right;
    }
  </style>
</head>

<body>
<!--StartFragment -->
<form>
    
  <fieldset>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" size="20"/>
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" size="20" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
 </form>
</body>

</html>

The above htm displays fine. But the problem is if one of the input element is empty then the alignment is bad. The problem is that the form is build dynamic at run time by java.

The question is how can I make sure the alignment is proper even if the input element is empty

Below is the code displays with bad alignment.

Code: 
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
<style>
	fieldset {
      padding: 1em;
    }
    
    label {
      float:left;
      width:25%;
      margin-right:0.5em;
      padding-top:0.2em;
      text-align:right;
      
   }
  </style>
</head>

<body>
<!--StartFragment -->
<form>
    
  <fieldset>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <!--<input type="text" name="name" id="name" size="20"/>-->
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" size="20" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
 </form>
</body>

</html>

Help is appriceated. Wish you a Happy New Year.

Gorge

 
Sort by date Sort by votes
The question is how can I make sure the alignment is proper even if the input element is empty
Click to expand...
By empty, do you mean that the actual input element will not exist rather than it will simply contain an empty string (as in your second example it is commented out)? If so, you could create a class for each label/input and give them specific widths.

Also, you haven't specified a DOCTYPE for your page.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Hi,

Thank you for the quick response. Yes, the actual input element will not exist. The problem is that the form elements and labels are created dynamically and stored in a List. When displaying the form I iterate through the list and display them, so I do not know the width of the each element. I have to write some thing generic CSS which controlls the flow of the elements. And I am really bad at CSS. An example would be helpfull, I know I shouldn't ask for this.. but have no choice.

Thanks
Gorge
 
Upvote 0 Downvote
You could probably use <pre> if you remove the line breaks
"<br />",

Code: 
  <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
<style>
    fieldset {
      padding: 1em;
      width:21.5em;
    }
    label{
      margin-right:0.4em;
   }
</style>
  </head>
<body>
<!--StartFragment -->
<form>
  <fieldset>
  <legend>Subscription info</legend>


<pre>
<label for="name">Username:</label><!--<input type="text" name="name" id="name" size="20"/>-->
<label for="mail">E-mail:</label>  <input type="text" name="mail" id="mail" size="20" />
<label for="address">Address:</label> <input type="text" name="address" id="address" size="40" />
</pre>


  </fieldset>
 </form>
</body>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
787
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
623
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
666
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top