Strange Characters when INPUT border applied

Having applied a border to INPUT, a strange || appears before a FORM statement on the page in Firefox.

This can be seen at http://chicapparel.co.uk in both the login pages and on the header. Any ideas what causes this?

In IE, borders appear around radio buttons. How do I prevent that yet still retain the outline of text input areas?

Even more puzzling is that when I look at the site this morning, the || has turned into |||| overnight!

I'm obviously misunderstanding something in the CSS here, but what?

Oddly enough, your title is your answer! Don't apply the border to all INPUTs.

Those aren't characters, but borders applied to an input. By applying a border to all inputs, you include hidden fields.

It's hidden form fields that are having borders drawn around them which are producing the effect of pipe | character. It's actually a 1px gray border.

I hope that this makes sense, even it not all that helpful. It sounded more helpful in my head than it looks on the screen - sorry!

Cheers

Jak

Thanks - that makes sense...so is INPUT.name_of_field the correct syntax?

As far as I know it'd need to be the ID or CLASS in the usual way rather than name of element - To sanity check before I answered, I googled and saw various discussions via google about input[type="text"] oir input.text but IE doesn't seem to like it.

I could be wrong - usually am!

Ryk,

This is from your stylesheet

INPUT{
border: 1px solid #aaaaaa;
}

I'd just eliminate this altogether.

Just to summarise, the issue was that a border is required around the INPUT fields, but if one simply applies ```
INPUT{
border: 1px solid #aaaaaa;
}

then every input - textfield, radio andf hidden fields end up with the border. The advice was to identify the individual fields, and I've been playing about with this over the past week or so.

So far, my "INPUT" section of the stylesheet looks like this..```
INPUT#navMainSearch, INPUT#login-password,INPUT#login-email-address,INPUT#firstname,
INPUT#lastname,INPUT#street-address,INPUT#suburb,INPUT#city, INPUT#postcode, SELECT#country,
INPUT#telephone, INPUT#fax,INPUT#dob,INPUT#company, INPUT#email-address,
INPUT#password-new, INPUT#password-confirm,INPUT#contactname, INPUT#productAttributes, .myInputBox {
	border: 1px inset #aaa;
}

This list is going to keep growing...surely there's a better/easier way to achieve this? If not, does anyone have a complete list of all Input field names?

Ryk-

I am a bit confused as to how or why the borders disappeared to begin with. Normally unless you choose to style an input the borders are automatic. :unsure:

Yes - and when I switch back to classic, all is as it should be. But matching the INPUT statements (or absence of them!) between the 2 stylesheets doesn't make any difference.

I'll keep digging, and if I can resolve it, I'll let you know.

Now come on deve team - SEVEN minutes as an editing window is really far too short!! :schmoll:

OK, problem solved - I'd read somewhere that adding ```

• {
  margin: 0;
  border: 0;
  padding: 0;
  }

at the start of the stylesheet would clear any browser defaults...which indeed it does! :laugh: