PDA

View Full Version : Google Search box does not display properly



Whitesman
August 25th, 2012, 05:01 PM
Hi,
I was wondering if anyone can help me with an issue I have with Firefox on Ubuntu. I mess around trying to develop websites which ...yes i know are quite amateurish. I have incorporated a Google search box which works fine with Windows on both IE and firefox but some how doesn't work on Ubuntu.

On http://www.middletonia.co.uk the box is all squashed up( see top left of page). I have applied style to the search box in external style sheet style.css. The button to start the search is under the writing as I have defined the width as width:213px; and this is important to the right width on Windows.

On http://www.thenatureofthegods.co.uk the Google search box has no width and ends up being far too large. I am assuming that this is the fault of Ubuntu. I was hoping that there might be an easy solution to this but when I change one thing its affects windows differently then Ubuntu. while Firefox and IE on windows work consistently.

Any suggestions?

Paul Whitesman

nothingspecial
August 25th, 2012, 07:54 PM
Thread moved to Programming Talk.

ofnuts
August 26th, 2012, 03:43 PM
Hi,
I was wondering if anyone can help me with an issue I have with Firefox on Ubuntu. I mess around trying to develop websites which ...yes i know are quite amateurish. I have incorporated a Google search box which works fine with Windows on both IE and firefox but some how doesn't work on Ubuntu.

On http://www.middletonia.co.uk the box is all squashed up( see top left of page). I have applied style to the search box in external style sheet style.css. The button to start the search is under the writing as I have defined the width as width:213px; and this is important to the right width on Windows.

On http://www.thenatureofthegods.co.uk the Google search box has no width and ends up being far too large. I am assuming that this is the fault of Ubuntu. I was hoping that there might be an easy solution to this but when I change one thing its affects windows differently then Ubuntu. while Firefox and IE on windows work consistently.

Any suggestions?

Paul Whitesman
Both look OK to me, on "Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:14.0) Gecko/20100101 Firefox/14.0.1" (see attachment)

vasa1
August 26th, 2012, 04:31 PM
The Middleton one shows up properly in Opera 12 as well ...

Whitesman
August 26th, 2012, 05:47 PM
Both look OK to me, on "Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:14.0) Gecko/20100101 Firefox/14.0.1" (see attachment)

That does surprise me as I have the latest ubuntu download on my pc with update-to-date Mozilla and the Search button (on Middletonia site) is buried under the text. I'm not on my linux pc now but I will have to send you a pic. I can see from your photos that both seem okay which is great news.

It's the 'Middletonia' site http://www.middletonia.co.uk/home.html that is worst affected and I have put the search box on every page. I have had to decide to leave it as it is because I can't correct it. On 'The Nature of the Gods' http://www.thenatureofthegods.co.uk/ it is just the input box itself is very much wider than it appears on Windows in either Mozilla and IE. I wonder then why I can see this on my system and you can't? Any ideas?


Thanks for taking the time to look and hopefully if I can send you some photos when I get back to my flat tomorrow you can have a peep and see what you think.

Paul

Whitesman
August 27th, 2012, 11:10 AM
Hopefully you will be able to see attachments. Middletonia (the first image) has the non functioning squashed Google box and The Nature of the Gods has an extra wide search box. The later is not important as I made room for is when I realised what was happening. The former is a problem because this has been copied onto the hundred and odd pages of the site.

I am using the latest Ubuntu, which I forget the name of now but have it set to the classic view as I don't like the Unity bar.

Any ideas?

Paul

snip3r8
August 27th, 2012, 09:12 PM
Even works on iPad

Whitesman
August 27th, 2012, 10:20 PM
Even works on iPad


Hi thanks for that. I'm glad to hear the sites work well on iPad as a lot of people seem to use them these days. If you look at my post above I have included two snapshots which will show you the problem I am having on Firefox on Ubuntu OS. Firefox on Windows works okay as do most other browsers. I have other problems with browser on Android phone OS but I was concerned that I could not get the Google search box working on Ubuntu and I have no idea why. I can't help thinking there must be a solution to this.

greenpeace
August 29th, 2012, 06:28 PM
hi,
I can see the overlap you mention on Firefox on ubuntu, but it looks fine on Chrome.

Consider setting the width of the search box as part of the style, and remove the size=18 property from the <input> tag

When I replace it here with width:10em; (just add to the style="" property on the tag if you want to test it) it looks good on Chrome and Firefox.

I'm not sure how that appears on Windows, but hope it helps.

greenpeace
August 30th, 2012, 05:55 PM
Also, for the http://www.thenatureofthegods.co.uk/ site, you can use the same trick...

... just set the desired width of the field in the style of the <input> tag!

I just had a look on Windows and it looks fine if you make that change.

Let me know how it goes (and don't forget to mark it solved if it all comes out ok!)