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!
Related
First question in the community and excited to have found a place with so much knowledge!
My website, http://www.localcookingclasses.com, displays slightly differently on Firefox vs Chrome and IE. The gray background shows on Firefox, while Chrome and IE display the entire site in white.
What could trigger this? I think it might be a missing closed but I haven't found it.
Is there a particular file or line of code I can share with you, or can enough info be pulled from the URL I provided? I want to make sure I include enough information.
Attaching screenshot of Firefox which shows the gray background.
Firefox
Just opened them on Firefox and Chrome and they look exactly the same to me.
Maybe refresh the cache?
Also there are some css atributes that are specific of chrome and firefox, if you could share the background snipet of the css I could be able to help.
EDIT: Screenshots of what I see (requested by user)
Chrome-----Firefox
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;
For some reason, on this page, in Chrome 17, CSS3 transitions aren't working the first 3 links in the footer/nav: http://jacob.bearce.me/index2.htm. The links are exactly the same, no added classes, and I went through step by step to figure out what it was, it's changing the HREF property that breaks them. For some strange reason, services.htm works, but projects.htm does not. I have absolutely no idea why.
UPDATE: Tested in Firefox, Opera and Safari it seems to be only a Chrome issue. It makes no sense. It's not even a webkit issue (unless Chrome's got a newer version than Safari).
Sorry if this response is slightly late, however, I'm currently on Google Chrome 16.0.912.63 beta-m and I have the exact same problem as you do. In fact, on your website, out of the 4 links below, it is only the home link that doesn't seem to be working too well with CSS3 transitions (on my side).
On a website I'm currently working on, the transitions seems to only work on some links and not others. I can't really see any trend to understand what causes it. Strangely though, when I visit your website or mine through Incognito, everything works well. It doesn't work even with my extensions disabled.
It looks to be bug with Chrome. I've figured out that it's definitely an issue with :visited links, but can't fix it no matter what. In incognito mode you don't see the issue because Chrome isn't logging what links you've visited. From what I've seen, it looks like it's an issue in Chrome 16 or higher. Hopefully they'll fix this in the next release, but for now, we'll just have to ignore it.
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
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.