CSS Tableless Form problem

pannet1 · May 6th, 2007, 12:26 PM

Dear Richard,

I have done this www.zigmainfosoft/yuvapos form, just now,
CSS is here www.zigmainfosoft.com/yuvapos/newform.css.
the following were the objectives.

1) No tables.
2) Application should work in IE and Firefox, thats all.

I was unable to align the inputs on the right side as I can with the left side with display: block
selector. I have worked around by positioning every label on the right so as to right align the inputs
with 2px right margin.

I wish to make the Grand Total(textfield) flow from Top (present location) to bottom so that it
matches the height of the address textarea on the left. I have tried various methods using z-index,
display, float, position without result or with side effects.

Can you please tell me
1) how this can be achieved
2) if there is any better way to align the fields on the right side with fewer lines of code.

Thanks in anticipation.

ps: the empty area in the middle has an iframe for the details table which i have left blank for clarity.

mat41 · May 6th, 2007, 06:41 PM

Not Mr York, however I am very intrigued at your post. I thought tables were our staple, may I ask why you dont use them?

I have used absolute positioned, EG - layers alot in the past. So much thought/code was required just to get things appearing correct in all the common browsers. With the exception of z-index stacking, isnt tables the most practical layout method?

BTW the link to your page doesnt work

Wind is your friend
Matt

richard.york · May 6th, 2007, 07:36 PM

Personally, I tend to use tables for form layouts. The whole tables are evil thing is taken way too far by some. Tables become bad when they're abused, e.g., nesting them ten deep and using spacer gifs. I think one acceptable and practical application of tables is for form layout. Not that it's particularly semantic, but it just works better, and requires less thought. There is a balance between markup and CSS, and tables have their place in layout, some abuse them, while others go to the other extreme of under-utilizing them.

That said; You can get a form laid out nicely without tables. If you've got your code set up properly, wrapping each input label with the <label> element, and have a fairly simple form, you can use tricks with floating to pull off a tableless form layout.

There is an article on quirksmode.org about tableless forms, if you're determined to go that route, I suggest reading that to get an idea of how to go about it.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

mat41 · May 6th, 2007, 07:55 PM

Good day - I have heard about the 'evil table' thing however never from anybody who is clearly an authority on the subject. May i add; I do not consider myself a CSS expert however very comfortable with global styles and thier implimentation. Should I start a new post or may I ask:

> What is the nested table issue all about? Lets say the HTML is stringently correct and we have four levels of them, what are the ramifications of this?
> What is wrong with transparant GIF's - I always have an image, which is transparent, in my images dir, always have text in the alt property (IMO and IME this assists Search Engine Optimisation)

TYIA - I have got a great deal of tips n tricks from your posts

Wind is your friend
Matt

richard.york · May 6th, 2007, 08:13 PM

G'Day, Matt, ;)

The problem with nesting tables four deep is that you don't have to. I can't think of any valid scenario for doing that that isn't covered by CSS, at least as far as layout is concerned. Using tables like that makes the design unnecessarily complicated, and increases the size of the document, and hence the bandwidth consumed transporting that document. CSS design is more efficient and intuitive. As far as validation and search engines, neither of those really care how many tables you have, as long as the markup is properly formed and written to the right specification.

Same thing with transparent gifs used for spacing (a 1x1 pixel gif image that is completely transparent, and used to adjust spacing between elements), you don't need them. CSS provides margin and padding for adjusting the space between elements. Including these images isn't as intuitive or efficient as adjusting padding and margin in CSS. Gif images that simply include a transparent portion are just fine and dandy, those aren't the ones I'm referring to ;).

By the way, the anomalies that you experience with layering are almost certainly all in IE. This is why most professional CSS designers tend to write up a website using Firefox or Opera or Safari first, and then add a conditional comment style sheet for IE later that includes fixes for any design anomalies present in that browser. Opera, Firefox, and Safari almost always agree.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

mat41 · May 6th, 2007, 08:32 PM

G'Day (If I may say, very Australian of you)

Thank you for your time.

Your Resume link is very impressive. I do believe I am a table over user. Yes you are correct my layer positioning experience was all with IE / Netscape (mmmmmm, that long ago) It looks like I use CSS for about 80% of what I should. I will keep an eye out for future tips and techniques in your responses - have a fine day...

Wind is your friend
Matt

pannet1 · May 7th, 2007, 04:56 AM

Dear Richard + Matt,

I am dissappointed that the link is not working. My host is down :-). I was anticipating appreciation from you Richard, if you had a view of the form.

