Position of my <li> circles is different between IE and Firefox

开发者 https://www.devze.com 2023-03-11 12:23 出处：网络

This is a follow-up to my last question. Thanks to \"mu is too short\" I can now demonstrate my problem in a fiddle.

This is a follow-up to my last question. Thanks to "mu is too short" I can now demonstrate my problem in a fiddle.

I have the following code.

I want the code to show the list circles to the left of the text but to the right side of the .img DIV. This works in Firefox and in Opera but in IE they are positioned to the very far l开发者_如何学编程eft. I can't understand why they are positioned differently in the two browsers. Help would be much appreciated.

<div class="fp1">
    <div class="col">
      <div class="img" id="img1"></div>
                        <ul>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>        
                        <li><span>Test </span></li>
                        </ul>
      </div>
</div>

.fp1 .row   { overflow: hidden;  }
.fp1 .img   { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
    background: yellow; no-repeat scroll 0 0 transparent; }

.fp1 .col   { float: left; width:50%; margin:0px; }
.fp1 .col ul      { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li   { line-height:15px; }

Here is a fiddle

Demo 1

I did a couple of things based on my experience. Most importantly:

I have floated the UL towards left
I have zeroed out all margin/padding on the UL (except padding left so that the bullet stays there)
I have zeroed out all margin/padding on the LI

Note that different browsers have different defaults for margin/padding on UL and LI hence the normalization.

Demo 2

This is almost the same as above except UL is not floated, instead a left-margin is used.

My CSS isn't great, but I think you need something like this:

.fp1 .col ul      { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}

I can't explain why IE does nonsense like this, save for saying IE does this kind of thing all the time!

The solution is condintional comments.

These allow you to point different css at IE versions only: http://www.quirksmode.org/css/condcom.html

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

Would target all IE versions, just as

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Would target IE6 only .

so this should fix your problem

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style><!-- 
    .fp1 .row           { overflow: hidden;  }
    .fp1 .img           { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0; background: yellow; no-repeat scroll 0 0 transparent; }
    .fp1 .col           { float: left; width:50%; margin:0px; }
    .fp1 .col ul      { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
    .fp1 .col ul span { color:#222; font-size: 0.85em; }
    .fp1 .col ul li   { line-height:15px; }
    --></style>
<!--[if IE]>
<style><!-- 

ul li {
    margin-left: 80px;
    color: red;
}

--></style>
<![endif]-->
</head>

<body>
<div class="fp1">
    <div class="col">
      <div class="img" id="img1"></div>
                        <ul>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>        
                        <li><span>Test </span></li>
                        </ul>
      </div>
</div>


</body>
</html>