There's this odd IE issue that has been twisting my mind. It works correct in other browsers (Chrome / Firefox).
For those that want to dive directly in the code, here's a Fiddle. Important parts:
HTML:
MyButton
CSS:
.btn {
display:block; width:135px; height:58px; text-indent: -9999px;
background-image:url("http://i47.tinypic.com/e7f4w6.png");
}
.btn:hover { background-position:bottom; }
In the Fiddle I've added an arrow to display the correct "center" of the image. As you can see, this is just a simple image sprite for navigation. The height of the image is double the height of the actual button, so we can apply the background-position:bottom .
But for some reason, when hovering, IE doesn't display the image correctly. Somehow the arrow (black line) and the center line (red line in the hover state) don't align anymore:
Normal state:
Hover state:
Because the line "jumps", the text also jumps (hardly noticeable in my example, but on my project you see it pretty good). Tested & occurs with IE9 and below on Win7.
I hope you might have a solution for this little brain teaser!
The comments from jQuerybeast, Miguel-F & Billy Moat above pushed me to another direction (thanks folks!), and I tried to open my Fiddle on another machine. Same browser, same OS & it was working fine.
After some further investigation, I found out it was my screen resolution and/or video display and/or taskbar that caused the strange effect. This would mean my code is correct, but somehow IE draws some pixels wrong on the screen (where other browsers do this correct). But this might be a whole new question.
Once again, thanks for the help!
Related
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;
}
Slightly baffled by this one - I'm working on a tiny static site with a large background image, which is rendering with a 1px black top border in Firefox. There's no border in the image and it doesn't render in any other browser. I haven't managed to find any references to this happening with a background image anywhere and am not quite sure how to fix it!
This seems to be fixed in the latest build of Firefox (not sure whether to post this as an answer to my own question or as part of the question?)
You should make sure you have resets for all css, like normalize.css. This way all browsers act the same.
img { border:0; }
In all other browsers, including IE10, this CSS removes the outline when clicking on a mapped area on an image anchor:
area {
outline: none;
}
But lo and behold, not in IE11, at least not the latest version I can get for Win7. A quick demo page: (demo removed). Click on a thumbnail; on the full-sized images, the right 60% is a link to the next image, the left 40% to the previous image.
I've tried all manner of CSS variations, including:
outline: none !important;
Applying it to every CSS class and ID I can think of seems to make no difference, including *, img, map, area, .gr-slideimage, #gr-thisMap, and so on. The only thing I've found so far that works is the old:
hidefocus='true'
on the img tag itself, but that doesn't validate, of course.
Can anyone crack this with CSS?
IE11/Win7 seems to ignore border settings set to 'none' in some circumstances. Had this issue with CSS styled buttons this week. I had to make the border 'solid' and change the color to match. Sure there's a better way - surely MisterNeutron and I aren't the only ones to notice this bug?
It appears IE11 needs outline-style: none; in order to work properly. You can also refer to: http://msdn.microsoft.com/en-us/library/ie/cc304065(v=vs.85).aspx for any other possible IE related issue. Hope this helps.
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
I'm having a cross-browser compatibility issue with Chrome vs FF.
Here is the web inspected from Chrome, you'll see that the box for the DIV #content is overlapping the box for the H3.
In FF, the #content DIV does not overlap:
The issue is the difference in overlap is causing the background behind the Doctors' heads (the light blue canvas texture) which is relatively positioned DIV to be off. In Chrome is positioned well, in FF the green "view all button" is beyond the background.
Link to the site: http://terminalcitymarketing.com/drafts/highgate/
It looks to me as if they are both in the same place, just chrome is showing you the region differently in the inspector to FF. I don't think its an issue at all.
I have a feeling that if you fix some of your Validation Errors, the problem might fix itself. Of the ones listed, the immediate red-flags that I noticed were that you have a bunch of these errors:
Error: Duplicate ID
Check #wrapper, #mainBox, etc.
on line 72 of the css, i took out the
p{
margin-bottom:12px;
}
and it fixed the positioning of the green view all button. You will then have to reapply the margins more specifically to the elements you want them on