- This topic is empty.
-
AuthorPosts
-
July 14, 2011 at 6:02 am #33501spencerwMember
When I test my files in Chrome and Safari, they work great, but when I test them in Firefox and Opera, it’s as if it doesn’t recognize my CSS file whatsoever. It makes it look like a plain HTML file would without any CSS. Any suggestions? I’m very new to web design so I’m sure it’s some dumb mistake that’s messing it all up but I would love your help.
July 14, 2011 at 6:32 am #83162rahulMember10-common-css-browser-compatibility
When you write a CSS for your project you never know what kind of bug or issue you will face at time of browser compatibility.
Internet Explorer (IE) and Mozilla Firefox are the standard browsers which are globally considerable at time of browser compatiblity. Other browsers such as Chrome, Safari and Opera have a significant presence as well.
In today’s scenario browser bugs with CSS can be an incredible source of frustration for Web designers and developers. In this post I’m sharing some most common CSS browser compatibility Issues/Bugs. Here’s the following list:
1. How To Attack An Internet Explorer (Win) Display Bug
Great article, tutorial on how to figure out IE bugs, including making sure it isn’t a bug first, validating. Covers {position: relative;}, the peekaboo bug, dimensional bug fixing, the expanding box trick, the Holly hack, source code, and more. Easy to understand.
2. The IE/Win Disappearing List-Background Bug
It’s another IE bug caused by placing a list with a background set within a floated
that has been relatively positioned. Problem and solutions discussed here.3.IE6 Duplicate Characters Bug
This IE6 bug causes duplicate characters to appear, which is caused by HTML comments. Shouldn’t happen, of course, but that’s IE6 for ya! See this article/tutorial that explains the bug, how to fix it, and how to avoid it.
4. How to resolve browser compatibility issues while working with JavaScript, AJAX and XML
After going through this article, you will get an idea on resolving browser compatibility issues while working on JavaScript, AJAX and XML. When we run an application which you develop using AJAX and XML it behaves differently in different browsers like mostly in IE (Internet Explorer) and Mozilla Firefox.
5. Double-Margin Bug, Float-Width Bug, Pixel Gap Bug
This article covers CSS bugs such as Double-Margin Bug, Float-Width Bug and Pixel Gap Bug. A very clear and clean solution to reslove these issues.
6. CSS Min-Height Bug
This article describes how you can handle CSS Min-Height in different browsers. CSS: min-height with !important is tricky thing you can use.
7. IE White-Space Bug
There are cases in which IE treats the white space “n” between and the next as a literal linefeed. That creates extra space between list items.
8. Cross Browser Compatible CSS Opacity
Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet.
You can also look detail article by A List apart
9. Clearing floated images in body text
A problem that I’ve been running into more often in these days of CSS based layouts than I did back in the old table days is the “image-sticking-out-of-the-bottom-of-the-content-area” problem that often occurs when an image is floated left or right, and there isn’t enough text to exceed the height of the image. A problem that sometimes had no easy fix.
10. Firefox CSS Magic
Consider this post an evolving receptacle for Firefox-specific CSS tricks. This article covers: Change the color of highlighted text, Change the opacity of an element, Control item selection of an element, Round the corners of elements, Add an outline to an element, Add a multi-colored, multi-layered border to an element etc.
July 14, 2011 at 7:27 am #83151Paulie_DMemberAlthough ‘Rahul’ put a lot of work into his post…he hasn’t really answered the question.
Frankly I’m not sure of the answer but have you tried deleting the 2nd “doctype” declaration? I don’t think you need it.
July 14, 2011 at 7:44 am #83152wolfcry911Participanthave you validated? two doctypes, missing closing element tags, no shiv for html5…
do you have a link so that we could check it?
July 14, 2011 at 3:33 pm #83192spencerwMemberhow do you validate?
July 14, 2011 at 3:56 pm #83196furrball1383Memberthere are some websites that validate, i personally use a firefox plugin called web developer that has a number of functions including validation of css, html and js
July 14, 2011 at 4:10 pm #83197spencerwMemberfigured it out. thanks for your help everyone.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.