Why are certain css elements different in chrome vs safari, for instance?

  • As an example, a page on my website contains a complete list of my site’s tags. I have designed it to have 3 columns. However, when I open the same page in my safari browser, it only shows one column. There are a lot of seemingly random css differences like this between these two browsers (I haven’t even started investigating with other browsers yet). Can someone help me understand why this happens? Is there an efficient way to prevent this from happening? Sucks having to go through every detail on every browser to make sure the design I created is applying properly, and subsequently having to fix it if it’s not (I’m not even sure at this point how to fix the column issue yet). There has to be a better way to manage this type of thing?

Viewing 1 replies (of 1 total)

  • @kosmicbird

    Welcome to the most frustrating part of webdesign – Cross-browser support. Well, at least second most (pleasing Google tops that list by far!)

    The first thing you need to do is make sure the problem is not caused by some silly thing like browser cache or things of that nature.

    IF the problem persists then you’re most likely using CSS in a way that’s not supported by all browsers.

    The thing about browsers is that they are all built differently. Each browser has it’s own support range. Further more, older versions of the same browser may not support the same design elements.

    If you’re not interested in the long version of why this is so and you just want a way to fix it and spend your time on creating content instead, consider using or “borrowing” from “standardized” CSS projects like Bootstrap or W3C Core Styles or any other projects along those lines.

    If you’re interested in seeing whether a design element is supported by all browsers you can use services like Can I Use

Viewing 1 replies (of 1 total)
  • The topic ‘Why are certain css elements different in chrome vs safari, for instance?’ is closed to new replies.