The div containing the slider on this site http://mhpkg.de is offset by 1px to the left in opera. Other browsers don't seem to have this issue and I can't figure out what is causing this. I had something like this on another site/ occasion too so this doesn't appear to be too rare. I couldn't find a solution to this though so I figured maybe someone did.
Please take a look and help me/ people with similar problem out.
Apparenlty this has something to do with the zoom on my opera browser, I checked it on different systems/ versions (browsershots) and it is fine there. If i zoom in and out on Opera it displays it fine/ offset by 1 px depending on the zoom degree.
Related
i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
I'm having some problems getting this to look good in IE, FireFox, Opera, Chrome and Safari.
Opera and Firefox are the same, but IE, Chrome and Safari has a bit different look.
Especially the input rounded corners in Chrome.
This is my code http://jsfiddle.net/VKuD6/2/
Can anyone point me into the right direction of getting "identical" cross browser look and feel?
Search boxes in webkit have some default styles you'll want to get rid of using this:
-webkit-appearance: textfield;
Should sort it, at least partly. You do loose the clear text cross button though. - Apparently not
Also, you should check this out, good information about the search input http://css-tricks.com/webkit-html5-search-inputs/
Hope that helps :)
Here is a code, which was supposed to display 6 columns equally distributed across the container's width:
http://jsfiddle.net/fstyh/
BUT:
IE10 (both pp2win7 and pp4win8) and Opera 11.60 clump such columns together in weird manner (like region flow), while IE9, Firefox12 and Chrome17 just stack them one after another.
Which browsers are correct ? IE10 and Opera, because they are newer ? Or Chrome and Firefox, because they have bigger market share together ?
Before you answer, check what happens in Opera, when you add some text to those columns. (it's transparent, but works just fine to show effect). IE10 does not react to it, in any way.
I was not able to find anything in the spec. Hopefully, anyone can help.
Oops, it turns out that both mozilla and webkit still need vendor prefixes for multicolumn properties and values.
http://jsfiddle.net/fstyh/1/
I've been searching for answers, but unfortunately still havn't found one the right one..
I'm creating buttons using images and the button itself looks good in ALL browsers..
The thing is though that the text is placed differently (vertically) depending on which browser you are viewing it from. I've tried applying both line-height, padding/margin, top/bottom and several other attributes, but without success..
Isn't there a way (with CSS) to place the text correctly in all browsers? (Opera, Firefox, Chrome, Safari)... Don't worry about Internet Explorer - I'll apply some speciel CSS for this!
I've put up an example here to play around with: http://jsfiddle.net/GydjP/1/
button::-moz-focus-inner {border:0;padding:0;margin:0;}
and adding Line-height to the buttons is apparently the best solution I can find for my buttons so far.. It doesnt work in very old versions of Firefox + Chrome though
I am pulling my hair out on this one.
We're just about done with the development of an overhaul to our site. As a last step, we're trying to wrap up all the glyphs and icons into a sprite. They're all transparent .png's so the sprite is too. It appears that if a background comes from a sptire, IE distorts it. If it comes from the original file, it does not. FF and Chrome are fine either way.
I am looking at the orignal image and the sprited version side-by-side with grids to see that the pixels are identical. I have counted the pixels in the sprite many times to ensure I'm using the right coordinates. My CSS looks like this:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
The 'XX' lets me toggle back and forth. With the single-file version, it looks perfect: . The sprite-version looks like this: . It looks like it is 'squished' both vertically and horizontally. This does not happen in FF or Chrome.
Any ideas?
EDIT I was able to strip out most of the noise and post an example here. I've added notes to the example to describe my problem.
Thank you so much for taking the time to look at this!
UPDATE We've since replaced these 'overlapped divider images' with CSS pseudo-classes that REALLY do overlap and the zooming issue seems to have gone away. Of course now we have new problems - IE8 gets the z-order wrong and IE7 doesn't understand psuedo-elements at all. But at least the markup is simpler and the zooming issue is gone.
It turns out my problem was caused by IE's 'zoom' feature. Without any zoom, everything looks great like the other browsers. Even 150% or 200% looks good. But 125%, where I had it, causes this distortion. It happens in IE7 and IE8.