SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP unwanted space between form unordered list.

    I cant seem to zero the space between the two lists when positioning form elements within an unordered list. Am I going about this the wrong way? Its got to be XHTML strict, no tables.

    Heres the code



    <div class="requestacallform">

    <form method="post" id="quickcontact" action="basicvalidation.php" onsubmit="return checkForm();">
    <ul id="quickcontactform">
    <fieldset><li><span class="imagereplacementtxt">name</span>
    <input name="name" type="text" size="15" maxlength="30" /></li>
    <li><span class="imagereplacementtxt">company</span>
    <input name="company" type="text" size="15" maxlength="50" />
    </li></fieldset>
    </ul><ul id="quickcontactform_bottom"><fieldset><li><span class="imagereplacementtxt">phone</span>
    <input name="phone" type="text" size="15" maxlength="30" /></li>
    <li id="email_li"><span class="imagereplacementtxt">email</span>
    <input name="email" type="text" size="15" maxlength="50" /></li>
    <li>
    <input type="image" src="images/quick_response_send.gif" value="send" alt="send" />
    </li></fieldset>
    </ul>
    </fieldset>
    </form>

    </div>


    CSS

    form.quickcontact{
    width:auto;
    height:auto;
    border:0px;
    margin-bottom:0px;
    margin-top:0px;
    }

    ul#quickcontactform{
    width:auto;
    height:50px;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }

    ul#quickcontactform_bottom{
    width:auto;
    height:50px;
    margin-top:0px;
    clear:both;
    padding:0px;
    }

    ul#quickcontactform li{
    width:auto;
    float:left;
    margin-left:50px;
    }

    ul#quickcontactform_bottom li{
    width:auto;
    float:left;
    margin-left:50px;
    }

    .submitbutton{
    width:auto;
    float:right;
    }

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Your HTML isn't valid to start with because you have a fieldset tag wrapped around the li rags and inside the ul tags where only li can go directly inside a ul.

    Also you didn't remove the margins on those fieldset tags.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Your HTML isn't valid to start with because you have a fieldset tag wrapped around the li rags and inside the ul tags where only li can go directly inside a ul.

    Also you didn't remove the margins on those fieldset tags.
    PLEASE NOTE EVERYONE
    SORRY IT WAS THIS , THE PREVIOUS VERSION WAS A FIX ATTEMPT.

    HERE THE RIGHT STUFF

    <div class="requestacallform">

    <form method="post" id="quickcontact" action="basicvalidation.php" onsubmit="return checkForm();"><fieldset>
    <ul id="quickcontactform">
    <li><span class="imagereplacementtxt">name</span>
    <input name="name" type="text" size="15" maxlength="30" /></li>
    <li><span class="imagereplacementtxt">company</span>
    <input name="company" type="text" size="15" maxlength="50" />
    </li>
    </ul></fieldset><fieldset><ul id="quickcontactform_bottom"><li><span class="imagereplacementtxt">phone</span>
    <input name="phone" type="text" size="15" maxlength="30" /></li>
    <li id="email_li"><span class="imagereplacementtxt">email</span>
    <input name="email" type="text" size="15" maxlength="50" /></li>
    <li>
    <input type="image" src="images/quick_response_send.gif" value="send" alt="send" />
    </li>
    </ul>
    </fieldset>
    </form>

    </div>

    AND

    fieldset{
    border:0;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }

    form.quickcontact {
    width:auto;
    height:auto;
    border:0px;
    margin-bottom:0px;
    margin-top:0px;
    }

    ul#quickcontactform, ul#quickcontactform_bottom{
    width:auto;
    height:50px;
    margin-top:0px;
    }

    ul#quickcontactform_bottom{
    clear:both;
    }

    ul#quickcontactform li, ul#quickcontactform_bottom li{
    width:auto;
    float:left;
    margin-left:50px;
    }

    .submitbutton{
    width:auto;
    float:right;
    }

  4. #4
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Your HTML isn't valid to start with because you have a fieldset tag wrapped around the li rags and inside the ul tags where only li can go directly inside a ul.

    Also you didn't remove the margins on those fieldset tags.
    have another go at solving it felgall

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The extra space is the bottom margin on <ul id="quickcontactform">

    Once you set that bottom margin to zero the only way to get them any closer is to reduce the height.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank felgall, it was height ,, I thought it was padding or margins thing so cheers.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    GET RID OF THE LIST... there is no reason for the LIST.

    ... and use LABEL, not span! .. and you probably don't need the DIV around it either since FORM is a PERFECTLY GOOD block level container. (while fieldset is a mediocre one)

    Though that 'imagereplacementtxt' class sends up warning flags too... Wasting bandwidth on some scripted nonsense that's probably also screwing the form?

    NOT that I can figure out why that's two fieldsets in the first place either, or why you are trying to set a PX height on one... Just what are you trying to even DO!?!

  8. #8
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the spans there for the image replacement text for the lables, as I'm using graphics, and I'm allready using the class for other stuff on the site so wasing bandwidth it is not. I use images because they versatile and people buy design. I want a form that has images for text and layout as follow

    name ______________ company _________________
    email ______________ phone___________________

  9. #9
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can I just float the individual form elements and position them that way trouble free ? if so , silly me. I'm floating the form elements over a background , which is the form lables and other graphics, so theres basically just html text fields that I just postion where I want.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    and you probably don't need the DIV around it either since FORM is a PERFECTLY GOOD block level container. (while fieldset is a mediocre one)
    Since to be valid input fields must be wrapped in a block level container inside the form your advise to get rid of the fieldset tags is wrong.

    While the validator cannot pick up that your code is invalid when you have <form><input> that doesn't stop it from being invalid according to the standards. It just means that the validator cannot test for this particular rule in the standards since there are too many options.

    <form><fieldset><input>
    <form><div><input>
    <form><p><input>

    all three of these are valid but the one at the top is usually considered to be the best option and the one at the bottom not so good. You MUST have a block level container wrapped arount the inputs though as unless you are using HTML 3.2 they are invalid directly inside the form tag.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use the divs to easily seperate the sections, nav, body etc, and I have used the fieldset in that way. I use a div where I would have previously used a table and span when its not w3c to not use one, thats my way at the moment.

  12. #12
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure you referencing the code in my second post, not the origional postings code.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mrcoda View Post
    Make sure you referencing the code in my second post, not the origional postings code.
    Your second version has the fieldset between the inputs and the form and so is valid.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Since to be valid input fields must be wrapped in a block level container inside the form your advise to get rid of the fieldset tags is wrong.
    1) Nowhere do I say get rid of the fieldsets, or should I say, I would suggest having only one since they don't look like separate sets.

    2) you seem to have completely missed what I was saying as this:

    Quote Originally Posted by felgall View Post
    You MUST have a block level container wrapped arount the inputs though as unless you are using HTML 3.2 they are invalid directly inside the form tag.
    Has nothing to do with what I was saying - as I was saying lose the div AROUND the form, NOT the block level container INSIDE the form.

    It has a extra div wrapping it OUTSIDE the form

    See this one in his code? <div class="requestacallform">

    There's no reason to be doing that... like about half the DIV wrappers most people seem to toss into most layouts. Anything being applied to that outer div could just be applied to form. I'm NOT saying remove the block level container like fieldset INSIDE the form.

  15. #15
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh, I see what your saying, I used them for easily seperating out the sections. Like putting things in box's when tidying a room. Your saying , the forms allready in a box. So I need to revise my block level elements and keep them free standing. I think its transitional webies that do this as they still think in tables and cant really be arsed to learn the inline and block level elements , so they use a DIV validation defence system. I'm going to redo my homepage today, "AGAIN ! NO SURLEY NOT ! ". I am comming close yet again to chucking the bloody machine out the window, tell me some Web Jedi perciverance sayings, to keep me on trac please Death. "A young jedi called Bill Gates once betrayed and murdered you father" type of thing.

    I AM DETERMINED TO MAKE A LIVING OUT OF THIS, TELL ME I'M ON THE RIGHT TRAC, CONFIDENCE INJECTION NEEDED.

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mrcoda View Post
    TELL ME I'M ON THE RIGHT TRAC, CONFIDENCE INJECTION NEEDED.
    Yes you are.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  17. #17
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what about images, i'm thinking only use sprites for speed and server call reduction, but the old browserrrrrrrrrrrrrrrrrrrsssssssss ! I thinking use a normal image placement for the logo and important stuff and sprite the rest.

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mrcoda View Post
    what about images, i'm thinking only use sprites for speed and server call reduction, but the old browserrrrrrrrrrrrrrrrrrrsssssssss ! I thinking use a normal image placement for the logo and important stuff and sprite the rest.
    With images it depends on whether they are a part of the content (and should therefore be in the HTML) or a part of the page appearance (where they belong in the CSS).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so if you had a product viewer, have a look at http://bartlettsfurniture.co.uk/table1.html

    "i can get you one of those tables , my brother makes them" no this isnt SEO !

    so you wouldnt sprite the jpg's for the image viewer ? but then theres 10 server requests instead of 1.

  20. #20
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its ok, i have you, they go in the content because as you said before the content has to be fully seperate from the styling , so you have to put the images there for more important reasons other than server request and bandwidth.

    By the way , could you recommend a good article on semantics for me?

    Thanks for this Fellgal.

  21. #21
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tell you what, I only wanted to lose a bit of space between the lists, now I have learnt so much from you gentlemen, I'm having to re-write my page , but I know it will be right. What about PHP fellgal? I use it to keep the section content seperate, using includes, so its easier to organise and edit?

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    the spans there for the image replacement text for the lables, as I'm using graphics, and I'm allready using the class for other stuff on the site so wasing bandwidth it is not.
    You can use real image replacement and still have the semantic, NECESSARY labels.

    One way to do it would be Gilder-Levin, though this would require some unique class or id (so if I say "unique" you're maybe wondering why I say "class"... it's just because I'm lazy and it's easier for me to type . than # which my keyboard tends to miss a lot) on each label.

    Or, most of the time you can even get away with an actual image with alt text. There was an issue with one particular screen reader somewhere but it's not a modern one... I'd have to find out.

    <label for="IDoftheInput"><img src="blah" alt="Email Address:" /></label>

    This is legal, and so long as you make sure the alt text colour is easily readable when images aren't present, you're good.

    If you wanted to do Gilder-Levin or something:
    <label for="IDoftheInput" id="emailImg">Email Address:<span></span></label>

    Eric Watson has a nice way of doing Gilder-Levin using z-index, but either way, you can make a form semantic and working AND add whatever bling you want later.

    Also, even though the validator won't say anything to you about it as you are using XHTML, when you have a fieldset, you ought to have a LEGEND.

  23. #23
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look at my home page www.rbcreations.co.uk/index.php "work in progress" by the way. check the top of the page, its all images and uses span to hide the text and li bg img's for the rollovers etc, and has the span set to 1x1 pixel, is this what you on about Stomme Poes?

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Forms need labels like cars need wheels. Try going through your form in a screen reader.

    I can't fill your form in. What am I doing wrong??
    http://stommepoes.nl/Forms/form.png

    This is what I see (I'll remove it after you've seen it, if you don't want images of it sitting on SitePoint).

    My point is that you can have your semantic labels and also your image replacement. Assuming you kept the list (no reason, but I guess it's cute), still wrap a label around each span and give those labels a for attribute because that's important for accessibility (which matters, you never know who will visit your page).

    Example:
    Code:
    <li><label for="cname"><span>name</span></label>
      <input name="name" id="cname" type="text" size="15" maxlength="30" /></li>
    Now, you don't even need the class.
    #quickcontact label span {
    the styles you had on imagereplacementtxt;
    }

    and the label is holding text. Of course, you'd want something else going on there, so that when people can't load your images (as apparently I couldn't do) there's still some text for them to read. That's also important.


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
  •