Conditional formatting in Firefox

climber83 · 11-13-2011, 12:22 AM

Hey Guys,

I'm semi-new to web developement and am working on this site: http://www.hurjewelers.com.

I've got just about everything buttoned up except that the search box that is currently inside the navigation bar looks wierd in Firefox. I built the site while using Chrome and have fixed the issue in IE using conditional formating but can't for the life of me figure out how to fix it in Firefox.

Would some body mind taking a look at it for me and seeing if I've made a typical newbie mistake somewhere?

Thanks!

P.S. it's build on a zen-cart platform. I don't know if that makes a difference or not.

BulletTimeBill · 11-13-2011, 07:14 AM

Well you've got this
margin-top: 5px;
margin-top: -5px\9;
On you're input element. I assume this is accidental? Fix that up and it should be right? I don't have access to FF at the mo, but i'd say that is causing a problem. There is no conditional formatting for anything other than IE. The trick unfortunately is if you do it right, it will work :P

Frankie · 11-13-2011, 10:26 AM

Quote:

I (...) have fixed the issue in IE using conditional formating

That is correct for IE8, but not for IE7 and 9. Open the site in IE9, press F12 and play with the browser mode to see for yourself. Also, in IE6 there is no navmenu, and the content is way too far down.

Furthermore, I see several at best non-semantic code snippets, such as display:inline and float:left for one selecter, vertical positioning through negative margins where that is not necessary, and on-page javascripts repeated on every page. And the page contains several avoidable errors: W3 Validator.

Sorry that I have such bad news for you.

climber83 · 11-13-2011, 03:28 PM

BulletTimeBill:
the margin-top: -5px/9 was an IE 9 fix I saw in a youtube video (may not be the best way) and appears to have worked in IE8. I don't have Windows 7 so can't download IE9 yet to test it.

Frankie: I'm not sure what my issue is but I can't get the developer tools in IE to actually display. (Do I sound like a retart yet?) I think I can get your other suggestions addressed. Do you know what might be causing the search bar to be off in Firefox but not in Chrome?

Frankie · 11-13-2011, 03:42 PM

Quote:

Originally Posted by climber83

I'm not sure what my issue is but I can't get the developer tools in IE to actually display.

That is a must for any web developer, a working IE9 with a functioning developer tool. I don't have any easy answer for you, you'll have to google for that.

Quote:

Originally Posted by climber83

Do you know what might be causing the search bar to be off in Firefox but not in Chrome?

Yep: the use of negative margin to position the navbar. If you just position the divs according to the natural flow, your problems should be over. For that, put the header image as background, not as div filling. Then through making the header div less high, the menubar will move up.

AsinNetworks · 11-13-2011, 05:00 PM

Please have a look on your contact us page as well