CODEWITHSUNDEEP
cssinternet-explorerhtml-lists
Rafael Camargo
Rafael Camargo

Reputation: 11

<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>
  </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;
  }

Upvotes: 1

Views: 176

Answers (2)

GHP
GHP

Reputation: 3231

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.

Upvotes: 1

Jakub
Jakub

Reputation: 20475

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>

Upvotes: 0

Related Questions