I develop on Mac. I'm having trouble with my #slider div in IE 7/8.
Can you help me with the CSS? The #slider div (from what I can see on browsershots.org) fans out, rather than hiding the overflow.
(Old link removed)
This is a known IE7 bug that kept be busy quite some time a while back.
This starts happening when you introduce position: relative to one of the elements inside of the container. This is fixed by adding position: relative; to the container itself, in your case
#slider {
..
position: relative;
..
}
I started developing on a mac as well a year ago, It's a real pain when confronted with IE bugs. It helps if you setup a Remote Desktop Connection to a test PC if you have one and install IE Tester on it (mind though that IE Tester is not 100% the same thing so you should always do a final check on the real thing).
On a side note, Adobe has a really sexy browser screenshot test app at http://labs.adobe.com/technologies/browserlab/
It looks fine for me on IE8
Related
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.
My page has a display issue on pageload with Safari (display inline-block element has a width of 0, after one JS inline style its fine). I can fix the issue with this extra style for my span element:
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
I have to use at first the standard and after that my fix. On the current browser versions it looks good for FF, IE 9-11, Chrome and Safari (Desktop Mac).
My question is now: Is the order fine or can i get with some browsers a problem?
(Maybe browsers think: "Oh I have to make the inline element (span) to display:inline-block". And with the next line "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline".)
Hopefully you know what I mean? :)
The order is fine, however you will find that any browser which supports -webkit-inline-box will use this over inline-block. This may cause issues as the way the browser-prefixed version is implemented may not reflect how the non-browser-prefixed version is implemented.
For instance, Google Chrome supports -webkit-inline-box and will use this instead of inline-block. Off the top of my head webkit-inline-box is based on the old out-dated version of the Flexbox specification.
Perhaps a better solution would be to work out why Safari is giving your inline-block element a width of 0. This isn't behaviour I've witnessed myself, but Safari usually falls outside of the production browsers I test in.
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.
.idioma_es #logosFooter, .idioma_es #logosFooter li a {
background: url(../nImg/microsites/logos/logos_footer.png) no-repeat scroll left top transparent;
behavior: url(../../nJs/iepngfix.htc);
}
Result in Firefox:
Result in Internet Explorer 6 (Based on IE Tester for Windows):
the path of the .htc file is correct !
Any idea what i'm missing?
Don't test this with IETester. It's not completely reliable.
You should use a virtual machine, but you can quickly test a page with http://ipinfo.info/netrenderer/.
After Googling a little, I might have been a little unfair to IETester (though I still don't trust it).
http://www.my-debugbar.com/wiki/IETester/HomePage
Known problems and limitations :
CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
You can try PIE - http://css3pie.com, that is working in IE6 too.
IE6 does not support the alpha channel for background images apart from in specific circumstances. There is no general fix, as there is for foreground images.
Look here: http://24ways.org/2007/supersleight-transparent-png-in-ie6
Check the first bit of text under 'The pitfalls' heading
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