Hello All,

I am having a small issue lining certain things up between the PC versions of some modern day browsers and the Mac versions of the same modern day browsers… I have searched the web for a "script" of some sort to first be able to target whether the user is on a PC or Mac, and then run specific CSS Hacks to target between Firefox, Chrome, Internet Explorer, Safari, & Opera, to get my the website to look as "exact" as possible…

So to be clear… The design would look a certain way in Firefox's browser on a Mac but have minor differences here and there in PC's version of the Firefox browser… And has been confirmed in other browsers swell.. meaning there would be small differences from Mac's Chrome browser and PC's Chrome browser, so on & so forth…

I have used a reset.css file to remove any "extra browser specific" styles or custom browser spacing…

Through trial and error I have been able to bring certain things in a little closer but there are some things just wont cooperate…

One of my main problems right now is that main menu bar, It needs to be lined up in both PC and Mac, but if I move it in Firefox (on a MAC) it moves in Firefox (on a PC) which is why I cant use browser specific CSS hacks…

What would I do in a situation like this?

Thanks for your help in advance!

I cant upload images until I have a certain amount of posts. ;-)

I want to upload my screens, but I cant upload images until I have a certain amount of posts. ;-)

Provide a URI where we can see and debug the problem.


Pictures cannot be debugged anyway. so they are only useful as an example

Here is a link to the page described here:

www . pilcreativegroup . com/clients/IDR/beta-site/

Maybe you can see whats going on here?

run specific CSS Hacks to target between Firefox, Chrome, Internet Explorer, Safari, & Opera, to get my the website to look as "exact" as possible…

1 - do not HACK, it will only lead to problems
2 - it's just not necessary
3 - websites do not have to be EXACTLY the same in all browsers, and that's OK!

Generally, GOOD browsers, FF, Safari, and Chrome work the same way whether on PC or Mac, so the problem more than likely lies in your code.

After looking at the REAL code for your site ( the code that you pulled into those nasty frames), you have a lot of invalid code for an XHTML doctype. Divs inside of <a> tags?? That is incorrect.

I would suggest that you validate your code, fix the coding errors, then see what you get.

Thank you for your advice...

As far as your statement...
"3 - websites do not have to be EXACTLY the same in all browsers, and that's OK!"

For my clients... "ITS NOT OK" they want everything to be as exact as possible and if at the end of the day it can't be done then fine... but if there is a way to get it that way, then I will most definitely try...

regardless, this is very good advice as far as writing clean code goes... the validating thing.... not so much... because lets be honest here... My clients only want to look good, be found in search engines, and actually make some sales through this website... as long as they can do all of those, they will be pleased... not to mention, some of the most successful / popular sites out there DO NOT validate but they are successful at what they were designed to do...

but not to deter from the subject at hand, this is very good advice and I will keep this in mind and report back with any updated news that I encounter...

Thanks again!

For my clients... "ITS NOT OK" they want everything to be as exact as possible and if at the end of the day it can't be done then fine

The odds are your clients are not really aware that there are other browsers and will only have one on their machine which will be whatever was installed when they bought it or what their IT department have set up.

Or you could educate them!
http://www.noupe.com/design/websites...re-is-why.html

The other thing of course is:


If the clients know so much about browsers and website design/development WHY have they hired you???

Originally Posted by chrishirst

The odds are your clients are not really aware that there are other browsers and will only have one on their machine which will be whatever was installed when they bought it or what their IT department have set up.

Or you could educate them!
http : // www . noupe . com/design/websites-shouldnt-look-the-same-across-different-browsers%E2%80%A6here-is-why.html

My clients are designers, they have both PC & Mac, and all major modern browsers for testing purposes... but thanks for the article, I'll definitely check it out!

Originally Posted by chrishirst

The other thing of course is:


If the clients know so much about browsers and website design/development WHY have they hired you???

As stated before, they are designers not programmers... thats what I am here for...

So they should be MORE than aware of browser difference and why pages are ALWAYS going to differ in their rendering of pages.

the validating thing.... not so much..

Running your code thru the validator, or using the Firefox HTML tidy extension - is the quickest way to find errors in your code. Validation is not the be all and end all, it is a TOOL to get to clean, valid code and valid code DOES matter, especially when it comes to cross-browser compatibility.

While clients may only be interested in the 'look pretty' part, you should be concerned with far more than that to ensure compatibility and progressive enhancement.