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
Related
I am sure you have all heard this all before, but IE8 sucks, the Div's are not lining up correctly in my site:
http://www.relayconcepts.co.za/home/
The problem is i can't find out why it's doing that. This is a Joomla site that I have hijacked and inserted my own HTML/PHP in certain places and changed CSS to no extent.
The thing is that it works well in firefox, Chrome and even IE9 works all right.
So I've been working on a website, where I have the following CSS for the navigation bar:
.boxshadow div#top_nav li+li::before, .no-boxshadow div#top_nav li+li::before{
content:url('media/images/link.gif');
}
It's supposed to create link separators for the list items in the nav bar, by inserting a certain image before all links except the first one. The .boxshadow and .no-boxshadow classes are due to Modernizr.
The problem is, it's being overridden in IE. It appears to be crossed out when I open the Developer Tools, so I know it's being overridden, but I don't know why. In Chrome and Firefox, the property works, but only in IE I'm having this problem.
Any ideas as to why this is happening? I'd be happy to post more CSS if necessary. All help is appreciated.
Here's a link to the jsFiddle: http://jsfiddle.net/KJYe2/
Edit 2: Sorry guys, but it seems to work in IE through jsFiddle. However, it doesn't show locally on my computer, and I'm not sure why...I tried posting more relevant CSS that's used before the navigation bar, to see if any of those rules were causing the override, but that doesn't seem to be the case either.
I'm such an idiot. It turns out it works fine live, but locally it just doesn't render. I'm not sure why it does that as opposed to Chrome and Firefox (it renders fine locally on those browsers), but for IE, it only works live. Strangely enough though, it's still crossed out in the IE9 dev tools both offline and online. I apologize for the inconvenience I may have caused, and appreciate all who helped in the matter. Thanks!
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...
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.
The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content