Red Web Turtle

There are different reasons for negative margins not being translated properly in Chrome and Safari. This is a particular scenario that involves min-height. I had a div whose negative margin-top is not working in Chrome and Safari. Worked in Firefox, Opera and IE 9 but not working in Chrome and Safari. This is what I had: <div id="top-div"> <div class="container"> <img src="image-link" /> </div> </div> <div id="bottom-div"> <div class="container"> <p>text text text</p> </div> </div> The CSS for the above was like this: #top-div .container { min-height:250px; } #bottom-div { margin-top:-50px; } Now the fix. All I had to do was add "height:100%" in "#top-div .container", like this: #top-div .container { min-height:250px; height:100%; /* adding this does the trick for Chrome and Safari */ } Giving a fixed required h...

If you want to get opacity to work on all IE browsers, use the following IE filters in the order: .opaque { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // for IE8/9 filter: alpha(opacity=50); // for IE5-7 opacity: .5; // for all other browsers } Note: opacity gets inherited by child elements. So it's better to use background-color:rgba(r,g,b,alpha) . For IE browsers, use gradient filter with #argb .

background-color: rgba(r,g,b,alpha) is not supported by IE browsers up to IE9. But there is a workaround- by converting rgba() into #argb and using gradient filter. More information on rgba() to #argb conversion and a simple conversion utility can be found here: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/. Once rgba() is converted to #argb, you can then use the gradient opacity filter like this: background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff); zoom: 1;

This is self explanatory. I have only used this for CSS hacks. This may also work for HTML tags. See the examples below: <!--[if IE]> Conditional comment for IE <style type="text/css"> .ie { padding:5px; } </style> <![endif]--> <!--[if IE 6]> <p> Conditional comment for IE 6 </p> <![endif]--> <!--[if IE 7]> Conditional comment for IE 7 <![endif]--> <!--[if IE 8]> Conditional comment for IE 8 <![endif]--> <!--[if IE 9]> Conditional comment for IE 9 <![endif]--> <!--[if gte IE 8]> Conditional comment for IE 8 or higher <![endif]--> <!--[if lt IE 9]> Conditional comment for IE lower than 9 <![endif]--> <!--[if lte IE 7]> Conditional comment for IE lower or equal to 7 <![endif]--> <!--[if gt IE 6]> Conditional comment for IE greater than 6 <![endif]--> <!--[if !IE]> --> Conditional comment NOT for IE <![endif]-->

.myfloat { background-image:url(image.jpg); background-repeat:no-repeat; background-position:top; width:522px; height:249px; position:relative; left:-17px; left /*\**/: -18px\9; /* IE8 */ ^left:-17px; /* IE6/7 */ }

The relatively positioned element like this adds a space at the bottom of the element: #bottom { z-index: -1; position: relative; top: -100px; } The above CSS adds a 100px empty space below the #bottom element. The easy way to get rid of that empty space is to replace top with margin-top, like this: #bottom { z-index: -1; position: relative; margin-top: -100px; }

As of this writing, all new browsers (especially IEs) still do not support transparent background colour. In IE, I have noticed that they completely omit the background colour. This is the sequence I use so that the unsupported browsers still display a plain background colour and does not break the layout. background-color:#f2e5da; /* IE8 */ background-color:rgba(242, 229, 218, 0.9); /* FF, Opera, Chrome, Safari */ ^background-color:#f2e5da; /* IE6/IE7 hack */ _background-color:#f2e5da; /* IE5/IE6 hack */