December 18, 2012 at 4:03 pm #18781
My Angular Theme at http://www.test.imaginedesignassociates.com/test/ is not displaying properly in certain browsers. In Firefox 17.01 the right hand borders on the right hand column of the Portfolio on the Home page do not appear. In the latest version of Google Chrome the sub heads are replaced with some sort of Pictogram. I would have attached screen grabs but there does not appear to be a facility to do so.
I would appreciate your help please.
BrianDecember 19, 2012 at 3:55 am #100898
Something is causing the portfolio containers to be one pixel too big for the space. I’d suggest disabling all active plugins including jetpack and then give the main page a few page refreshes and make sure the local cache is clear. Then see if the issue persists.
The odd thing is, it isn’t all the time but just sometimes which is what makes me think its a plugin conflict.
I don’t know what you mean by “sub heads” with Chrome however, you’ll need to explain a bit more or take a screenshot and link to that (you can use something like http://tinypic.com/ to host it).
DevinDecember 19, 2012 at 12:05 pm #100899
Thanks for your help. I have tried disabling all plugins and refreshing the browser several times but the problem still persists. I noticed that the problem starts when any of the Portfolio images are clicked. The slider that appears seems to push the width of the portfolio images below to the right. Could the problem be with the original size of the Portfolio images? They have been uploaded at 800 px wide x 600px deep.
Also, regarding the problem with the heading font not displaying properly in Google Chrome please see the image at https://www.dropbox.com/s/1jahameiay2ptu7/google%20browser.tiff.
BrianDecember 19, 2012 at 7:35 pm #100900
I don’t think it has anything to do with the images themselves. They are not causing the issue. Its actually with the container holding the slideshow/content but I just can’t place or see the exact cause when inspecting everything.
As for the heading, I’m not getting anything like that when I view the page. Its rendering as normal text on my end. It could be that your computers “HelveticaNeue” font file is not there/has an issue on your local machine.
One other thing, in your Propulsion theme options try removing the google analytics tracking number you have there. What should be there is not just the number but the entire code block that you get from google.
DevinDecember 22, 2012 at 12:14 pm #100901
Thanks for the advice. I will wait and see if anyone else comes up with a solution to why the border on the image grid on the right hand column of my Angular theme is not displaying in Firefox.
Thnaks once again
BrianDecember 26, 2012 at 6:04 pm #100902
I took a look at your site and a few hours ago I answered the same support request. This is WP3.5 I think.
 css corrected.
Please try this:
overflow: visible !important;
You should also change ‘The English Language Studio’ to just ‘English Language Studio’, so that titles are all positioned on one level.
NickJanuary 2, 2013 at 1:09 pm #100903
Thanks for the advice. I added the new CSS styling code to my Custom CSS and shortened the title of The English Language Studio as suggested but neither of these suggestions have worked.
The right hand border appears to disappear as soon as the last Portfolio image is loaded on the home page grid. This problem
Any help would be greatly appreciated.
BrianJanuary 2, 2013 at 4:56 pm #100904
I’m not seeing any issue with the visibility of the borders when viewing your site now but I do still see them not getting calculated correctly.
I can only imagine a plugin conflict since I can’t replicate the issue on my end or see any other possible variable that is different on your installation.
Another possible suggestion would be to regenerate all your thumbnails though its a guess more than a major possibility. You can do this with: http://wordpress.org/extend/plugins/regenerate-thumbnails/
DevinJanuary 2, 2013 at 10:11 pm #100905
How do you trigger this event? If you look at the video, initially this doesn’t occur. For me, the opening of Google Developer Tools triggers it.
I looked again and noticed I gave you a slightly different css from what I used. Please try this:
overflow: visible !important;
NickJanuary 3, 2013 at 5:02 pm #100906
Hi Devin and Nick,
Thanks for the suggestions. I have tried everything you have both suggested i.e. disabled all plugins one by one, regenerated all the Thumbnail images, added the CSS styling code to my Custom CSS, disabled web developer and other plugins in Firefox but the problem still persists.
Any other thoughts on what the solution might be?
BrianJanuary 4, 2013 at 2:14 am #100907
The code is correct.
Your custom.css file is missing a closing curly bracket , so the css code below it is ignored.
Please add } to line 35 of your custom.css file so that lines 32-35 look like this
What browser are you using?
NickJanuary 4, 2013 at 12:55 pm #100908
It works perfectly now! I have been using Firefox but the problem was occurring on Chrome as well. Thanks once again for all your help.
BrianJanuary 4, 2013 at 6:57 pm #100909
The topic ‘Angular styling problems’ is closed to new replies.