OK, I tried to resolve this issue in another post and I couldn't. Without being an expert I think I detected the problem.
If you go to my blog http://directoroscarortiz.wordpress.com you'll see that I have isolated every post targeting the <article> tag with CSS (actually the .post class within), applying the following rules:
body.home .post {
background:url('http://directoroscarortiz.files.wordpress.com/2012/02/limelight1.jpg') no-repeat 450px 0;
background-color:white;
border:#EB8921 solid thick;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
color:#000000;
width:670px;
margin:10px;
padding:5px;
}
That is how I created the whites boxes with the orange border and I apply margin in order to separe them. Now, everything looks ok in Chrome, Mozilla, Safari and IE9, but with IE8 and older it's a disaster. If you try to see my site in IE8 (you can do it online in browserling.com) the box doesn't get displayed, only the top border and a chunk of white. If you try it in Compatibility Mode, a bunch of white boxes show up for each line of text.
I blame the HTML5 tag <article> for this, because if you click in categories or archive, you will notes that I've targeted the #content div. It works in in IE8, but I can't isolate each post the way I want to. Ufffffffff....
Finally, my question: Is there a way that I can make my design works the way I want to?... Is there an alternative for creating that effect without targeting the .post class? Or, Is there a way to force IE8 to read the <article> tag?...
I know is a complicated question, mostly because of my english. I hope you can help me guys..... The SacredPath tried it.....he said that maybe DesignSimply could see things in another way... Thank you.
The blog I need help with is directoroscarortiz.wordpress.com.