SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS issues...

  1. #1
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS issues...

    Dear everyone,

    I'm building a little form, and since I don't want to use old-fashioned HTML tables, I've been using a CSS file for formatting. The CSS file dictates that form fields get shoved over 110 pixels:

    Code:
    #form_field_indent{position:absolute;left:110px}
    My form code is like this:

    Code:
    <form method="post" action="http://www.cybercory.net/php-bin/adm...dd&process=yes">
    Date and time: <span id="form_field_indent"><input id="form_field" type="text" name="date_and_time" /><img id="star" src="<A href="http://www.cybercory.net/gif-bin/star.gif">http://www.cybercory.net/gif-bin/star.gif" /></span>
    <br />
    <br />
    Text:
    <span id="form_field_indent"><textarea id="form_field" name="text"></textarea><img id="star" src="<A href="http://www.cybercory.net/gif-bin/star.gif">http://www.cybercory.net/gif-bin/star.gif" /></span>
    <br />
    <br />
    <span id="form_field_indent"><input type="submit" value="Submit" /></span>
    </form>
    Of course, since the <textarea> is taller than a <br />, the "Submit" button appears to only move down one space instead of two.

    Does anyone know of a way to have the "Submit" button move down two spaces without using three <br /> tags?

    Thanks for your help.

    Compuwhiz7

  2. #2
    SitePoint Enthusiast Grubilo's Avatar
    Join Date
    Oct 2002
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are at least two common methods:
    1.) If you place <BR> tags into the style definition that has font-size property defined you will see that BR changes its height...
    example:
    TEXT1<font style="font-size: 6px"><br></font>TEXT2<font style="font-size: 6px"><br></font>TEXT3

    2.) Another common option that works in all browsers is to create spacer pictures 1x1 px and place them specifying the needed height:

    text1<br><img src=""px.gif width=1 height=22><br>text2

    good luck
    Web tutorials
    http://webclass.ru

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, why not use divs (which are block level elements) instead of spans (which are inline elements) ? then, you can define margin-top and margin-bottom quite nicely, and get the spacing you want without the need for either <br /> or the kludge with spacer images suggested above...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Redux,

    Thanks for your note:

    Quote Originally Posted by redux
    ok, why not use divs (which are block level elements) instead of spans (which are inline elements) ? then, you can define margin-top and margin-bottom quite nicely, and get the spacing you want without the need for either <br /> or the kludge with spacer images suggested above...
    In regard to the issue of margin spacing for <div> tags, could the following code work?

    Code:
    form_field{position:absolute;left:110px;margin-bottom:12pt}
    Thanks for your help.

    Compuwhiz7

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear everyone,

    I tried the margins that Redux suggested, using a value of 10 pixels for each. Here's what my screen looks like now (open attachment).

    The form fields are still smushed together, and now they aren't aligned with their labels either. Any ideas?

    Compuwhiz7

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You seem to have a number of errors in your code. You have the a tag in the middle of the img tag. I'm assuming you just copied that incorrectly. Also you haver used id on more than one element. Although some browers will let you do this it is not correct and will cause errors where specific elements need to be addressed. An Id must be unique to the element and can only be used once on your page.

    Regarding your form layout here is one way to lay it out without using <br> tags everywhere.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .form_field_indent{position:absolute;left:110px;}
    p.margintop {margin-top:20px;}
    </style>
    </head>
    <body>
    <form method="post" action="http://www.cybercory.net/php-bin/ad...add&process=yes">
    <p><label for="form_field1">Date and time:</label> 
    <span class="form_field_indent">
    <input id="form_field1" type="text" name="date_and_time" />
    <a href="<A href="http://www.cybercory.net/gif-bin/star.gif">http://www.cybercory.net/gif-bin/star.gif">
    <img id="star" src="<A href="http://www.cybercory.net/gif-bin/star.gif">http://www.cybercory.net/gif-bin/star.gif" />
    </a>
    </span>
    </p>
    <p><label for="form_field2">Text:</label>
    <span class="form_field_indent">
    <textarea id="form_field2" name="text"></textarea>
    <a href="<A href="http://www.cybercory.net/gif-bin/star.gif">http://www.cybercory.net/gif-bin/star.gif">
    <img id="star" src="<A href="http://www.cybercory.net/gif-bin/star.gif">http://www.cybercory.net/gif-bin/star.gif" />
    </a> 
    </span>
    </p>
    <p class="margintop form_field_indent" >
    <input type="submit" value="Submit" />
    </p>
    </form>
    </body>
    </html>
    You can change the margin-top size to suit etc.

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Here's a link to a sitepoint tip on constructing forms that might help.

    http://www.sitepoint.com/newsletter/...d=3&issue=58#4

    Paul

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear everyone,

    I just tried Paul O'B's first suggestion, and am afraid to say that the results were the same as previously: the form fields get squashed up one another.

    Thanks for your help.

    Compuwhiz7

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi sorry about that I only tested it in Ie6 and it worked fine in that. However I can see that mozilla doesn't like it. (The problem is with the absolutely positioned elements not taking up any space so following content does not automatically clear the elements.)

    What I usually do for forms to make life easier is to put the text fields first and then the labels after. This way the text boxes and input buttons etc all get aligned to the left automatically and it looks far neater and is simpler to code.

    If you must have it as you have described above then you will probably need to absolutely position everything exactly in place which will get the desired effect.

    Otherwise you could try the sitepoint method in the link I posted above which would look like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    form p {
      width: 300px;
      clear: both; 
    }
    form p label {
      float: left;
    }
    form p input, form p textarea {
      float: right;
    }
    .sbmit {
      margin-top:5px;
    }
    -->
    </style>
    </head>
    <body>
    <form name="form1" id="form1" method="post" action="">
      <p><label for="textfield">Date and Time:</label>
      <input name="textfield" type="text" id="textfield" size="20" /></p>
      <p>
    	<label for="textarea">Text:</label>
    	<textarea name="textarea" cols="20" rows="5" id="textarea"></textarea>
      </p>
      <p>
    	<input class="sbmit" type="submit" name="Submit" value="Submit" id="Submit" />
      </p>
    </form>
    </body>
    </html>
    Although I know it's not exactly what you want and there are slight differences between Ie6 and Mozilla 1.2.

    This is one of those times when you have to decide whether it is important to keep your layout exactly as you want or become a little more flexible and maybe adjust your design to make life easier.

    Paul

  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear everyone,

    The layout the Paul O'B suggested is very impressive. Thank you all for your help.

    Compuwhiz7


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •