I was working on a theme, which had the following structure:
<div class1></div>
<div class2></div>
<div class3>content</div>
<div class4> </ ...
class1 sits on the top and class3 has an image with content.
Now, the stuff worked very good in Firefox, Opera, and even IE 8. But IE 6 did not render the top of the border correctly, and ended up showing only a small dot at the top. When I looked at Drupal.org, I found a few replies, which had various interesting options:
- Increase the width to the size of the image, so it will stretch. This was a good option, but again I found it less efficient, as it would render my class1 limited.
- Put a height tag of 1 %. IE is notorious in that field. Tried but it didn't work.
- Put a
font-size: 1px;
. It worked!
In the class, class 2, just add a new tag:
.class 2 , .class 4 { font-size: 1px; }
It worked wonders as if nothing was ever wrong. IE 7+ is happy now.
Final Word: In case you are looking for an IE 6 fix, then solution 1 will possibly be helpful.