Programming Help

Web Development



What's Here?

  • Members: 131,733
  • Replies: 469,591
  • Topics: 72,787
  • Snippets: 2,534
  • Tutorials: 664
  • Total Online: 2,220
  • Members: 107
  • Guests: 2,113

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 131,733 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,220 people online right now. Registration is fast and FREE... Join Now!




div form layout

 
 Reply to this topicStart new topic

div form layout
dreamincodehamza
post 26 Sep, 2008 - 04:32 PM
Post #1


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions
When you run this code in IE this will show the exact output which we and i am expecting according to the width & height
give in the css code.

Problem :
but if you run this piece of code in other browsers then it
will show different output .

Please tell me what is going wrong with it or what is that mean.
i have not seen any error so far.
try this source code in FF , Safari, You will see the difference.

here is the code
CODE
<style type="text/css">
.divcontainer {
    width:500px;
    height:350px;    
    color:#000000;
    background-color:#CCFFFF;
}

.formcontainer {  
  padding-bottom: 9px;
  font-family:"Times New Roman", Times, serif;
  font-size:12px;  
  border: 1px medium #000000;   /* not working*/
}  

.text {
    display:inline;
    text-align:left;    
/*    background-color:#00CC00; */
    width:200px;
    
}

.input {
    display:inline;
    text-align:left;    
    /*    background-color:#CCFFFF; */
    width:300px;    
}

#inputextra {
  display:inline;  
}

#header {
text-align:center;
padding-bottom: 30px;
font:larger;
font-family:"Courier New", Courier, monospace;
font-size:18px;
color:#003333;
text-decoration:underline;
font:bold;
}

#buttons {
padding-left: 200px;
  
}
</style><div class="divcontainer">
    <form action="add.php" method="post" onSubmit="return field_filter();">        
  
          <div id="header">Customer Account Opening</div>
    
         <div class="formcontainer">
             <p class="text">*Account No</p>
             <p class="input">
                     <select name="account_no_series">
                      <option value="" selected="selected">----</option>
                      <option value="12345">12345</option>
                      <option value="110101">110101</option>
                    </select>    
            
             <input type="text" name="account_no" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);" size="15" ></p>
         </div>             
        <div class="formcontainer">
          <p class="text">*Title Of Account</p>
          <p class="input"><input type="text" name="account_title" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);" /></p>
        </div>  
        
        <div class="formcontainer">
          <p class="text">*Type Of Account</p>
          <p class="input">
           <select name="account_type" class="select" onChange="setInterval('enable_disable()',100 );" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);">
                       <option value="">Select Account type</option>
                       <option value="Current">Current</option>
                       <option value="Saving">Saving</option>
                       <option value="Resident">Resident</option>      
                      </select>
          </p>
       </div>       
      
          <div class="formcontainer">
         <p class="text">*Status Of Account</p>
         <p class="input">
                    Single<input type="radio" name="status_type" value="Single" checked="checked">
                    Joint<input type="radio" name="status_type" value="Joint">
                    Company<input type="radio" name="status_type" value="Company">
         </p>
        </div>        
        
        <div class="formcontainer">
         <p class="text">*Opration Of Account</p>
         <p class="input">
                             Single<input type="radio" name="account_operation" value="Single" checked="checked">
                            Joint<input type="radio" name="account_operation" value="Joint">
         </p>
        </div>        
        
        <div class="formcontainer">
         <p class="text">*Currency</p>
         <p class="input">
                     <select name="account_currency" class="select" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);">
                       <option value="">Select currency</option>
                       <option value="PUK">Pak Rupees (PUK)</option>
                       <option value="USD">US Doller (USD)</option>
                       <option value="CAD"> Canada (CAD) </option>
                       <option value="EUR">Europe (EUR) </option>  
                      </select>    
         </p>
        </div>
        
        <div class="formcontainer">
           <p id="buttons">
            <input type="submit" value="Next" name="submit" disabled="disabled">
            <input type="button" value="Cancel" onClick="window.location='manage_users.php'"/>        
          </p>
        </div>        </form>                                                
</div>
User is offlineProfile CardPM

Go to the top of the page

