Right margin

HTML & CSS
1

Hi, why the text is not getting right-margin in my code ?
Please see the red color below.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {	
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
}

table.inlineTable{
display:inline;
}

.fieldwidth{
    width:200px;
    }

</style>
</head>

<body>

  <table width="100%" height="130"  class="borderTable" >
    <tr>
      <td width="103">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>About us </td>
      <td>Feedback</td>
      <td>Blog</td>
      <td>Subscriptions</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  
  <table width="30%" height="25" border="0"  >
    <tr>
      <td width="29">&nbsp;</td>
      <td width="245">Search
        <label>
        <input type="text" name="textfield">
      </label></td>
      <td width="177"><label>
        <input type="button" name="button" value="Go">
      </label></td>
    </tr>
  </table>
  <div id="container" width="100%">
  
   <div>
  <fieldset class="fieldwidth">
      <legend>Sign in</legend>
      
        [COLOR="Red"]<div style="margin-right:10px">[/COLOR]
          <label>
              <span>User Name</span>
              <input type="text" name="textfield2">
          </label>
        </div>

        [COLOR="Red"]<div style="margin-right:5px">[/COLOR]
          <label>
            <span>Password</span>
            <input type="text" name="textfield3">
          </label>
        </div>
        
        <div class="actions">
          <span>Login</span>
          <span>Sign Up</span>
        </div>
       
    </fieldset>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>

</body>
</html>
2

Hi,
You are getting a right margin with it, if you were to set a BG color you could see it.

<div style=“margin-right:10px; background:red”>

If you want a 10px margin on just the right side then you need to remove the defaults from the fieldset.

.fieldwidth {
width:200px;
margin:0;
padding:0;
}

But the big question here is why are you using tables for something as simple as a header div with a nav bar and login box. :slight_smile:

3

Neh, the BIG question is why do you still fail to code in the <form> element as a container for <fieldset> and <input>.

In your previous thread, I told you it’s not about <div>, it’s about <form>. I can give at least two reasons:

  • using <form> means you can set an action attribute value and a method attribute value. This means that, with or without javascript, your form will still be functional.
  • <fieldset> and <legend> are for adding structure to forms. A form that is missing in you code.

Can you give me two reasons why you repeatedly choose not to use the <form> element? :slight_smile:

Off Topic:

All this coding of yours makes me question whether or not any advice you receive here may, in fact, do you more harm than good, as it appears you are using it the wrong way, since you lack a proper basic knowledge. I suggest you start reading some more of the basic stuff before engaging further in web developing.

4

right-margin is not working but left-margin works to shift the content towards right direction.

I’m surprised why I have to use left-margin ! whenever the right-margin should work

5

I was thinking to add the form tag at a later time. Does the absence of the form tag is making my code abysmal ?

Well, I’m going to add form tag right away. Hopefully, this would take care of my code in a good shape.

6

your post was helpful . I have started using <fieldset> now which I learnt from your code! …so your post was helpful.

I’m trying to make my code in my own way . I have taken your input but did not want to copy your code …instead trying to make my own version with your help.

7

Does the absence of the form tag is making my code abysmal ?

Yeah, it does : ) You’re also wrapping labels around the inputs, which itself isn’t bad, but there’s no label text in them! Tell users what to put in those inputs!

Most of the time when someone is using a table to set up a form, they have to do it like this:

<form action=“theaction” method=“themethod” id=“someForm”>
<table>
blah blah…
</table>
</form>

Where the table is replacing fieldset. This is still usually bogus unless your form really is a table (user filling out values in a table), but it is legal.

right-margin is not working but left-margin works to shift the content towards right direction.

I’m surprised why I have to use left-margin ! whenever the right-margin should work

When I load a copy of your code into my browser (Firefox… this matters because you don’t have a doctype, so Internet Explorer is going to probably show your page all weird and strange compared to the other browsers), the form is sitting on the left of the page already. Adding a right margin doesn’t really do anything… what’s it supposed to do?

If a left margin is helping, then do you mean you want stuff pushed away from the left side? That’s generally what margins do: push elements around like your arm pushes you away from the wall you’re standing next to.

