CSS – Safari ignoring width property

This has been occurring lately, and I couldn’t find much written about it, took me a couple of days googling it and trying to find what would be the reason that Safari would ignore our width property. After discovering that the width property is completely messed up on Safari browser only on Mac computers  as Safari on Windows didn’t have the same. I found that the solution for that is just to add a max-width property along with the width property. This has fixed it for the most part. No much reasoning I found after that, but seemed to me that width property has be associated with a max-width property as well in order to have the layout looking right.


div {width: 155px; max-width: 155px;}

 

If anyone has different suggestions or a reasoning behind this, surely share.

Advertisements

Browser Compatibility Basics – Part I

With all the browsers we have today and the ones which are emerging as I am writing this post, it seems to me that the job of UI developers could be counted more than “it’s just HTML” cause it seriously can turn into nightmare at times.

Understanding the browser engines are as important when it comes to HTML/XHMTL as well as CSS and its IE hacksand the different box model which IE renders from all other browsers.

This being said, however one would still have to add some exceptions especially with those large websites where it is irrational to add IE CSS hack for every class property which is being added.

For this reason, well renowned large websites still resort to creating IE CSS files, or within the same CSS file add a different class for the body which will make all the elements inheriting from it behave similarly.

Here’s the way it’s being added:

<!–[if lte IE 6]><body class="news ie"><![endif]–>
<!–[if IE 7]><body class="news ie7″><![endif]–>
<!–[if IE 8]><body class="news ie8″><![endif]–>
<!–[if !IE]>–><body class="news"><!–<![endif]–>

Albeit, one should know that most of the IE browser issues could be solved by using a reset CSS (CSS Tools: Reset CSS and CSS Tip #1: Resetting Your Styles with CSS Reset) before starting including other CSS files. The reset is advised to be included in a separate CSS file and a good read on that would be here: Killer Collection of CSS Resets. Though some would disagree with that making mention that default browser CSS actually make sense and was made for a purpose and rather designers should use well crafted CSSs to address different browser issues. Here a good read for such an argument: Should You Reset Your CSS?

Browser issues are many anyways and they are the main limitation for our restraint at least where I work for going on HTML5. There are countless of articles on this..