<li> looking bizarre on IE
I'm getting a little problem with "li" on IE. The "li" are not being displayed as block and the "list-style-image" doesn't work too. I've looked for whole web and I didn't find something similar.. On FF, Chrome and Safari the result is pretty good..
Thanks for any help. Below, my HTML and IE CSS:
<html>
<head>
<title>IE test</title>
<link rel="shortcut icon" type="image/x-icon" href="content/images/">
<link rel="stylesheet" type="text/css" href="content/css/alerts_rev00.css">
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="content/css/alertsIE_rev00.css" />
<![endif]-->
</head>
<body>
<div id="error_msg">
<ul>
<li>Please, fill the "adress" field.</li>
<li>Please, chose an username containing 4 character, at least.</li>
</ul>
</div>开发者_JAVA技巧
</body>
<html>
body {
margin: 0px;
padding: 20px;
}
#error_msg ul {
position: relative;
width: 476px;
margin: 0px 0px 20px 0px;
background-color: #ffeaea;
list-style-image: url("http://www.dvertr.com/content/images/dvertr_erro_icone.png");
border-bottom: solid 1px #ef404a;
color: #ef404a;
text-align: left;
}
#error_msg ul li{
display: block;
line-height: 25px;
font-family: georgia, times, serif;
font-size: 12px;
font-style: italic;
text-decoration: none;
}
Unfortunately, "list-style-image" will only lead to pain and suffering my friend. Swap it out for a background-image on the LI. Much easier to render across browsers.
li {
padding: 0 0 0 20px;
background-repeat: no-repeat;
background-position: 2px 2px;
background-image: url("http://www.dvertr.com/content/images/dvertr_erro_icone.png")
}
Change the position to move it around to balance as needed.
Have you tried running a CSS Reset just in case to standardize your elements like <li> and others?
Plus as mentioned by @Matt Gibson, you need to add your <!DOCTYPE>
加载中,请稍侯......
精彩评论