So, I've got a fairly nice little CSS layout going on right now, I shan't bore you with the details of how it works perfectly in decent browsers, you all know it does! IE6 doesn't appear to like me sharing class names on elements, which is really stupid!
markup:
css:
how it should look:
how it looks in IE6
as you can see, the button has adopted the background of its parent, which shares its class name (they share class names to ease my memory!). This isn't an issue in IE7, which is nice.
Has anyone come across this before? Is it not possible to nest and share classnames like this in IE6? Am I in the wrong here, semantically, should the classnames be different even though they're really only being used as identifiers? It's obviously not an issue to change the names around (mild pain), but I've not seen this behaviour before and I thought it notable.
markup:
Code:
<div class="colourbox orange">
<img src="lib/img/orange/vehicleplates.gif" class="title"/>
<img src="lib/img/productvehicleplates.jpg" class="product"/>
<ul>
<li>Customise Your Vehicle</li>
<li>Great quality and great designs.</li>
</ul>
<form action="" method="get">
<ul>
<li><label>Search</label></li>
<li><input type="text" name="search" class="noborder"/></li>
<li><input type="image" class="image" src="lib/img/orange/search.gif"/></li>
</ul>
</form>
<div class="button orange">
<a href="#" class="create"><span class="hidden">Create My Plates</span></a>
</div>
</div>css:
Code:
/**box*/
div.colourbox {
float: left;
width: 173px;
height: 277px;
padding-right: 7px;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
div.colourbox.orange {
background-image: url(../img/orange/orangebg.png);
}
div.colourbox img.title {
margin: 9px 0 0 7px;
}
div.colourbox img.product {
margin: 3px 0 0 1px;
}
div.colourbox ul {
margin: 14px 9px 0 8px;
width: 154px;
height: 78px;
max-height: 78px;
}
div.colourbox ul li {
color: #fff;
padding: 0 0 0 17px;
font-size: 0.9em;
background-repeat: no-repeat;
background-position: 0px 0px;
line-height: 1.2;
}
div.colourbox.orange ul li {
background-image: url(../img/orange/tick.gif);
}
div.colourbox.orange ul>li:nth-of-type(2) {
margin-top: 30px;
}
div.colourbox form {
margin: 0 !important;
}
div.colourbox form ul {
overflow: hidden;
margin: 7px 0 0 1px !important;
height: auto;
width: 171px;
}
div.colourbox form ul li {
float: left;
background-image: none !important;
margin: 0 !important;
padding: 0 !important;
}
div.colourbox form label {
margin: 3px 15px 0 7px;
display: block;
font-size: 0.9em;
color: #fff;
}
div.colourbox form input.noborder {
margin: 2px 15px 0 0;
width: 80px;
font-size: 0.7em;
border: none;
background: none;
}
div.colourbox form input.image {
margin-top: 1px;
}
/**button*/
div.button {
height: 28px;
max-height: 28px;
overflow: hidden;
}
div.button a {
background-repeat: no-repeat;
background-position: center 8px;
display: block;
padding: 14px 0;
float: left;
}
div.colourbox div.button {
margin: 13px auto;
}
div.button.orange {
background: url(../img/orange/button.png) no-repeat top left;
width: 115px;
}
div.button.orange a.create {
background-image: url(../img/orange/createmyplates.png);
width: 115px;
}how it should look:
how it looks in IE6
as you can see, the button has adopted the background of its parent, which shares its class name (they share class names to ease my memory!). This isn't an issue in IE7, which is nice.
Has anyone come across this before? Is it not possible to nest and share classnames like this in IE6? Am I in the wrong here, semantically, should the classnames be different even though they're really only being used as identifiers? It's obviously not an issue to change the names around (mild pain), but I've not seen this behaviour before and I thought it notable.
That would target an "orange" element that is the descendent of a "div" element which has a class of "colourbox". "div.foo.bar" targets a "div" element which has a "foo" class and also a "bar" class.
