I am working on this site and deiced to created a slider (using some source code I found form the internet) which can be seen here http://gpsfac.co.uk/
It seems to work fine in chrome, safari etc but in firefox it seems to hide all the links at the bottom and enlarge the images? Anyone know why this may be and a quick fix?...
Thank you
I found out the answer all I Need to do was state the width % at 100% in the style css...
Related
I have a Telerik radGrid that when a gridrow is clicked, it will expand and display an image that uses Atalasoft DotImage (version 9.0.3.45452) ImageViewer to display the image.
Everything worked with IE8. Any broswer IE9+, it seems to not show the image. The image appears in other areas of the application (and works), but it is not attached to any Telerik controls.
I have scouring the internet to see what was changed between IE8 & IE9, but I have not found anything that would help me out.
The image will show in the Telerik grid using IE8 & in developer tools, if I use quirks mode.
Could someone point me in the right direction between the two browsers and their rendering of these controls in a high-level sense?
It seems that it has to deal with iframes, parent doctypes, and IE9. I have found a reference
here
I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.
I'm pulling my hair out over this probably very simple problem..
I just built a website for an iphone repair company:
http://www.cellcity.co.nz/
When viewed on google chrome and safari the website shows up without any problems,
when viewed on internet explorer i just have the mobile optimised version showing while i get around to sorting out its problems.
but on firefox all my elements are pushed up one pixel. I have all the content within a table within divs, have a quick look at my source code or request some code to be shown. I don't understand what could be wrong, I am using the border-collapse css style, maybe that might be a contributing factor?
Thanks in advance,
Matt
Ok I figured out that for every css class and id, you can make a firefox independant one that is only seen by firefox. Just place #-moz-document url-prefix() {.....} around the second version of your css class and firefox will override the old version =D
hopefully this helps someone else!
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).
Created a website, looks pretty solid on the desktop. (http://foo.com) Used an .htaccess redirect to send those using mobile browsers to subpage (http://foo.com/m.html). Redirect is working like a charm.
My problem is that one image (and for that matter, the background color) doesn't display on the mobile page, on any mobile browser. I've tried reformatting it (.png, .jpg, .gif), resizing it (down to 55p x 44p). It is the only image on the page. I've tried using a css stylesheet specifically for the mobile subpage, I've tried not using a stylesheet at all and simply putting the image in the body. Nothing works. I've searched for an answer but all I can find is 'why doesn't my wallpaper display on my mobile phone', which doesn't help at all.
Anyway, if someone knows what I'm doing wrong, I'd really appreciate it. Thanks all!
I've got the same problem, I've done a very simple page, with a single image inside, surfing there with desktop was all right, while going there with a mobile makes the image invisible, it takes the place, but without display, like with "visibility:hidden";
after some tries, i've noticed that the image was saved in a CMYK color space, I've converted the image in RGB color space and then all goes right.
mobile browsers seeams to not manage the CMYK image versions...
Look at CSS part:
background-image:('background.gif')
Do You think all is OK here? Because I think it's not...
https://developer.mozilla.org/en/CSS/background-image