I am struggling to create a clear div box that works seamlessly across various browsers such as Mozilla, Chrome, Opera, IE 9+, and Safari, including older versions like IE 6, 7, and 8. I have achieved success in all browsers except for IE 6, 7, and 8.
To address this issue, I followed the advice provided by @potench in this thread: How does one target IE7 and IE8 with valid CSS?. While it was helpful, I encountered difficulties implementing it in IE 6, 7, and 8 as his approach is based on selectors. My situation requires utilizing a class to target another class. Despite my attempt to use the class ie8 to select transboxBody, it did not yield the desired results:
.ie8 transboxBody{
background-color: #fff;
filter:alpha(opacity=60);
}
Instead, I tried selecting the second div element in my HTML:
div:second-child {
background-color: #fff;
filter:alpha(opacity=60);
}
This selection should affect the following div element:
<div class="transboxHead">
<img src="../_images/image">
<h2>Header text</h2>
</div>
However, this method backfired as it altered the div box color in other browsers like Mozilla, Chrome, Opera, IE 9+, and Safari.
In essence, I am seeking a simpler solution. Is there a way to target a class with another class? If not, what would be the most effective approach to resolve this matter?
Kindly note that I prefer avoiding Jquery for educational purposes. I aim to achieve a clean code without unnecessary bulk from adding a Jquery function.
Below is the relevant portion of 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 the 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);
}
/* Registration 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>