How to make my firefox browser compatible?

My site perfectly works on chrome and even IE, but it fails to appear in the same way on firefox.

Its actually width of the site, which appears to be more on firefox than chrome and IE.

I do understand, I have to use -moz- in order to make it compatible on firefox. But I am not able to figure out how to actually use it for width of the site.

Can someone please help me with making it to appear the same way as on chrome and IE?

The link to my site is http://91.109.247.179/~radiocom/moores/

Thanks.
jonathanduane2010Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I do understand, I have to use -moz- in order to make it compatible on firefox.
Not true -moz styles were introduced back when css did not natively support a particular style - many of these have now been incorporated into CSS and thefore -moz is not required in most situations. It is retained in some instances for backward comparability but this not really an issue for FF as most FF users stay current with their versions

I tested on FF 41.0.2 and 40.0.3
Chrome 46.0.2490.7
IE11

Put them all into Full Screen mode and then alt tabbed between them. Apart from a few minor differences in how fonts are rendered - they look identical.

Try this - in each of your browsers Hold the Ctrl key and press 0

You might find that one of your browsers is at something other than the default zoom level so it appears to be a different width.
1
Don ThomsonCommented:
I tried your link on I.E  , Chrome and Firefox.  In full screen mode all loaded fine.  When I reverted to a Window, The width stayed the same and shrunk the page to fit until I got to about 75-80%  and then the pages started to cut off
1
jonathanduane2010Author Commented:
Hi,

Thanks for replying back.

The site is buggy(lagging) on firefox.

Also the button are a little out of place.

Thanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Did you try resetting your zoom? Your Firefox version looks bigger than Chrome - did you try Ctrl+0 in FF?

The problem is specific to your browser - see attached screen shots of chrome / firefox full screen view versions of the website
chrome.jpg
firefox.jpg
0
jonathanduane2010Author Commented:
Are you not finding it kinda buggy and slow to navigate on firefox ?
0
Julian HansenCommented:
Not more so than chrome - but are we not drifting off topic - the question concerns the size of the page?
0
jonathanduane2010Author Commented:
Well, this is higher priority problem than size of the screen.
0
Julian HansenCommented:
Well, this is higher priority problem than size of the screen.
What has higher priority - the speed?

If so please open a new question for that. This thread is dealing with the width issue on FireFox.
0
jonathanduane2010Author Commented:
Ok.

Lets just deal with the screen size than only.

Do you see the search button on top right side corner of the homepage ?

The border button is little displaced on Firefox.

Is there anyway we can fix that ?
0
Julian HansenCommented:
The gap is caused by the fact that your markup is doing this
<input> for search text with padding 6px and border 2px giving total extra height of 16px (2x6px + 2x2px)
The search button is positioned over the input but only has a padding of 7px top and bottom accounting for only 14px extra height so you need to increase the padding on the button
style.css line 4168
.tb_widget_search form input[type="submit"] {
  font-size: 13px;
  padding: 8px 15px; /* CHANGE TOP / BOTTOM PADDING TO 8px */
  position: absolute;
  right: 0;
  top: 0;
}

Open in new window

1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.