HELP unwanted space between form unordered list

HTML & CSS
1

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

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!?!

3

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.

4

Your second version has the fieldset between the inputs and the form and so is valid.

5

Make sure you referencing the code in my second post, not the origional postings code.

6

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.

7

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.

8

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?

9

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:


<li>[b]<label for="cname">[/b]<span>name</span>[b]</label>[/b]
  <input name="name" [b]id="cname"[/b] 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.

10

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?

11

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.

12

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).

13

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.

14

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.

15

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.

16

Yes you are.

17

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.

18

  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:

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.

19

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.

20

thank felgall, it was height , I thought it was padding or margins thing so cheers.