Hello all.
I got this webpage (<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/review.20050115.html">http://www.metaleagle.com/design/review.20050115.html</a><!-- m -->) where I have a left column (latest) with some "quick boxes" filled in with stuff from the latest submissions of the website. Each entry of the quick box is a <li> element of an unordered list.
Example:
<!-- newsBox -->
<div id="newsBox">
<h4><span>Latest News</span></h4>
<ul>
<li>
<h5>ORPHANED LAND</h5>
<p>Concert In Athens Cancelled</p>
</li>
<li>
<h5>SATYRICON</h5>
<p>Members Charged Of Rape</p>
</li>
<li>
<h5>NASUM</h5>
<p>Vocalist Missing In Thailand</p>
</li>
</ul>
</div>
<!-- /newsBox -->
My problem is that while mozilla and opera render the page just fine, IE WIN 5.01-6.0 renders it with an awful padding on the top of the first element inside each <li>. I tried everything but didn't manage to narrow the problem into something logical.
Any help would be really appreciated. I could also use any advice on structuring these boxes in a different way, although I believe this is the best structure for unstyled browsing.
Below you can find 2 small screenshots of the renderings as well as links to the relevant source code.
Many thanks!
Screenshots:
<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/css.20050115/moz.gif">http://www.metaleagle.com/design/css.20050115/moz.gif</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/css.20050115/ie.gif">http://www.metaleagle.com/design/css.20050115/ie.gif</a><!-- m -->
Source Code:
[ html (<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/review.20050115.html">http://www.metaleagle.com/design/review.20050115.html</a><!-- m -->) | css (<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/css.20050115/metaleagle.20050115.css">http://www.metaleagle.com/design/css.20 ... 050115.css</a><!-- m -->) ] -- Both are valid
I got this webpage (<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/review.20050115.html">http://www.metaleagle.com/design/review.20050115.html</a><!-- m -->) where I have a left column (latest) with some "quick boxes" filled in with stuff from the latest submissions of the website. Each entry of the quick box is a <li> element of an unordered list.
Example:
<!-- newsBox -->
<div id="newsBox">
<h4><span>Latest News</span></h4>
<ul>
<li>
<h5>ORPHANED LAND</h5>
<p>Concert In Athens Cancelled</p>
</li>
<li>
<h5>SATYRICON</h5>
<p>Members Charged Of Rape</p>
</li>
<li>
<h5>NASUM</h5>
<p>Vocalist Missing In Thailand</p>
</li>
</ul>
</div>
<!-- /newsBox -->
My problem is that while mozilla and opera render the page just fine, IE WIN 5.01-6.0 renders it with an awful padding on the top of the first element inside each <li>. I tried everything but didn't manage to narrow the problem into something logical.
Any help would be really appreciated. I could also use any advice on structuring these boxes in a different way, although I believe this is the best structure for unstyled browsing.
Below you can find 2 small screenshots of the renderings as well as links to the relevant source code.
Many thanks!
Screenshots:
<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/css.20050115/moz.gif">http://www.metaleagle.com/design/css.20050115/moz.gif</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/css.20050115/ie.gif">http://www.metaleagle.com/design/css.20050115/ie.gif</a><!-- m -->
Source Code:
[ html (<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/review.20050115.html">http://www.metaleagle.com/design/review.20050115.html</a><!-- m -->) | css (<!-- m --><a class="postlink" href="http://www.metaleagle.com/design/css.20050115/metaleagle.20050115.css">http://www.metaleagle.com/design/css.20 ... 050115.css</a><!-- m -->) ] -- Both are valid