The string "Fernando Salgado Alonso" is much longer in IE7 than in FF.
Why? What can I do to fix it?
That happens because different browsers have slightly different default css for displaying unstyled content.
You need to use a css reset and apply your own rules on top of that. That way you will be sure that it displays the same on all browsers.
Some well know resets are:
http://meyerweb.com/eric/tools/css/reset/
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/reset/
http://developer.yahoo.com/yui/3/cssreset/
Also have a look at: https://stackoverflow.com/questions/116754/best-css-reset
Related
I'm using a lot of **!important** in my CSS to override Twitter Bootstrap defaults. I wonder if it will work across all devices.
Does **!important** give me same results in all browsers?
From my personal experience !important supported by every browser that supports CSS. But you have to check This before use it.
It was part of the CSS spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
Here are the browser will support !important
IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
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.
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.
In IE8 Document mode IE8 I am using the wp-skeleton theme by simplethemes which uses a variation of superfish. All appears to work well across browsers except for IE8 which appears like this:
you'll need to recode some css for IE8,
besides I don think it's an important matter about IE8, Let the guys have an update of software ;)
IE8 doesn't like overflow:hidden, so you could try removing it. Another thread mentions is located in ie.css: #header_container #nav_container.
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.