pr4y
post 26 Sep, 2008 - 04:34 PM
Post #2


D.I.C Head

Group Icon
Joined: 19 Sep, 2008
Posts: 62



Dream Kudos: 50
My Contributions
Too much code for me to sort through... can you tell me EXACTLY what problem you are having, or maybe a block of code that isn't working properly in different Browsers?

Thanks!
User is offlineProfile CardPM

Go to the top of the page

dreamincodehamza
post 26 Sep, 2008 - 05:05 PM
Post #3


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions
you can understand the problem when you run all of this code in IE first then in
FF or anyother .

the layout is not same in every browser
User is offlineProfile CardPM

Go to the top of the page

dreamincodehamza
post 26 Sep, 2008 - 05:38 PM
Post #4


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions
why layout is changing on different browsers WHY?
User is offlineProfile CardPM

Go to the top of the page

Myrilith
post 27 Sep, 2008 - 11:30 AM
Post #5


New D.I.C Head

*
Joined: 20 Feb, 2008
Posts: 12
Okay, a few things:

1) The reason your border wasn't displaying is because you weren't declaring a border style. Both "1px" and "medium" are widths, so change one of them to "solid."

2) The thickness of your border affects the width of your divs. A 300-pixel div with a 1-pixel border is 302 pixels wide. If you're using precise widths, you'll want to plan accordingly.

3) You can't set the width of an inline element. It doesn't render, at all. The easiest way to overcome this is to use "float: left" with your precise pixel widths (taking into account any borders, padding, and margins).

4) Using a <p> element puts a linebreak before and after the content. Instead, use <div> tags.

Here's how it looks all together:

CODE

<html>
<head>
<title>Test</title>

<style type="text/css">
.divcontainer {
    width:500px;
    height:350px;    
    color:#000000;
    background-color:#CCFFFF;
}

.formcontainer {
  float: left;
  width: 498px;
  height: 25px;
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  border: 1px solid #000000;
}  

.text {
    text-align:left;    
/*    background-color:#00CC00;*/
    width:198px;
    height: 25px;
    float: left;
}

.input {
    text-align:left;    
/*    background-color:#CCFFFF;*/
    width:298px;
    height: 25px;
    float: left;
}

#inputextra {
  display:inline;  
}

#header {
text-align:center;
padding-bottom: 30px;
font:larger;
font-family:"Courier New", Courier, monospace;
font-size:18px;
color:#003333;
text-decoration:underline;
font:bold;
}

#buttons {
padding-left: 200px;
  
}
</style>

</head>

<body>

<div class="divcontainer">
    <form action="add.php" method="post" onSubmit="return field_filter();">        
  
          <div id="header">Customer Account Opening</div>
    
         <div class="formcontainer">
             <div class="text">*Account No</div>
             <div class="input">
                     <select name="account_no_series">
                      <option value="" selected="selected">----</option>
                      <option value="12345">12345</option>
                      <option value="110101">110101</option>
                    </select>    
            
                    <input type="text" name="account_no" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);" size="15" >
             </div>
         </div>              
        <div class="formcontainer">
          <div class="text">*Title Of Account</div>
          <div class="input"><input type="text" name="account_title" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);" /></div>
        </div>  
        
        <div class="formcontainer">
          <div class="text">*Type Of Account</div>
          <div class="input">
           <select name="account_type" class="select" onChange="setInterval('enable_disable()',100 );" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);">
                       <option value="">Select Account type</option>
                       <option value="Current">Current</option>
                       <option value="Saving">Saving</option>
                       <option value="Resident">Resident</option>      
                      </select>
          </div>
       </div>        
      
          <div class="formcontainer">
         <div class="text">*Status Of Account</div>
         <div class="input">
                    Single<input type="radio" name="status_type" value="Single" checked="checked">
                    Joint<input type="radio" name="status_type" value="Joint">
                    Company<input type="radio" name="status_type" value="Company">
         </div>
        </div>        
        
        <div class="formcontainer">
         <div class="text">*Opration Of Account</div>
         <div class="input">
                             Single<input type="radio" name="account_operation" value="Single" checked="checked">
                            Joint<input type="radio" name="account_operation" value="Joint">
         </div>
        </div>        
        
        <div class="formcontainer">
         <div class="text">*Currency</div>
         <div class="input">
                     <select name="account_currency" class="select" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);">
                       <option value="">Select currency</option>
                       <option value="PUK">Pak Rupees (PUK)</option>
                       <option value="USD">US Doller (USD)</option>
                       <option value="CAD"> Canada (CAD) </option>
                       <option value="EUR">Europe (EUR) </option>  
                      </select>    
         </div>
        </div>
        
        <div class="formcontainer">
           <div id="buttons">
            <input type="submit" value="Next" name="submit" disabled="disabled">
            <input type="button" value="Cancel" onClick="window.location='manage_users.php'"/>        
          </div>
        </div>        </form>                                                
