IE bugs - background color and positioning.

Question

I'm just starting to build a website, and am just fleshing out the css.

Two problems:

1. I'm using rgba to get a transparent background, and using a transparent png to emulate this in older browsers. I'm using a cascade like this:

   rule {
       background: url(/media/img/white_0.9_pixel.png);
       background: rgba(255, 255, 255, 0.9);
   }
   

In IE these backgrounds don't cover the whole of the sections they are applied to... Any ideas why?

1. The drop down menu is incorrectly placed in IE. I'm positioning it absolutely, but adding a margin to shove it into the right place in Webkit - guessing that's the wrong way to align a drop down, and it's not working across browsers. Any suggestions there?

Thanks a lot - just writing questions on here helps me to think!

A link to the site : http://bit.ly/11GGCx

Answer 1

Which IE versions exhibit the problems?

1. As with many IE bugs, try giving layout to the elements with improperly rendered backgrounds.

2. When you don't specify the "left" property of an absolutely positioned element, IE rarely generates the value you want. According to the CSS 2.1 spec, "left" should be set to the static position, but the browser can guess this position so it's best to be explicit. The standard method is to give the menu items relative positioning to create a containing block for each submenu and set "top" and "left" for the submenus.

   .nav li {
       position: relative;
       /* note: don't set a box offset (e.g. "left") here */
   }
   .nav ul {
       position: absolute;
       top: 1em;
       left: 0;
   }
   

Answer 2

Did you specify background-repeat?

Answer 3

Have you tried with css opacity concept?

Try the below code.

rule {
background: #fff;
opacity: .5; 
-moz-opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* for IE8 *//* Comes First to apply optacity in all ie versions*/
filter: alpha(opacity=50); /* for IE5-7 *//* Comes second to apply opacity in all ie versions*/
}

Note: Don't change the order of above lines. Also i recommend not to use rgba background.

Try this. Hope this helps