Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.
Related
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:
Here's what it's supposed to look like:
Now, I've looked through the dev tools on both Chrome and IE, and here's the results.
IE:
Chrome:
So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.
Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.
I have had similar problem.
Solution that worked for me was giving the button overflow: visible;
Working example (IE9+): http://jsfiddle.net/aBfF8/1/
The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.
You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.
Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)
I have been developing a website and I have had no problems at all with it. I am now testing it on different PC's and am having a problem where the rendering breaks in google chrome. The pc's all run the same versions of chrome which is version 21.0.1180.89. On some pc's the page renders perfectly and on others, the position: fixed property is completely ignored and me page header disappears when scrolling. On inspecting the element with the chomr developer tools it says the element is there but the element is not visible. It is not a problem with z-index since I set this really high and did not fix it.
Where do I even start to look for a reason for this problem? Is this a css issue or an issue with the browser?
Thanks in advance
Edit:
The solution was found. I had set opacity: 0.99 on the body element of the document in an attempt to fix a problem with fonts displaying incorrectly on Mac's. This should be a valid css property? However it seems that on some browsers this caused the page to reder incorrectly.
The solution was found. I had set opacity: 0.99 on the body element of the document in an attempt to fix a problem with fonts displaying incorrectly on Mac's. This should be a valid css property? However it seems that on some browsers this caused the page to reder incorrectly.
I have Nivo Slideshow running on a site. When I test in the dreaded IE7 it shows a dotted underline on the captions. I have tired to find the offender in Inspect Element but no luck so far. Here is the website:
http://clintongreen.com/clients/researchreview/
Please help if you can
Cheers
Its a known issue, I've also checked my site in IE7 and noticed the bug, but when I actually went to the official nivo-slider site Iv'e also seen those lines all across the image, I guess its not ment to work perfectly on IE7.
It happens when you use lower resolution in you windows.
The default Nivo style adds bottom-border:1px dotted #fff; to the caption a tags. My styling overwrote this in all browsers except IE7 and I couldn't find what was causing it through IE Dev tools, eventually I picked it up through Chrome and deleted that style attribute. Cheers
Firefox 3 and 4 renders this page nicely (I get a horizontally-scrollable view, instead of an overlap), but both Epiphany and Chromium don't. What's up with the inconsistency? Is this a bug in WebKit?
The scroll isn't showing up in IE 8 either.
Considering the area doesn't have an overflow setting my guess is that Firefox is defaulting to overflow:scroll while the others have defaulted to overflow:none.
You might try explicitly setting that in your style sheet.