Strange border line in IE8 that I didn't add

Question

enter image description here

Same HTML, CSS, and image file, but in IE8 I have this weird border line.

HTML:

<div id="admin_link_div">
    <ul id="vertical_menu">
        <li>
            <a href="/admin/appointment_list">
            <div id="sidebar_left_box">
                Room List
            </div><img id="admin_arrow_img_roomlist" src="/images/arrow_off_icon.gif"></a>
        </li><div id="sidebar_line"></div>
        <li>
            <a href="#">
            <div id="sidebar_left_box">
                User Management
            </div><img id="admin_arrow_img_userlist" src="/images/arrow_off_icon.gif"></a>
            <br>
            <ul>
                <li>
                    <a href="/admin/users">User List</a>
                </li>
                <li>
                    <a href="/admin/users/multi_register">User Register</a>
                </li>
            </ul>
        </li><div id="sidebar_line"></div>
        <li>
            <a href="#">
            <div id="sidebar_left_box">
                Company Mangement
            </div><img id="admin_arrow_img_register" src="/images/arrow_off_icon.gif"></a>
            <br>
            <ul>
                <li>
                    <a href="/admin/companies">Company List</a>
                </li>
                <li>
                    <a href="/admin/companies/new">Company Register</a>
                </li>
            </ul>
        </li><div id="sidebar_line"></div>
        <li>
            <a href="#">
            <div id="sidebar_left_box">
                Service Management
            </div><img id="admin_arrow_img_service" src="/images/arrow_off_icon.gif"></a>
            <br>
            <ul>
                <li>
                    <a href="/admin/barbie_servers">Server Management</a>
                </li>
                <li>
                    <a href="/admin/barbie_management">Barbie Management</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS:

#admin_arrow_img_userlist{
    margin-left: 10px;
    margin-bottom: 2px;
}

Any good reason???

score 4 · Accepted Answer · answered Jan 10 '14 at 13:42

4

add this to your image #

outline:none;
border: none;

because IE sets a border for images by default!!

answered Jan 10 '14 at 13:42

NoobEditor

15,563
19
81
112

isn't it usually `border`, not outline? – StackExchange What The Heck Jan 10 '14 at 13:44
@yochannah : both `border` and `outline` should be `none`, cause IE sets the default value for them....agreed with your point!! :) – NoobEditor Jan 10 '14 at 13:46
Thanks for the SUPER FAST response. cuz it was so fast i have to wait to select the answer :) have to wait 10 min – Canna Jan 10 '14 at 13:46

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

Try this CSS on image

img
{
 border:0;
 outline:none; 
}

Use border 0 Check link more appropriate.

edited May 23 '17 at 10:32

Community

1
1

answered Jan 10 '14 at 13:45

Prateek

6,785
2
24
37

Strange border line in IE8 that I didn't add

2 Answers2