The weirdest css issue I have ever seen
- by jasondavis
Below I have 2 css codes for a div, please note that the first one does not even have a div on the page or ANYTHING with it's name on it. I can also rename it to anything.
Now where the weird part comes in. The second bit of code below has a width of 520px, the only way that the div on the page will be 520px is if I leave the css code thats above that one, the 1st one with no existing div on the page HAS to be on the page for the second css code to work, At first I thought it has to be a browser caching issue, so I clear my cache and that does nothing, I then try 2 other browsers and they all have the same result.
I add the 1st bit of code into the page and the second bit works, I take the first bit away and the second bit does not work. AM i overlooking something here?
.commentwrappsdfsde2{width:950px;margin:0 0;padding:0;}
.commentwrapper{width:520px;margin-right:auto;margin-left:auto;}
Here is the whole page code
<style>
<!-- css for user photos-->
div.imageSub img.female { border-top: 1px solid #FF3399; }
div.imageSub img.male { border-top: 1px solid #3399FF; }
div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
position: relative;
margin: -15px 0 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:12px;
font-weight: bold;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
<!-- end photo block-->
/* Comments */
.commentwrappsdfsde2{width:950px;margin:0 0;padding:0;}
.commentwrapper{width:520px;margin-right:auto;margin-left:auto;}
#comments ol.commentlist li { list-style-type:none; padding:20px; background:none; }
#comments ol.commentlist li.thread-even { background:#f6f6f6; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; }
#comments ul.children li ul.children,#comments .commentlist{padding:0;}
</style>
<div class="commentwrapper">
<div id="comments">
<ol class="commentlist">
<li class="comment thread-even " >
Comment 1
</li>
</ol>
</div>
</div>
