I have got a strange issue with my calendar on IE9 and IE10. The issue is related to z-index. Here is the url of the site. When you see the piano calendar in Ie9 and IE 10, on the first attempt it shows fine. But when you scroll up and down the borders of the dates disappears. If I remove the z-index then it shows fine but then I am not able to see the event dates on the calendar. I would be really grateful to you all if you help me in fixing this issue. I have been trying very hard to get it fixed.
To make it more clear, I am attaching 2 screenshots, the right one and the distorted one after mouse scroll in IE9 and IE10.
Try not to use z-index: -1;
header .header-calendar-block ul.event-calendar li.day span.day-bg - change z-index: 1;
header .header-calendar-block ul.event-calendar li.day .row-calendar-event-day, header .header-calendar-block ul.event-calendar li.day .day-has-event - add position: relative; z-index: 2;
header .header-calendar-block ul.event-calendar li.day span.day-off-bg - add z-index: 2;
maybe this helps
Related
I have an issue which I've tried to resolve for several hours now.
There is a fixed element on my site for the menu, sticks to the top of the webpage with no margin or spacing above it.
Works great on firefox, chrome, but on Safari about half of the menu is cut off from the top of the page.
Website: uprighthealth.com
Chrome:
chrome - working
Safari:
safari - broken
Currently I have the issue patched with a browser specific fix but I know that's not solving the real issue. To see whats happening just disable the 2 browser specific styles under id="nav-container" and id="header" in safari
Any help would be GREATLY appreciated!
add top/left positions to fixed element:
div#nav-container {
position: fixed;
top: 0;
left: 0;
}
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
I have a problem with this site: www.manniche.com.
In the slider, when you hover over it, some arrows appears so you can skip to the next slide. In Safari on OS X Yosemite, the arrows appears on top of the fixed menu, if you have scrolled down a bit, and this doesn't look great. It works fine in Chrome and Firefox.
The arrows have a z-index of 100, while the header have a z-index of 200.
Is this a general Safari issue, or can I somehow overrule it, so the arrows does not apper on top of the menu, but still on top of the slider?
I am using the Revolution Slider Plugin and Wordpress, for the site.
I had the same issue and had to add the styling in manually. My arrows were 80px high so it was:
#slider-wrapper { position: relative; }
.tp-rightarrow,
.tp-leftarrow {
top: 50% !important;
margin-top: -40px !important;
}
That did the trick nicely.
You should update to the latest version of the slider. z-index and also transform z issues are solved in the current version. Just rechecked and in 4.6.4 there are no issues like that any more.
Also it is a good idea to contact ThemePunch by following the link http://themepunch.com/support-center where you get a direct answer within a day !
So I have a video playing in the background of a splash page, it is running on a loop with no available controls and I have text and an image sitting on top of it. I set it up as a with z-index: -100.
This works perfectly in Safari and Firefox, but in Chrome and Opera when the page loads everything on top of the video disappears. As soon as I resize the window everything re-appears, but when I refresh it has the same problem.
I'm not really sure what to try at this point or if this is a common problem. Any help would be great, we're trying to launch the site tomorrow.
Edit: Here's a link to the site. I was hoping this was a common enough problem that there would be a well known fix. http://jessemacdesign.com/upload/splash.html
For me, it's working in Chrome and Opera no problem (so check you don't need an update!). However, I wouldn't recommend using negative z-index as there's not really any point in doing so. Try this for your z-index and see if it works:
video#bgvid {
z-index: 1;
}
#bgimg {
z-index: 1;
}
I would also remove the z-index from #main as I don't feel it's needed.
Failing all of the above, try structuring your page differently so your video is in it's own div. I can't recreate your issue myself though, it's working in Chrome and Opera for me.
Original: Any chance of a link? It would be hard for me to help you without viewing the code directly!
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.