I'm having browser compatibility issue in my UI. In Firefox I'm facing some UI breakage issues, In chrome i don't have any issues.So my team said to try some CSS properties with don't dependent on browser that could be a solution for this.So anyone may know about this?
<li align="center" ng-show="showLoadingIcon">
<img src="app-vrm/img/loader.gif"/>
</li>
This is what the code for that loading mask. If change align from center to right,left or justify .That is working fine in chrome but in Firefox the loading mask is loading always in left side. It should be displayed in the center of the screen
A good starting point is to make sure you're starting from the same point by creating a reset.css file. This file makes sure that for each browser e.g. the margin-top for a P-tag is always 5px. There are plenty of resources on the web
Furthermore, you should have a look at W3Schools table for browser compatibility here.
Last but not least, be aware that some CSS3 tags are not implemented at all yet because they are 'too modern'. Or your browser is too old.
And a good CSS-validator might help. In Google Chrome (or Iron Browser, or Chromium) you can enable the developer tools and look at the console for errors, or install an extension (Web Developer for Firefox together with Firebug). Or if your site is online validate it with W3 CSS validator
Good luck!
I have created a cross-browser centre alignment of image. Main useful thing is img having margin and display property. Please see working solution at this link:
URL: http://codepen.io/krunalv/pen/gborwo
.loadingImage-wrapper li img{
height: 50px;
width: 50px;
display: block;
margin: 0 auto;
}
I fixed this issue........ i changed the code instead of
align="center"
i added
style="text-align:center;"
So this property is working in Firefox as well.
I really want to thank the people who help me to find out the solution.I got many new things from you whenever you are giving some answers.
Related
I am working on a site that is close to going live and one of the issues I am running into is the CSS on IE 11. The CSS looks as it should on Chrome, FF, IE 8-10, however when running on IE 11 it appears as if some of the styles are not applied. I do not have a public link or I would share that. I know these are style definitions that are accepted by IE 11, because I tested them on w3schools.com
One basic example is I have is the following (fiddle)
<td class="aboutDNRHome" rowSpan="1" colSpan="1"> ... rest of code
.aboutDNRHome
{
background-color: #f9f9bc;
/*background-color:Red;*/
width: 295px;
padding:5px;
vertical-align: top;
text-align: left;
margin-right:5px;
margin-top:3px;
line-height: 1.2;
}
I have verified that the html is valid. While using the developer tools (F12) I cannot see the class when selecting the appropriate element. Normally I would say that I have a poor CSS selector, but in this case it is a class and there is little room for error.
I am working on an Orchard CMS version 1.7.0.0. I know there is a newer version, but the installation is actually on the clients machine and they are the ones that control upgrades etc.
Has anyone else run into style issues with IE11? If so, what were the steps you took to resolve them. If you have any suggestions of what else I can try to narrow down the issue, please feel free to give those too.
I GOT IT!!! I used Fiddler2 to clear the cache. I had been clearing the history over and over and I used to use Ctrl-D in the F12 developer tools to clear the browser cache with IE10, but I have not been able to find that with IE11. That was the issue though, stagnant files.
Note: Ctrl + F5 was not taking care of the cached files either, only the Fiddler2 clear cache was what worked.
I thought I had finished the markup for this website that I am creating for my mom’s dog walking business, but then I realized that my CSS is only partially applied to my site in Internet Explorer. It’s strange because the body background image in my CSS displays but my nav image and nav's anchor tags don’t show and the borders to my divs are missing in IE.
Everything works fine in Firefox.
Also the padding and margins are crazy in ie.
I’ve read from people that ie generally isnt too friendly towards margin-left margin-right padding-left and paddin-top- stuff like that. That it generally prefers for example padding: 20px; or margin: 30px;
But I don’t know if that was what I did wrong. I don’t see how that would make my borders and nav image disappear in ie. Very frustrating.
The url is www.grinningpup.com/dannytesting/grinningpup.com/index.html
I tried to write semantic markup. I hope the solution isn't due to a stupid mistake I made.
Welcome to SO!
I've taken a quick look at your site and I can see the issue is that you've used HTML 5 elements which aren't supported in older versions of IE.
Easiest fix is to add Modernizr which is a javascript library aimed at detecting browser support, and in most cases, polyfilling them (only in this case). There are numerous resources on the subject. My fvourite is this; http://diveinto.html5doctor.com/ but just google and check SO for more information.
I hope this helps you!
You are using HTML5, which IE8 and below don't interpret right.
You'll need to include html5shiv and add the following to your css:
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
HTML "nav" tag and "section" tag not support IE 8 and earlier versions. So, you only use "div" tag solve all problem.
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.
I'm new in this area and I wrote a div style which didn't work properly for firefox 4, opera 11.1 and for ie 8.0 but worked for chrome 11. The code which was a style for a div was the following only with a different order
#info_text
{
background:#fdf6cc;
width: 650px;
margin-left:1px;
padding-left: 30px;
padding-right: 263;
min-height: 90px;
}
After changing it this way it worked for all the browsers except for the Internet Explorer 8.0.
Can I do something to make it work or it's the problem of the browser?
Does it metter the order in this case?
The order doesn't matter in this case.
You are missing units for the padding-right property. Running your code through a validator will flag errors like this.
Welcome to world of web development! All browsers interpret CSS differently, particular old versions of IE (try the above in IE6 for some fun!)
To understand exactly what problems you're having we need to see a working web page with the above.
The order of the CSS doesn't particularly matter to be honest, though obviously later CSS overrides earlier CSS and this something which is used commonly in the industry.
try opening "developer options" under "tools" in ie, if there is a more specific class, it may be overwriting something, or if something is formatted poorly, IE may be excluding it all together. Another option is "firebug lite", firebug is a very useful tool for getting started with css, javascript, and page structure. Without a link to the page that you are having the problem on, it's very hard to determine the cause, I copied your css and tried it myself, but got the expected result in all browsers
I am unable to get the background picture to show in my pages. I am trying to do this in the master page using CSS.
I have a CSS which contains the following:
body {
background-image: url(../images/background.jpg) no-repeat;
background-attachment: fixed;
margin-top: 0px;
}
I know the CSS is being read because all other styles defined in it are working on the .aspx pages... except of course the background image, the background remains white. (This works perfectly fine in .php pages by the way.)
I have been searching online like crazy and all the answers I find, say the above CSS code is the answer... but it is not working!
I am using the following:
Microsoft Visual Studio 2008 Version 9.0.30729.1 SP
Microsoft .NET Framework Version 3.5 SP 1
Firefox Version 3.6.6
If anybody knows how to get this to work, PLEASE let me know!
The CSS background image technique is correct. But have you looked at things in a Http debugger (such as the net monitor in firebug or fiddler) and figured out if your relative pathing isn't screwing the proverbial pooch. Or, CSS paths and ASP.NET and MasterPages sometimes don't quite agree, you probably have an issue of requesting the image from the wrong url so it isn't showing up.
Thanks to Wyatt Barnett I was able to figure it out. I used firebug to edit the CSS file and discovered the problem.
My path was wrong, I changed it from ../images/background.jpg --> ./images/background.jpg
The attribute tag was wrong, I changed it from background-image --> background
I don't know why I did not think to do this with firebug to start with (it is after all why I have it) so thank you Wyatt for the proverbial slap upside the head - I needed it! :o)