I have a search bar plugin (Wordpress) which I have modified by CSS to suit my design. The thing is that it gets displayed ok in my latest version of Chrome, but it doesn't in other versions of it or Internet Explorer.
Here is how it should be everywhere: http://i.imgur.com/eTpHgK2.png
Here is how it is displayed in iExplorer and some other cases: http://i.imgur.com/1WKwYWc.png
The URL is: impresionados.net
The CSS: http://pastebin.com/bjpLS3DM
After having a look it seems like the custom styles are being applied in the first situation, but not on the second one. I have looked for missing semi-colons or closing curly braces, but I haven't seen anyone missmatching.
Where could the problem be or which tools could help me identify the problem? Thanks!
You wrapped almost all your code in media-queries, that can only be interpreted by some browsers. You might want to think about implementing http://modernizr.com/ to create fallbacks for that scenario.
Have a look at http://caniuse.com/#search=media to check to what extend you can use certain CSS selectors.
Related
I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.
The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.
So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.
Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the #support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.
That is, the properties inside the brackets of a #support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.
Update:
I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:
http://browserhacks.com/
This article offers a briefing on how to use it:
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Update:
For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.
https://www.quirksmode.org/css/condcom.html
Update:
The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.
This explains the principle and some applications nicely:
Is there any equivalent to IE conditional comment for chrome and safari?
This, if rather old, is still a very useful such application:
http://rafael.adm.br/css_browser_selector/
And that's it! The ability to ensure browser compatibility with most any browser!
I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.
When using IE8 to view IE7 through the developer tool's browser mode feature, I am having an odd recurring problem with CSS. When I make changes to an external stylesheet and then reference that class in the HTML, it's like IE7 won't recognize it at all. If, however, I put that same styling inline, IE7 will obey it. Has anyone heard of this before? Here's a simple example to help illustrate what I'm saying:
External stylesheet:
.bold {
font-weight:bold;
}
Call in HTML:
<p class="bold">My paragraph here</p>
No changes will be effective in IE7, although all other browsers are fine.
If however, I do this:
<p style="font-weight:bold;">My paragraph here</p>
IE7 seems happy. What's the difference? Do I really have to make CSS changes this way, or is there another workaround?
I'm baffled as to what the issue could be. I don't know if the developer tool's browser mode has a quirk and doesn't quite work as a real-life version of IE7 would, or if this is something completely different. I am using IE8 (I can't upgrade to IE9 at this government computer), but I've heard the problem persists with my changes in IE9's browser mode of IE7 too.
We're using ColdFusion to generate the HTML, using an HTML5 doctype (), and I've added a timestamp parameter to the 2 external stylesheet references so the browser is forced to grab a new copy every time.
Any help with this mystery would be hugely appreciated - thank you!
======
For #Stano or anyone else who is interested in recreating the exact problem, here is a stripped down version of it: https://docs.google.com/open?id=0B02DZPpIlMwGSk1VZHRDUHNCTkU (Can click File > Download to get the zip). Notice in IE7, "Photographer" is fine because it has inline styling, but the others aren't picking up anything.
With regards to your comments, you're right in saying that it could be a caching issue, but it could also be an issue with that stylesheet (though it doesn't look like that's the case), another stylesheet, or invalid HTML.
One of the things that I want to correct you on, because I think it may influence your understanding of how CSS and HTML interact, is that class attributes in HTML elements do not call CSS. Rather, CSS rules tell the browser agent how to render things with certain attributes. This is why we are able to use the elements ID, name, groupname, class, and other values to identify which elements to apply which class to.
I mention this because if you have invalid HTML (a missing end tag, a missing arrow, etc.) it can do all sorts of weird things. A few days ago it helped me solve an issue where a misplaced tag was actually causing a script of mine to loop on one of my pages.
Take a quick second and validate your HTML using the W3C Markup Validator.
I'm dealing with crossbrowser issues... So I׳m looking for the best and clean CSS
One of the most important issues is the "IF" statements for each browser
Take a look at this page:
http://www.conditional-css.com/usage
It contains every information you'll need.
CSS, in and of itself, does not have "if statements".
Internet Explorer browsers do have conditional comments which provide a simple way to deliver code (HTML, CSS or JavaScript) to different versions of IE.
Other browsers don't really have anything like that, though there are browser vendor specific declarations like -moz-border-radius and -webkit-border-radius.
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)