New design

[Brogan]

Can you screenshot it?

 

[ExtremeNinja]

There's no browser specific CSS for the search panel at all.
Just a few simple border-radius declarations which have now been removed.

Unfortunately I don't have any Mac or mobile devices so testing is not an option.

I actually have no idea how the site looks (or renders) on anything other than a PC.

This tool might help. http://browsershots.org/

 

[Brogan]

I'm on my iPad. The main search input field in the right of the main nav bar.

BTW, not sure if you're aware, but you can screenshot using an iPad/iPhone - by pressing the Home button and Power buttons at the same time briefly.

This tool might help. http://browsershots.org/

Sites like that aren't always terribly accurate so can't be trusted.
The only way to see a true rendering is via the actual device, OS and browser.

 

[ExtremeNinja]

Yep. It's then posting the image which is the problem. I'll have a go.

 

[Brogan]

Yes, you won't be able to upload an image using the browser on an iPad, it can only be done with an app (don't you just love how open Apple products are? )

 

[ExtremeNinja]

Pain. Why not use a standard files and folders interface?

 

[Brogan]

The system here uses a flash uploader.

But the issue is the iOS browser, file uploading is blocked by Apple.

 

[ExtremeNinja]

I'll pop you a screenshot when I sit down at my PC. Have emailed it to myself from the iPad.

 

[Brogan]

I'm on my iPad. The main search input field in the right of the main nav bar.

Let me know if it's still showing the radius.

I have entered this which will apply to every single element. If it disappears then there must be a bit of code somewhere I need to track down.

* {
border-radius: 0 0 0 0 !important;
}

 

[ExtremeNinja]

On another note, you might want to think about optimising your CSS a bit. For example, the following could be written much more efficiently.

.textCtrl {
  background-color: #FFFFFF;
  border-bottom-color: #E9E9E9;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #C0C0C0;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #E9E9E9;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: #C0C0C0;
  border-top-style: solid;
  border-top-width: 1px;
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 13px;
  margin-bottom: 2px;
  outline-color: initial;
  outline-style: initial;
  outline-width: 0;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 3px;
}
 
 
=> => =>
 
 
.textCtrl {
  background: #FFFFFF;
  border: #E9E9E9 solid 1px;
  border-left-color: #C0C0C0;
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 13px;
  margin-bottom: 2px;
  outline: initial initial 0;
  padding: 3px;
}

 

[Brogan]

It's not coded like that at all, that's just how the browser interprets it.

If you want to see how it all works, try a free demo here and click on Style Properties in the ACP: http://xenforo.com/demo/

In addition to the SP, there are also CSS templates if you really want to get your hands dirty.

 

[ExtremeNinja]

Here you go. The field initially loads with square corners and then the radius is applied. This makes me think that the style is being applied with javascript.

 

[Brogan]

Ah no, that's definitely an iOS browser/app function so there's nothing I can do about it unfortunately.
There's no .js related to CSS styling for the search elements.

Even before I removed the border radius, it was nowhere near as pronounced as that, it was only 4px on each corner.

 

[ExtremeNinja]

How very odd. I wonder how other websites are controlling the display output of the text input element. I've got to get to the bottom of this now or it will niggle me. I'll let you know my findings this eve.

 

[Brogan]

Indeed, it's a bit odd to say the least.

How does it appear here? http://xenforo.com/community/

 

[ExtremeNinja]

Initially with 4px radius and then jumps to full rounded style on full page-load. Same.

Odd. Ill try and figure it out with a bit of debugging later.

 

[Brogan]

Glad it's not my dodgy, hacked together code then

 

[ExtremeNinja]

input {
    -webkit-appearance: none;
}

Have a go at this Bro​

 

[Brogan]

Give it a try, I've just added that.

 

[ExtremeNinja]

Grrr. The interwebs lied. I will solve this. The following was suggested as belts and braces but the former should have worked.

* {
border-radius: 0 0 0 0 !important;
}