And yeah, I’d totally rewrite all that like so:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en">
    <title>Your web page title here</title>
    <meta name="description" content="describe this page in one or two short sentences!">
    <style type="text/css">

* {
  margin: 0;
}

#menu {	
  list-style: none;
  margin-bottom: 10px; /*push search form away*/
  padding: 50px 4px 2px;
  text-align: center;
  border: 1px solid #600;
  overflow: hidden;
}
        #menu li {
          display: inline;
        }
        #menu a {
          display: inline-block;
          padding: 10px 40px;
          color: #000;
          text-decoration: none;
        }
                #menu a:focus, #menu a:hover, #menu a:active {
                  color: #600;
                  text-decoration: underline;
                }

#searchForm fieldset {
  border: 0;
}

#loginForm {
  width: 14em;
  margin-bottom: 1em;
}

#loginForm label {
  display: block;
}

#loginForm input {
  margin-bottom: .5em;
}

#loginForm .submit {
  width: 10em;
  color: #000;
  font-size: 1.1em;
  text-align: center;
  background-color: transparent;
  border: 0;
}
        #loginForm .submit:focus, 
        #loginForm .submit:hover {
          color: #600;
          cursor: pointer;
        }
        #loginForm .submit:active {
          position: relative;
          top: 2px;
          left: 2px;
          color: #600;
        } 

.register {
  width: 14em;
  text-align: center;
}
        .register a {
          color: #600;
        } 
        .register a:focus, .register a:hover, .register a:active {
          color: #000;
          text-decoration: none;
        }                
    </style>
  </head>
<body>
  <ul id="menu">
    <li><a href="somewhere">About us</a></li>
    <li><a href="somewhere">Feedback</a></li>
    <li><a href="somewhere">Blog</a></li>
    <li><a href="somewhere">Subscriptions</a></li>
  </ul>
  
  <form action="theSearchScript" method="post" id="searchForm">
    <fieldset>
    <legend>Search</legend>
        <input type="text" name="textfield">
        <input type="submit" value="Go">
    </fieldset>
  </form>
  
  <form action="theLoginScript" method="post" id="loginForm">
    <fieldset>
    <legend>Sign in</legend>
      <label for="username">User Name </label>
        <input type="text" name="textfield2" id="username"><br>
      <label for="password">Password </label>
        <input type="text" name="textfield3" id="password"><br>
      <input type="submit" class="submit" value="Sign in">
    </fieldset>
  </form>
  <p class="register"><a href="toSignUpFormPage">Sign Up</a></p>
</body>
</html>

Except actually I would not change how the submit button looks (should look like a clickable, standard form button), would not use “Go” for search text (and usually I don’t use fieldsets on those but here, a legend can act like a label so that’s what I did here) and I brought Sign Up out of the form (because it should be a link and therefore has no place within the sign-in form).
And there’d be header text, blah blah… but just based on what there was, this is the direction I’d go. I saw no need for tables there. I used em’s for sizing since then text-enlarge can let stuff grow.

8

He picked that up from an example I gave in a previous thread and he manage to use some of it in a bad way. One thing I told him after, and he took it a bit the wrong way:) In that example I also provided a DTD. There, I used <label> as it should be used in this case (says me :)):

  <form name="name" action="action" method="post">
    <fieldset>
      <legend>Sign in</legend>
      
        <div>
          <label>
              <span>User Name</span>
              <input type="text" name="textfield2">
          </label>
        </div>

        <div>
          <label>
            <span>Password</span>
            <input type="text" name="textfield3">
          </label>
        </div>
        
        <div class="actions">
          <span>Login</span>
          <span>Sign Up</span>
        </div>
       
    </fieldset>
  </form>

Three things about “label for”:

  • Your example doesn’t need to have a “label for” since there is no separation between the input and its label. If the label was on a <td> and the input in another <td>, than yes, you should use “label for”.
  • Also because there is no separation between the two, “label for” is redundant, as it is the implied label for the next input appearing in the markup.
  • I find it to be so much more intuitive if I use <label> as a wrapper for both the actual text for label (which here is put in a <span> for presentation purposes) and the <input>; like the <li> is a wrapper for the <a> in a menu.

One thing about “Sign up”:

  1. Since it has to do with the “Sign in”, and since the submit input is not the only action input(!?) allowed in a form, I would let the “Sign up” inside the form, link or otherwise.

But this one is a bit moot :slight_smile:

9 
* Your example doesn't need to have a "label for" since there is no separation between the input and its label. If the label was on a &lt;td&gt; and the input in another &lt;td&gt;, than yes, you should use "label for".

I always use the for attribute. Every single time. Even when I’m also implicitly linking inputs (as you do by putting the input inside the label). I insist my labels are clickable and I insist all AT strictly associates that label with that input, regardless of order.

Also because there is no separation between the two, “label for” is redundant, as it is the implied label for the next input appearing in the markup.

Doesn’t matter. I always always explicitly link the two. You’re free not to.

I find it to be so much more intuitive if I use <label> as a wrapper for both the actual text for label (which here is put in a <span> for presentation purposes) and the <input>; like the <li> is a wrapper for the <a> in a menu.

I sometimes do that as well, though there are two reasons not to: Window-Eyes and intermittently on some Macs running Safari.
However the specs don’t say it’s illegal so you end up back at the question “How much do you change your code to appease bugs?” So far as I know, W-E has fixed this bug, but I’m assuming that because I haven’t heard anything further from W-E users and GWMicro knew about the bug.
Sometimes I wrap with labels and I make them blocks, so then I use the spans as you do and float them. Here, I didn’t see the point because I could imitate his form with much less code. I don’t even need the br tags for users with CSS since I made the labels blocks, but those are there so no-CSS shows a clearer separation between groups of label-inputs.

Since it has to do with the “Sign in”, and since the submit input is not the only action input(!?) allowed in a form, I would let the “Sign up” inside the form, link or otherwise.

I see signing in and signing up as two entirely different things. In fact, many sites simply have two different forms, but keep Register on a new page because they found people trying to log in with the register form, and trying to register in the login form. You’d think people were way smarter than that, but I guess we stop reading when we hit a web page.
<zombie>web… make… stupid… drooool… BRAAAAAINSSSS</zombie>

I keep non-form stuff outside of forms. Especially when knowing someone in Forms Mode isn’t going to catch it. Instructions stay out and come before, further choices stay out and come afterwards. I’m only recently bringing “forgot password?” back into forms by using ARIA to link that text to the input.

10

They are clickable when you have them used as wrappers for input, aren’t they? :scratch:

AT… don’t know this one… :slight_smile:

If users try to register by logging in or try to log in by registering AND you’re not prepared for this… big accessibility issue. But there is no need to further complicate things: register on a new page. It’s counter intuitive. And it doesn’t address the issue from the users point of view, but from yours!

And it’s not solvable by making fun of the user limited knowledge or technical savvy (though <zombie> it’s pretty funny :lol:), but by server-side code.

Change your ways when the users habits and understanding says so. Don’t force them to follow your path if it’s not the obvious one, just because you believe it’s logic. Think of the UI, not of the UML. You do change you ways, for those challenged visually. How those uneducated differ from the challenged ones? They don’t. So you need to take account of their needs too. See below.

Best case scenario: one form for both login and registration, one submit button: Login. When the user is not found, the server-side code starts the registration process (here you can also check/remind whether the user name is not misspelled and bring this possibility to the user attention).

Second best case scenario: one form for both login and registration. Two submit buttons: Login and Sign-Up. On form submission, the server-side code makes decisions based on the values on the form and data found regarding already registered users. If no data and Sign-up… this use case it’s pretty clear. As for the rest…

First, check user name and password. If found and valid, then… If Login or Sign-Up… login. If user name found but password not valid… (more decisions here)… Finally, if Sign-Up, the user has already entered a user name and password. Big gain: one registration step completed with ease. If both valid (user name new and password not stupid), go to the next step in registration.

So, to me, it’s only a code level separation between login and signup, that has to be transparent to the user. Pretty cool, making the users life easier, right? :slight_smile: Not just to some of them, because it’s trendy :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Form</title>

  <style type="text/css">
  
    fieldset {
      display:inline;
    }
    
    fieldset div {
      margin-bottom:0.2em;
    }
    
    label span {
     display:inline-block;
      width:10em;
    }
    
    .actions {
      text-align: right;
    }
    
    .actions span {
      margin-left:1em;
    }

  </style>

