0

I am trying to do is make a clear div box to work cross-browser (Mozilla, Chrome, Opera, IE 9+, Safari) + IE 6, 7, and 8 like that pictured below:

http://s29.postimg.org/8hp8m56gm/5_21_2014_12_06_38_AM.jpg

I got it to work in all the other browsers except IE 6, 7, and 8.

To approach this, I utilized @potench's response found here: How does one target IE7 and IE8 with valid CSS?. This was extremely helpful, however I cannot get it to work with IE 6, 7, 8 because @potench's advice only describes how to use it with selectors (which makes sense it most cases). However, my case is different. My logic tells me that since I am trying to create a clear div box for IE 6, 7, and 8, I need to do it with a class. In short, use a class to select (sp?) another class. What I tried to do was use the class ie8 to select transboxBody, but this did not work:

.ie8 transboxBody{
    background-color: #fff;
    filter:alpha(opacity=60);
}

Instead of this, I tried to select second div element in my HTML:

div:second-child  {
    background-color: #fff;
    filter:alpha(opacity=60);
}

This should select this div element:

<div class="transboxHead">
    <img src="../_images/image">
    <h2>Header text</h2>
</div>

However, this did not work as it effected the div box color in Mozilla, Chrome, Opera, IE 9+, and Safari.

So in sum: is there an easier way to do this? Can I select a class with another class? If not, what would be the best way to approach this?

Please note that I am not interested in using Jquery for learning purposes... I want to get this to work with as clean of code possible, and having a Jquery function will add more bulk.

Here's my code...

CSS:

/*Zeroes out all margins*/
* {
   margin:0;
   padding:0;
}

/*Center align website*/
#wrapper {
   width:47em;
   margin:0 auto;
   text-align:left;
}

body {
   text-align:center; /*For IE6*/
}

/*Background image for website*/
html, body {
    background-image:url("../_images/Background.jpg");
}

/*Top transparent box*/
.transboxHead {
    background-color:rgba(255,255,255, 0.6);
    opacity: 0.6;
    border-radius: 0 0 25px 25px;
    padding: 1em;
}

/*Body transparent box*/
.transboxBody {
    margin:30px 0px;
    background-color:rgba(255,255,255, 0.3);
    border-radius:25px;
    padding: 1em;
}

.ie6 transboxBody{
    background-color: #fff;
    filter:alpha(opacity=60);
}

/*Registartion form styling*/
.logregform li {
    margin: 10px;
    /*I added the width and height seen below to try to get it work in Chrome*/
    padding:top;
    width:220px;
    height:30px;
}

/*Center fields*/
.contact_form { 
    width:240px;  
    overflow:hidden; 
    padding:10px; 
}

/*Contact form styling*/
.contact_form ul {
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}

HTML:

<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->

<head> 
<meta http-equiv="X-UA-Compatible" content="IE=8">
<link type="text/css" rel="stylesheet" href="../_css/stylesheet.css"/>
</head>

<div id="wrapper">
    <div class="transboxHead">
        <img src="../_images/image">
        <h2>Header text</h2>
    </div>

    <div class="centered transboxBody">
        <div class="logregform">
                <form class="contact_form">
                    <ul>
                        <li>

                        </li>
                        <li>

                        </li>
                        <li>

                        </li>
                        <li>

                        </li>
                        <li>

                        </li>
                        <li>

                        </li>
                    </ul>   
                </form>     
        </div>
 </div>
Community
  • 1
  • 1
  • The child selector *is* supported by IE7 and IE8, but you're not using it anywhere in your code. You're using `:nth-child()`, which is indeed not supported in IE8 and older. – BoltClock May 21 '14 at 04:26
  • Possible duplicate of http://stackoverflow.com/questions/8733475/alternative-for-nth-child-for-older-ie-browsers or http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-to-support-nth-child-css-element – mplungjan May 21 '14 at 04:31
  • I do not want to use Jquery @mplungjan –  May 21 '14 at 04:33
  • So read the other answers – mplungjan May 21 '14 at 04:39
  • As I said, read the answers in the links I gave that does not use jQuery - anyway you found what you needed it seems – mplungjan May 21 '14 at 04:47
  • I'm not interested in using "tricks" or "hacks" to get it done. I want something solid. What those comments offer are bulky and unnecessary in my opinion. Thank you, anyways. However, I did not solve my problem, fully. I realized using this method effects Chrome, Firefox, etc... So the floor is still open for answers. –  May 21 '14 at 04:55
  • don't you wanna try hack for IE than how you wanna achieve transparency in IE ? – shyammakwana.me May 21 '14 at 07:58

2 Answers2

0

You have syntax error in your code. You missed "." in the class.

.ie8 transboxBody{
background-color: #fff;
filter:alpha(opacity=60);
}

The above css class should be written like below

.ie8 .transboxBody{
background-color: #fff;
filter:alpha(opacity=60);
}
Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • this helped a lot. Thanks so much. One question: Is there a way I can have this work for IE 6, 7, and 8 by placing .ie6 .ie7 .ie8 before the .transboxBody{ background-color: #fff; filter:alpha(opacity=60); } ? From what I've read, I'd do this: .ie6, .ie7, .ie8, .transboxBody { -code- } ... so I would use commas to separate the classes. –  May 21 '14 at 17:52
  • You can write with comma separate. But the syntax should be like this: .ie6 .transboxBody,.ie7 .transboxBody,.ie8 .transboxBody{-code-} – Suresh Ponnukalai May 22 '14 at 04:57
0

If you are trying to get fall back of rgba() for IE's, then you are doing wrong. You are using filter with opacity that will affect all the text also.

You should use below code for rgba() background

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

this is fallback for rgba(255, 255, 255, 0.2)

You have to change #33ffffff according to yours.

How to calculate ARGB for RGBA

Here is your code

.ie8 .transboxBody { 
   background:none;
   -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
   zoom: 1;
}
Community
  • 1
  • 1
shyammakwana.me
  • 5,562
  • 2
  • 29
  • 50