HELP! How can I display one style in Safari and a different style in Chrome?

views:

answers:

+1 Q:

HELP! How can I display one style in Safari and a different style in Chrome?

My client is starting to get antsy....so any help would be greatly appreciated. I am having issues with my secondary page header images shifting. It is displaying correctly in Firefox, I haven't been able to check in IE yet w/out access to a PC. It was displaying correctly in Chrome, but shifting in Safari.

I added the "webkit hack" to write a specific css style for Safari, but once I did that....it started shifting in Chrome. What can I do to fix this issue??

http://airwavetelecom.net/beta/?page_id=2

You could parse the user agent and pass a different CSS file based on the result. However, it seems like a weird issue that shouldn't happen with proper CSS; can you post the specific bit that doesn't work?

By the way, you should read up on animation queue in jQuery! Hover many times on your menu and it'll keep flashing for a while.

Pier-Luc Gendreau 2010-05-26 05:14:22

Thanks for your quick response. I am a true newbie to CSS and development in general, so it is very likely that the CSS is not written properly. But if you view this page, and also the Services page, in Safari...you can see those header images shifting up. http://airwavetelecom.net/beta/?page_id=2

aWarner 2010-05-26 05:22:45

Pier-Luc Gendreau 2010-05-26 05:28:58

aWarner 2010-05-26 05:40:44

The repositioning of .page_about is pretty odd. Why don't you just use .custom_title for the entire header? That wouldn't require such odd re-positioning.

reisio 2010-05-26 06:28:22

Well if I added one image to the .custom_title css, then it would carry that same image to the rest of the secondary pages, since they are using the same Wordpress theme page template.The .custom_title just calls the text from the page's title field. How could I go about getting this to call different images on different pages?

aWarner 2010-05-26 07:13:48

@aWarner: Either put the title into the page code or use a _very little_ extra PHP to mark the code (with a class) so the CSS knows what page it should render.

reisio 2010-05-26 16:35:58

How could I change the page code of each page though since these are Wordpress pages based off of the same template page.php?

aWarner 2010-05-26 19:43:03

@aWarner: http://www.google.com/search?q=php%20different%20based%20path http://codex.wordpress.org/Theme_Development#Query-based_Templates

reisio 2010-05-27 05:40:43

There's some problem with the way you're using your .clearfix class that I'm not sure of. If you add a clear:both; to your .page_line class it will fix your problem.

mVChr 2010-05-26 18:42:49

thanks for your help. I added this to the .page_line class, but still is shifting in Safari. http://airwavetelecom.net/beta/?page_id=2any other suggestions?

aWarner 2010-05-26 19:37:29

Clear your cache? (hold down shift, click reload) I just checked in Safari and it's working for me.

mVChr 2010-05-26 20:29:40

Now try it...it seems that when I added clear:both; its not displaying correctyly in any browser now. Check this out in any browser and see. There are borders around all images and images are being shifted all over the place in all browsers. http://airwavetelecom.net/beta/?page_id=2

aWarner 2010-05-26 20:56:16

woops...no hang on...I replaced the wrong style.css

aWarner 2010-05-26 20:58:55

Everything is working perfectly in all browsers. THANK YOU SO MUCH! You are a lifesaver right about now. One more quick question if you have time. Can you tell what is making the beginning of the "Careers" form shift up to the right of the "Request an Estimate" form. It only does this in Safari? Thanks again for all of your help!! http://airwavetelecom.net/beta/?page_id=18

aWarner 2010-05-26 21:03:27

Long answer: Please read up on floats and clearing http://tinyurl.com/33bkbea ... Short answer: Looks like a `.clearfix` on `.portfolio_title` will fix it.

mVChr 2010-05-26 22:30:32

That fixed it! Thank you so much for your time and input!!!

aWarner 2010-06-02 23:51:29

ansaurus

tags:

views:

answers:

HELP! How can I display one style in Safari and a different style in Chrome?

related questions