</head><body>

  <form method="post" action="http://www.tipjar.com/cgi-bin/test">
    <fieldset>
      <legend>Sign in</legend>
      
        <div>
          <label><span>User Name</span>
              <input type="text" name="textfield1">
          </label>
        </div>

        <div>
          <label><span>Password</span>
            <input type="text" name="textfield2">
          </label>
        </div>
        
        <div class="actions">
          <input type="submit" name="login" value="Login">
          <input type="submit" name="signup" value="Sign-Up">
        </div>
       
    </fieldset>
  </form>

</body></html>

Ahhh, almost forgot: “There’s more than one way to skin a cat”! :lol:

11

Thanks for the time.
Is it really needed ? I see code runs without the above DTD . Could you please tell me a situation to test where my code will face trouble without the above DTD ?

I’d like to check it out.

12

Not in IE6. (You could argue convincingly that we’re getting to the point where support there could be ignored)

AT… don’t know this one…

Accessibility technology (generally screen readers, screen magnifiers, refreshable Braille devices, colour contrast setters and caption-setters). Sorry.

If users try to register by logging in or try to log in by registering AND you’re not prepared for this… big accessibility issue. But there is no need to further complicate things: register on a new page.

Exactly what I said. Sign-up/register is a different form, but on windowsxp’s page it’s (probably) a link to that form on another page, to prevent mix-ups by users.

First, check user name and password. If found and valid, then… If Login or Sign-Up… login. If user name found but password not valid… (more decisions here)… Finally, if Sign-Up, the user has already entered a user name and password. Big gain: one registration step completed with ease. If both valid (user name new and password not stupid), go to the next step in registration.

To me, that’s excessive server-side scripting… or just keep the registration form on a separate page like 99% of the web does. Though it sounds fun, but even if I could write that I probably wouldn’t just because it breaks convention (I maintain that people stop reading and often stop thinking once they are on the web, so convention is our friend). Also, note that in the zombie sentence, I did include myself: “we” (I also often stop reading when I’m on a web page…).

Ahhh, almost forgot: “There’s more than one way to skin a cat”!

And curiosity kills them too… poor, poor cats.

Not just to some of them, because it’s trendy

Babe, you know I’m ALL about the trendy! : )

Want your pages to look the same in Internet Explorer? IE6 and 7 use a different box model (the one used by IE5) if there’s no or incomplete doctype. This is because M$ didn’t want to “break the web” when their newer browsers started following the W3C box model, since half the internetz was built to work with the IE5 model. So they figured if there’s a doctype, the page was prolly written in this millenium and expects W3C box model… no doctype, likely written in the heady days of Geocities, Angelfire and when the fall of the Berlin Wall was still exciting… and expecting the old IE box model.

Other browsers have Almost-Standards modes when there is no doctype… Examples of small behavioural changes here for Firefox though most browsers have them (Chrome may not, as it’s a much newer browser).

So anyway just take either my code or noonope’s code and look in IE6, 7, 8, and some Modern browser with and then without a doctype. In some browsers the differences are small, in others, large. Also, your current page is still quite simple. The differences become worse as you add more boxes, esp boxes with set widths, floats, padding, and borders.

13

Filled under “learned from Sp”. Thanks :slight_smile:

Not quite. Sign-up/register it is a different form on another page. However, the way to get there is less likely to cause mix-ups, 'cos there’s none in my use case. Server-side logic takes care of that.

To me it’s making complex code so that the users deal with a simple UI. I don’t like to keep my code simple and disregard the users needs. I don’t like to keep my code simple if that’s what is affecting the users and preventing them from being right on the money from the beginning. I don’t like to keep my code simple and then present a confusing multiple choice to a user unaware of such things. It is confusing, right, you said your self so!

[ot]

She called me “babe” :blush: ! Am I in trouble?! I don’t care! She called me “babe” :blush: ![/ot]

14
Off Topic:

She called me “babe” ! Am I in trouble?! I don’t care! She called me “babe” !

lawlz, term of endearment! : )

15
Off Topic:

Yeah, I get that :wink: ! Hopefully for me, your hubby doesn’t! Nor my wife! [:injured:|:sick:|:injured:]