I am working on a site with Spry Tabbed Pannels. My problem is that I can't get my .TabbedPanelsTab, .TabbedPanelsSelected, TabbedPanelsHover, and .TabbedPanelsTab a, to touch the .TabbedPanelsContentGroup.
There is a very thin white line in between the two and I've tried lots of things, like a negative margin, or an extra thick border. And nothing seems to work.
My tabs have images in them for design purposes, so that's just a heads up.
Here is the site for reference:
http://emilymagnuson.com/trustbank/index.html
Does anyone have a solution?
Thank you!
I think the problem is within your .TabbedPanelsContentGroup:
change the padding-top from 3px to 0px.
Let me know if I misunderstood your query.
Related
people,
I am currently trying to create a horizontally scrollable table (filled with pictures) where my content (img with some p) always fitts the screen. This means the height of the content has to adapt depening on your screen resolution or ideally also when browsing from a mobile device... I've tried a lot with HTML and CSS and actually thought this should be an easy task, but I just can't get it to work properly :(
I'd really appreciate some help. How'd you do this?
Thanks in advance!
Out of the blue, EVERY browser shows the same problem. The left-most column is squashed and refuses to expand. It makes it impossible to edit the template options. Any ideas? thanks :-)
This looks like a glitch with Shopify and would be better addressed by opening up a support ticket with their support team
Note: If you shrink your screen width to 599px wide or less, the sidebar should expand to be 100% of the window width - this might help if you're in a pinch and need to make updates right now
I have searched and researched stackoverflow but couldn't find any good answer that might help me.
I am using stellar.js to create parallax backgrounds, but sometimes as I scroll the page, the background goes down, creating a white space (instead of creating the parallax effect).
Here is a preview of the image with explanation:
http://s30.postimg.org/owb86e3bk/stellar.jpg
Any ideas would be great. Thanks.
$.stellar({
horizontalScrolling:false
});
This one has me stumped. I've used Flexslider with no issues many times, but with a site I'm building now it just refuses to work properly.
The last slide will show on load and stay visible until it has cycled through all of them, at which point things will start working properly.
I've tried all sorts of things, reducing it down, but can;t seem to figure it out. The only thing that changes this behavior is if I change the animation to slide instead of fade. But I definitely want fade. And I definitely want to figure out why this is happening.
It seems like it could be a CSS issue, but I can't find it.
Here is what I am working on:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/
EDIT:
I made a couple of super reduced test cases, with just basic HTML, the Flexslider CSS/JS, and jQuery being loaded, nothing else, and the bug persists.
With fade animation, has the bug:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/wp-content/themes/coppercity/test-fade.html
EDIT 2
I am an idiot. I changed the class name of the container from "flexslider" to "hero", but did not update the flexslider.css to reflect that. [sigh]
Thanks for looking.
user1910673 got it right!
the following CSS..
.slides li {display:none}
..fixed my fading issue!
I wish I could upvote but don't have 15 reputation.
I had this problem but it was not to do with my css. I found this article helpful:
http://processwire.com/talk/topic/2283-solving-the-annoying-flexslider-fade-delay/
It says to set "slideToStart" to your last slide. ie. If you have 7 slides then start it at 6. this fixed my problem.
It is not an ideal fix but it worked for my purposes.
EDIT:
Sorry, better fix was making sure that my slides had display:none
Then it doesn't matter what slide you start on.
so turns out it was my css.
I've found a rather interesting mishap here.
I have a negative margin on my navigation as I wanted it to sit specifically. All appears fine in FF, but in Safari my content is jumping up to where my nav is, as if my nav does not exist.
I tried playing around with the numbers, when I change it from -77px to -55 the content jumps where it's supposed to be (but obviously my nav does not).
Here's a link to my code via pastebin.
Any help is much appreciated!
Oh, the site is here
Thanks
You've got a few problems with the layout design of the site that are causing the problem, I think. It is having issues in Chrome as well.
First, your nav isn't contained in its own div, which doesn't really fit in with the design pattern you're following. Consider a redesign with the following:
div wrapper
div header
div nav
div content
div column1, etc
div footer
div wrapper (end)
This will give you much more control over the layout, and you'll make changes on the nav div instead of the ul. Your clearing divs aren't completely necessary as you're not floating any elements, but I think you're using them to create white space - either use margins or assign the nav element a height and your original issue should be resolved. I hope this helps.