The problem with the Table is there are too many TDs and TRs which are thrown out by Dreamweaver. Besides, I am trying to get my team out of Windows and Dreamweaver. The alternate is Linux + Scream (and PHPEclipse too). With Linux we have to hard code everything and hence we have better control. Otherwise, without knowing what we do, we cant survive with Linux. Thats only is wanted. (The gradients for the buttons were the courtesty of Gimp)

Besides, I have to put some more javascript, more yahoo YUI CSS & JS and other AJAX toolkits without understanding much under the hood. So atleast, I should understand what code, I originally produce and not allow Dreamweaver to do it for me.

Utimately it became inevitable that the natural choice was CSS so i can reuse the CSS for other (similar looking) forms as well as with minor changes. I need to reiterate one thing. I dont care of any browsers except IE on Windows and FF on Linux. So I dont have the browser issue (except IE the nasty one). Here is the code minus the image files and hence the buttons has lost its gradients.

Code:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>:: Purchase Bill ::</title>        
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >

        <style type="text/css">
        <!--
        iframe { border-color: rgb(255 255 255);
          }
        -->
        </style>        
        <meta http-equiv="Content-Style-Type" content="text/css" >
        <link rel="stylesheet" type="text/css" href="newform.css" >        
    </head>
    <body>    
        <div id="container">                            
        <form name="f">

            <fieldset >            
            <input type="submit"  class="MyButton submit" id="Add"  value="Add" tabindex="200">                                    
            <input type="button"  class="MyButton submit" id="Edit" value="Edit" tabindex="210">
            <input type="button" class="MyButton submit" id="Clear" value="Clear" tabindex="220">                            
            <input type="button" class="MyButton submit navi" id="First" value="<<" tabindex="230">        
            <input type="button" class="MyButton submit" id="Previous" value="<" tabindex="240">
            <input type="button" class="MyButton submit" id="Next" value=">" tabindex="250">
            <input type="button" class="MyButton submit" id="Last" value=">>" tabindex="270">
                <h3>PURCHASE INVOICE</h3>                
                <label for="No">No: </label>

                    <input type="text" class="numeral" id="No" name="No" tabindex="10" value="" title="No">                
                <label  id="date" for="Date">Date: </label>
                        <input type="text" class="numeral" id="Date" name="Date" tabindex="20" title="Date"><br>                
                <label for="Product" accesskey="P">Product: </label>
                    <input type="text" id="Product" name="Product" tabindex="30" value="" title="Product">
                <label for="kludge"></label>
                    <input type="submit" class="BtnLabel additem" id="Add Item" value="" tabindex="40">                                                
                <label id="qty" for="Quantity" accesskey="Q">Quantity: </label>
                        <input type="text" class="numeral" id="Quantity" name="Quantity" tabindex="50" value="" title="Quantity">                
                    <label id="rate" for="Rate" accesskey="R">Rate: </label>

                        <input type="text" class="numeral" id="Rate" name="Rate" tabindex="5" title="Rate">                                                                                                
            <iframe name="iframe" width="778" height="217" src="../products.php" frameborder="0">This is IFrame content</iframe>                
                <label  for="Tax">Tax: </label>
                    <input type="Tax" class="bignumeral" id="Tax" name="Tax" tabindex="80" value="" title="Tax">            
                <label id="nett" for="Nett Total">Nett Total: </label>
                    <input type="Nett Total" class="bignumeral" id="Nett Total" name="Nett Total" tabindex="100 " value="" title="Nett Total"><br>
                <label for="Discount">Discount: </label>                
                    <input type="Disount" class="bignumeral" id="Discount" name="Discount" tabindex="90 " value="" title="Discount">
                <label id="expenses" for="kludge"></label>

                <input type="submit" class="BtnLabel expenses" id="btnExpenses" value="" tabindex="120">                
                    <input type="Expenses" class="bignumeral" id="Expenses" name="Expenses" tabindex="110 " value="" title="Expenses"><br>
                <label for="Supplier"  accesskey="S">Supplier: </label>
                    <select  " name="Suppier" id="Supplier" size="" tabindex="60">
                        <option selected="selected">Choose</option>
                        <option value="nc">North Carolina (NC)</option>
                        <option value="va">Virginia (VA)</option>

                    </select>        
                <label id="grand" for="Grand Total">Grand Total: </label>
                    <input type="Grand Total" id="Grand Total" class="grandtotal" name="Grand Total" tabindex="130 " value="" title="Grand Total"><br>
                <label for="Address" accesskey="A">Address: </label>
                    <textarea name="Address" rows="3" cols="23" id="Address" tabindex="70" title="Address"></textarea>
                <label id="pmt" for="Payment" accesskey="P">Payment: </label>
                    <input type="Payment" id="Payment" class="bignumeral" name="Payment" tabindex="140 " value="" title=Payment"><br>            
                <label for="Description" accesskey="D">Description: </label>

                    <input type="Description" id="Description" class="description" tabindex="71"  title="Description">
                </fieldset>
                <fieldset>
                <label for="kludge"></label>            
                    <input type="submit" class="MyButton submit" id="submit" name="submit" value="Task" tabindex="170">
                <label id="pmt" for="kludge"></label>            
                    <input type="submit" class="MyButton submit" id="submit" name="submit" value="Submit" tabindex="170">                    
                <label id="exit" for="kludge"></label>            
                    <input type="submit" class="MyButton submit" id="submit" name="submit" value="Exit" tabindex="170">
                </fieldset>                                                
        </form>

    </div>
