Forum Moderators: not2easy

Message Too Old, No Replies

anchor border and container div width- IE issue

         

poonkave

11:08 am on Feb 20, 2012 (gmt 0)

10+ Year Member


below is the extracted code to show an issue in IE only.
I am expecting border for <a> but top border is not visible in IE if container div got width sepcified.
Kept css inline for easy replication.

[code]<div style="width:100px;">
<ul style='border-bottom:1px solid #778;'>
<li style="list-style:none;margin:0;display:inline;">
<a href="#" style='border:1px solid green;text-decoration:none'>Item one</a>
</li>
</ul>
</div>[/code]

rocknbil

5:27 pm on Feb 20, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard poonkave, but you may have to change the display of the anchor to block or inline-block. Right now it's default, inline, so it really has no "height" so won't have a border-top.

This presents another problem. A block element inside an inline element (the LI's) is bound to create more issues, moving forward you may have to change the layout of the LI's.