annoying white space issue

[unwashed potato!]

ok this has just bugged me for the last time so i will be finding a solution to it so i can finally say hasta la vista baby to it once and for all.

when i am writing away i like to add white space to my code to keep it neat, however white space in code sometimes adds white space on the page, e.g.

<form action=''>
   <label for='field1'>Search our Site</label>
     <input type='text' class='field1' id='field1' name='keyword'/>
     <input type='submit' class='field2' value='search' />
</form>

this will be displayed with a space between the input text field and the submit button. annoyingly i will forget this and spend far too long looking why there is a 2px margin between the fields, to eventually remember it's because there is a space in the code.

how can i stop this from happening in the future? i want to have the white space to keep the code neat and i am sure i will be doing it again any way so i really will be so grateful to whoever gives me the answer

thank you

 

[probedb]

Generally you can't.....down to the point that IE6 sometimes puts spacing inbetween list elements unless you put the <li> and </li>s next to each other.

 

[Tripnologist]

Floating fixes it.

 

[unwashed potato!]

Floating fixes it.

but creates other problems so not really a solution in my opinion.

 

[Dano]

CSS for the input element:

display: inline;

works doesn't it? (been a while so I may be wrong...)

 

[unwashed potato!]

CSS for the input element:

display: inline;

works doesn't it? (been a while so I may be wrong...)

unfortunately they were already stlyed as inline so i guess not.

 

[Dano]

And for the submit element too?

 

[unwashed potato!]

And for the submit element too?

sure is.

 

[Sic]

Well form inputs are inline anyway, so surely display:inline is redundant?

Personally, if I were you I wouldn't style forms like that. I find you get much more control if you wrap elements (and labels if you're using them) in block-level elements such as <li>, <p> or <div>. This, coupled with the fact that XHTML strict denotes that you can't place an inline element directly inside a form tag, makes styling much easier.

Maybe IE6 is causing problems because you're putting it into quirksmode by contravening strict guidelines? That's just a guess but you never know.

 

[unwashed potato!]

i haven't even looked to see if this problem is in ie6, i assume it is but it's also in firefox3 so very annoying. how would wrapping the elements in block level elements help?

they are already wrapped inside a div, i then want the label, search box, and search button all to appear on one line (e.g. this search bar but without any space between the elements) so i would have thought inline without floating is the best way? it just means that the white space is being shown

 

[Augmented]

Make sure your editor is using tabs instead of spaces for indentation when writing markup. Generally using spaces is much more preferable for programming code, but for markup it introduces a number of problems.

Tabbed whitespace is fully collapsed by browsers when rendered, while spaces are only collapsed down to a single whitespace character.

 

[unwashed potato!]

Make sure your editor is using tabs instead of spaces for indentation when writing markup. Generally using spaces is much more preferable for programming code, but for markup it introduces a number of problems.

Tabbed whitespace is fully collapsed by browsers when rendered, while spaces are only collapsed down to a single whitespace character.

ah maybe this is it then. i'm using notepad++ so how would i find out if it's using tabs and not spaces?

not sure if it makes a difference when the show all characters button is selected there is CR and LF between any element on a new line, not sure what they mean though, guessing clear left?

 

[Augmented]

CR = "Carriage Return" or \r
LF = "Line Feed" or \n

These are just the new-line characters and are perfectly fine. Windows uses \r\n, and nix uses \n.

I'm not sure about configuring Notepad++.