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

IE7 Opacity Filter with JQuery methods

So I have an undisplayed div that has an opacity applied to it which is triggered by a Jquery method to be fadeIn with a certain event. This doesn’t work with IE7.

Code:

<script type="text/javascript">
$(function(){
     $('#fade').fadeIn();                   // does NOT work on IE7 with filter Opacity
});
</script>
<div id="fade" style="position:absolute; z-index:20; top:0; left:0; background-color:#000; opacity:0.7; filter:alpha(opacity=70); zoom:1;"></div> 

For this reason, fadeIn() is not the solution here. Here’s the right code:

  $('#fade').fadeTo("slow", 0.7);

IE7 Absolute Positioning

So I think there should be a dedicated blog for all the IE7 ‘misconduct’. I work with a company that puts emphasis on cross-browser compatibility starting with IE7.

Now lots of issues are there with IE7. One of them is the absolute positioned div within a relative position div. The child div often flies outside of its container.

Reason: (at least as I assume:) is that it is not knowing where to be placed even though absolutely positioned within the container.

Solution: child div which is absolutely positioned has to have both positioning properties of (left or right) and (top or bottom)

Example:

   <div style="position:relative;border:1px solid #000;">
       <div style="position:absolute;bottom:10px;"> submit button </div>
   </div>

Image

As you can see the submit button is flying outside of the container itself

Example resolved: 

    <div> style="position:relative;border:1px solid #000;">
        <div style="position:absolute;bottom:10px;right:10px;> submit button </div>
    </div>

Image