Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Browser Compatibility Issues with CSS

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33501
    spencerw
    Member

    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.

    #83162
    rahul
    Member

    10-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.

    #83151
    Paulie_D
    Member

    Although ‘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.

    #83152
    wolfcry911
    Participant

    have you validated? two doctypes, missing closing element tags, no shiv for html5…

    do you have a link so that we could check it?

    #83192
    spencerw
    Member

    how do you validate?

    #83196
    furrball1383
    Member

    there 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

    #83197
    spencerw
    Member

    figured it out. thanks for your help everyone.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Other’ is closed to new topics and replies.