css question: firefox vs chrome - OSTraining Support

Welcome, Guest

TOPIC: css question: firefox vs chrome

css question: firefox vs chrome 11 months 3 weeks ago #50130

carinlynchin OFFLINE OSTarlet Posts: 50 Karma: 0	I have some jquery on this page and in chrome it works the way I want...the menu items (on left) don't move with animation...but if you view the same thing in firefox there are some movements that happen with the menu...at least for the first few events...but after a few seconds it stops... here is the site www.feminineintimates.com.au/index.php
	Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50173

edandrea OFFLINE OSTop Dog Posts: 3105 Thank you received: 7 Karma: 0	Hi Carin, Not 100% sure because there is so much going on with those links. But it looks like the inline style you have on the menu item plays differently in Firefox than it does in chrome. I got the animation to stop when I turned off some of the inline style. Try removing some of the style from the menu links. Cheers, Ed
	Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50218

carinlynchin OFFLINE OSTarlet Posts: 50 Karma: 0	but all that is created thru joomla...I didn't add those inline styles...the only inline style i have is the background because i use php to get it from the template params...but I know better than using inline styles...so how can I change it if joomla does it?
	Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50235

edandrea
OFFLINE
OSTop Dog
Posts: 3105
Thank you received: 7
Karma: 0

The inline styles aren't coming from Joomla, they are coming from the script which is in your head tag.

<script type="text/javascript">
		$(document).ready(function(){
			var j = jQuery.noConflict();
			var docHeight = j(document).height();
			
			j(".vertical_menu .image-title").css({'opacity':'0', 'width':'0'});
			j(".horizontal_menu .image-title").css({'opacity':'0', 'width':'0'});
			
			j(".vertical_menu img").mouseenter(function() {
					j(".vertical_menu .image-title").stop();
					j(".vertical_menu .image-title").animate({'opacity':'1', 'width':'100'},"slow");   
					j("#overlay").css({'opacity':'0.8'});					
				});
			j(".vertical_menu").mouseleave(function() {
					j(".vertical_menu .image-title").stop();
					j(".vertical_menu .image-title").animate({'opacity':'1', 'width':'0'},"slow");  
					j("#overlay").css({'opacity':'0'});					
				}); 
		});
	</script>

I was just looking at this again in Chrome and it is having problems there for me as well. When I mouse over the links, a mask hides the home page and the text of the menu items is truncated.

I think this script is just not working right no matter what. Perhaps you should try a different one or a different effect. Trouble shooting scripts is beyond what we can do.

If this was part of a template you purchased, you should go back to the developer and get some help. Or you could try to fix it if you know about scripting.

When one of the other team members sees this they may have an idea for you, but I think the script is the problem.

Cheers,
Ed

Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50239

carinlynchin OFFLINE OSTarlet Posts: 50 Karma: 0	oh ok...i didn't know that jquery added them as inline scripts...I'll keep messing around I guess...thanks
	Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50252

tessa NOW ONLINE Moderator Posts: 4030 Thank you received: 138 Karma: 10	Hi Carin, Add this to your layout.css file: .image-title{ display: inline !important; } Your javascript (jQuery) code is creating inline styling which conflicts with your template styling. This was a very tough one. I had to have a friend help troubleshoot with me. OSTraining doesn't provide coding support, but I did this for entertainment and a learning experience. :-)
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50259

carinlynchin OFFLINE OSTarlet Posts: 50 Karma: 0	I didn't know about that one.. .what does ! Important do? And thank you
	Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50269

tessa NOW ONLINE Moderator Posts: 4030 Thank you received: 138 Karma: 10	Carin, !important makes that style override another style that is changing it. It's been a lifesaver for me. :-)
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 3 weeks ago #50443

carinlynchin OFFLINE OSTarlet Posts: 50 Karma: 0	I did that and although it did help with the movement, where it made them inline, the width animation didn't affect it anymore..only opacity. But I liked the slide out effect I had so in order to do that I have to set the width and in order to set width, it has to be a block item...so any suggestions?
	Please become a member of OSTraining to reply to this post.

css question: firefox vs chrome 11 months 2 weeks ago #50506

tessa NOW ONLINE Moderator Posts: 4030 Thank you received: 138 Karma: 10	Hi Carin, There seems to be a few issues with that page. I would suggest hiring someone to clean things up for you to make things a lot easier for you. This will take me quite some time to figure out for you. Here are our suggested developers. I recommend the person on #1. :-) www.ostraining.com/resources/joomla/developers/
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

Forum

Questions

Coding Questions

css question: firefox vs chrome