</body>
</html>
</form>

Here is the CSS

Code:

/*
source of idea from
http://www.websiteoptimization.com/speed/tweak/forms/
comments on the right are from this site. comments on
the top from me.
*/

body {
font:100% sans-serif;
margin: 0px;
}

/* for horizontal centering of the page */
 
#container {
min-width:800px;
min-height: 600px;
max-width: 800px;
max-height: 600px;
padding:0;
margin:auto;
voice-family: "\"}\""; 
voice-family:inherit;
}

/* for the name of the document */    
h3 {
 font:100%;
 text-align: center;
 margin: 5px 0 -15px 0; 
}

/*  set width in form, not fieldset (still takes up more room w/ fieldset width  */ 
form {
  margin: 0;
  padding: 0;    
}

form fieldset {  
  border-color: #00005f;
  border-width: 1px;
  border-style: solid;
  background-color: #cacadc;  
  margin: 0px;
}

form fieldset legend {
    font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label {
    display: block;    
    float: left;
    width: 85px;    
    margin: 5px 0 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;    
}

/* WARNING block: inline removes first-letter pseudo-class */

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
    text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}


form br {
    clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}



form input, form select, form textarea {

    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
    width:287px;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin:5px 0 0 2px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
         border: solid 1px  #000000;
         padding: 0px;
}

textarea { overflow: auto; }

   /* set better visiblity and focus to all inputs */        

   input:hover, select:hover, textarea:hover {
    background-color: #cacadc; /* light blue */
    border: solid 1px #00005f; /* dark blue */    
    cursor: pointer;
    }

    input:focus, select:focus, textarea:focus {    
    background-color: white; 
    border: solid 2px  black; 
    cursor: text;
    }

input.MyButton  {      
    height: 32px;
    width: 85px;      
    font-weight: bolder;
    margin-left: 0px;     
    }

  input.submit {  
  background-image: url(../images/button_active.png);  
  }

  input.submit:hover {
  color: #cacadc;
  background-image: url(../images/button_hover.png);    
  }

 input.navi {
  margin-left: 155px;
  }

 input.BtnLabel {
 height: 25px;
width: 85px;
}

 input.additem {
 background-image: url(../images/additem_normal.png);
}

input.expenses {
background-image: url(../images/expenses_normal.png);
border: none;
}

/* we use our own custom label margins to setup the document. 
there must be a better way to block on the right and labels and 
inputs adjust automatically

not related to fieldset directly. however the labels margins are set to
position the inputs and labels themselves in a full page width fieldset (default).
the trick is to use label's left margin  to push the input.
*/

label#navi {
    margin: 0 0 0 0;    
}


label#date {
    display: inline;
    float: none;
    margin: 0 0 0 477px;    
}

label#add {
    display: inline;
    float: none;
    margin: 0 0 0 2px;    
}

label#qty {
    display: inline;
    float: none;
    margin: 0 0 0 4px;    
}

label#rate {
    display: inline;
    float: none;
    margin: 0 0 0 20px;    
}


label#nett {
    display: inline;
    float: none;
    margin: 0 0 0 352px;
}

label#expenses {
    display: inline;
    float: none;
    margin: 0 0 0 338px;            
}

label#grand {
    display: inline;
    float: none;
    margin: 25 25 25 198px;    
}


label#pmt {
    display: inline;
    float: none;
    margin: 0 0 0 196px;    
}


label#exit{
    display: inline;
    float: none;
    margin: 0 0 0 226px;    
}

/* class used to set the width of text field numeral for 50% and bignumeral 
for 75% approx. description doubles up covering whole page width*/

.numeral {
width: 80px;
}

.bignumeral {
width: 125px;
}

.grandtotal {
width: 302px;
height: auto;
}

.description {
width: 687px;
}

A quick run and you opinion on expanding the Grand Total Textfield will be of great help. Thanks once again.

Best Regards
B Karthick

pannet1 · May 10th, 2007, 02:42 AM

i forgot the .com for the above link. you may please check this link for the form, http://www.zigmainfosoft.com/yuvapos/

CJBGUY