The css top or margin-top values in chrome is so different with firefox and opera,what should I do?
For example in chrome when I put (top:0px;) my menu is in its right place,but in firefox I have to put (top:-80px;).
What should I do?please help;Thanks in advance.
and also firebug doesn't have any errors.
Sorry I couldn't post a jsfiddle link because the site contains lots of pictures and I reaaly wanted to post pictures so that you can understand what I mean better,I tried but I needed 10 reputation but I have only 8.
You need to reset all the styling that a browser applies, then it will only apply your styling, instead of adding it's own aswell. To do this include a redet style sheet such as Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Related
I have a problem with content from CSS on IE11.
.icon-ok:before{content:"\f113"}
IE11 is computing this to .icon-ok::before{content: normal}
I can see that there is .icon-ok::before{content: "\f113"} but it is crossed.
So I didn't get the right icons there. - Ofc it is working on all other browsers.
I thought that's because of the ::before pseudo-class, but it is computed by IE, in the source css file it is written as :before.
Can somebody tell me whats wrong there?
Edit:
I figured out that the IE is changing the icon-font id's.
When I use "\f118" in IE it is working properly there.
How can it be?
This can happen because different browsers needs different formats of the font.
So this isn't basically a CSS problem rather a problem which format of the font is used.
I'm debugging a style problem in Internet Explorer 9.
It look's like ie9 doesn't apply all style rules defined in my css file. As I look in the network tab of Developer Tools, I see for example the '.mobileMenu' class present.
But the style is not applied to the element, if I use 'Inspect element', the browser simply doesn't know about any related style rules. A large portion of the css file (but not all of it) is simply ignored by ie9.
It works in Chrome, Firefox and IE 10. There are a couple of CSS validation errors, but none that look really troubling.
My guess, which is a guess, is that perhaps some stylesheet property (CSS3?) is causing ie9 to stop rendering and skip the rest of the file. Is that possible?
Anyone any experience?
Thanks !
In the end, it had nothing to do with CSS3.
Ie9 did stop rendering, not because of anything in the css file itself, but because the style sheet was to large..
According to Microsoft:
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
We split the Style Sheet into two seperate files and the problem was resolved.
Some CSS3 properties are not accepted by IE9. See this page for which browsers support which properties.
If the CSS3 properties are not support by IE9, you can try using a plugin like:CSS3PIE
I am using conditional comments to apply different style-sheets for IE. This seems to work fine with IE7, but no matter what I try, I cannot get IE8 to load more than one stylesheet at a time. Both stylesheets appear as options in the Page -> Style menu and I can switch between them but IE8 will NOT apply both at the same time.
Example: http://www.davidapfel.com/booknow.html. I have applied a pink background in IE for testing purposes. IE7 displays the page as I intend it, but IE8 completely ignores the iefix.css and iefix2.css stylesheets. (I tried removing the conditional comments but that made no difference).
Thanks in advance for any clues
Edit: Just found that the same problem exists with IE9 - it also ignores the extra stylesheets.
I am working on a small website navigation issue and have the content working well in chrome, firefox and safari - but of course, IE fails to style the navigation menu at all.
I've created an unordered list and hacked styles onto it to make the menu horizontal.
Here is a direct link to the issue: (link removed).
The unordered list appears as exactly that, a bulleted unordered vertical html list in IE rather than the nice looking navigation menu in chrome.
Any advice?
In addition to the nav issue (which prevents all styling in this case on older versions of IE), there appear to be other problems as well.
The HTML code uses media attributes that are not recognized by old versions of IE, which means that they apply none of the CSS files. The quick fix is to remove the media attribute from the link element that refers to Large.css. A better fix is to collect most of the CSS rules into a file that you refer to with a link element with media=screen (or no media attribute), so that the media width dependent CSS files contain only those settings that you want to be different for different widths.
The IE 9 console contains CSS3114 error messages that say that #font-face did not pass the usage rights checks for OpenType embedding.
Medium.css and Small.css contain float: center which is incorrect (center is not an accepted value for float). Use http://jigsaw.w3.org/css-validator/ to check your CSS code.
You are using <nav> which is a HTML5 element. Old IE version (8 and lower) don't recognise them and don't style them.
To fix this you need to use HTML5shiv. Follow the instructions on that page to get it work.
In short, HTML5shiv creates every HTML element with document.createElement if you do that IE recognise them. To get the complete story: Paul Irish: The history of the HTML5 shiv
Replace the nav tags by div tags. It seems that no change to the CSS code is needed here, since you refer to the element using #nav, which works fine if you change <nav id="nav"> to <div id="nav"> (and </nav> to </div> of course).
I updated some of my CSS styles to use normalize.css recently but discovered an apparent inconsistency - it seems that in IE9 it won't let me set margins 0 around a checkbox element. But I couldn't find any specific mention of the problem. Here's an example of my test. And here's a screenshot of what it looks like in Firefox, Chrome and IE9
The reset styles are copy pasted from latest version of html5 boilerplate, which itself uses normalize.css by Nicolas Gallagher.
As I understood normalize.css, the idea is to keep some browser defaults but create a consistent layout for the components. However, from my quick testing, it looks like in fact there should not be a margin:0 around (checkbox/radio) inputs in order to create consistent layout, like so.
Having said that, smarter people than me worked on both normalize.css and html5 boilerplate, so either I'm missing something, or misunderstanding something.
IE9 adds padding. I guess that reset script doesn't take that into account. Add padding: 0 and you'll be set.
for my project I once rendered IE9 as IE8 by rendering it with meta tag of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
so the same css worked for both