</div>

</body>
</html>
User is offlineProfile CardPM

Go to the top of the page

dreamincodehamza
post 27 Sep, 2008 - 01:41 PM
Post #6


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions

"Using a <p> element puts a linebreak before and after the content. Instead, use <div> tags."

HOW YOU FIND THAT P TAG PUT LINEBREAK AFTER AND BEFORE CONTENTS.

AND

WHY WE can't set the width of an inline element.
WHT IS THE REASON BEHIND IT.
User is offlineProfile CardPM

Go to the top of the page

Myrilith
post 27 Sep, 2008 - 02:32 PM
Post #7


New D.I.C Head

*
Joined: 20 Feb, 2008
Posts: 12
To answer your second question first, you can't set the width of an inline element because... you can't. Inline elements are designed to be flexible. They stretch to fit however much content you can fit inside of them. If it could have a fixed width, then it couldn't stretch. If it can't stretch, it's not a proper inline element. So you can't set a fixed width. (Check out this link for a long explanation.)

Then, about the linebreaks in a <p> element... similar story. It's just how they work. They're designed to incapsulate blocks of texts that should be separated by line breaks. Paragraphs. That's what the "p" stands for. So if that's what you're dealing with, the <p> tag is great. Just try this code to see how they work:

CODE
Test<p>Test2</p>Test3


If you're dealing with paragraphs of text, then the <p> element is great. But since you're not -- you're dealing with layouts for text and input and god-knows-what-else -- it's better to use the <div> tag. It has less baggage.
User is offlineProfile CardPM

Go to the top of the page

dreamincodehamza
post 27 Sep, 2008 - 04:01 PM
Post #8


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions
Myrilith good answer of my question
but if i use this

<div> <p> then what will be the effect </p> </div>

all p tag default properties would be have not effect or have
User is offlineProfile CardPM

Go to the top of the page

Myrilith
post 27 Sep, 2008 - 05:12 PM
Post #9


New D.I.C Head

*
Joined: 20 Feb, 2008
Posts: 12
If you're still using that <p> tag, then you'll still end up with linebreaks. There are ways around that if you manipulate the properties of the div that contains it, but... there's not really a good reason to do that. If you don't want the linebreaks, you'd be better off just leaving out the <p> altogether and just using a <div>.

By the way, check out this W3C page for more info and some examples of <p> tags. It may help.
User is offlineProfile CardPM

Go to the top of the page

dreamincodehamza
post 27 Sep, 2008 - 05:23 PM
Post #10


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions
yeah let me read first
User is offlineProfile CardPM

Go to the top of the page

William_Wilson
post 27 Sep, 2008 - 05:27 PM
Post #11


lost in compilation

Group Icon
Joined: 23 Dec, 2005
Posts: 3,951



Thanked 13 times

Dream Kudos: 3275

Expert In: Java, C, Javascript

My Contributions
divs will start their content on the next line in most browsers similar to a p tag, span tags will work in place without moving to the next line.
User is online!Profile CardPM

Go to the top of the page

dreamincodehamza
post 29 Sep, 2008 - 04:19 PM
Post #12


D.I.C Head

Group Icon
Joined: 12 Sep, 2008
Posts: 108



Dream Kudos: 75
My Contributions
but what is the difference between span and div just line break difference or what else
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 11/20/08 10:43AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month