ul, li, problem in IE6

Discussion in 'CSS' started by dracula51, Oct 18, 2009.

  1. #1
    Hey

    im using a pagination. & there is an error in style in IE6

    this is an example of pagination's ..UL..LI

    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    		<ul id='pagination-flickr'>
    		<li class='previous-off'>First</li>
    		<li class='previous-off'>Previous</li>
    		<li><a href='javascript:pagination($page);'>1</a></li>
    		<li><a href='javascript:pagination($page);'>2</a></li>
    		<li><a href='javascript:pagination($page);'>3</a></li>
    		<li><a href='javascript:pagination($page);'>4</a></li>
    		<li><a href='javascript:pagination($page);'>5</a></li>
    		<li class='previous-off'>Next</li>
    		<li class='previous-off'>Last</li>
    		</ul>
    </body>
    
    </html>
    HTML:
    the CSS style file is
    ul{border:0; margin:0; padding:0;}
    
    #pagination-flickr li{
    border:0; margin:0; padding:0;
    font-size:11px;
    list-style:none;
    }
    #pagination-flickr a{
    border:solid 1px #DDDDDD;
    margin-right:2px;
    }
    #pagination-flickr .previous-off,
    #pagination-flickr .next-off {
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
    }
    #pagination-flickr .next a,
    #pagination-flickr .previous a {
    font-weight:bold;
    border:solid 1px #FFFFFF;
    }
    #pagination-flickr .active{
    color:#ff0084;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
    }
    #pagination-flickr a:link,
    #pagination-flickr a:visited {
    color:#0063e3;
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
    }
    #pagination-flickr a:hover{
    border:solid 1px #666666;
    }
    Code (markup):
    now its working nice in Opera & Firefox
    but not in Internet Explorer 6 (strange alignment)

    see the attachment plz

    im sure problem is in CSS code

    help me plz
     

    Attached Files:

    dracula51, Oct 18, 2009 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Take the float property off the a tag, put it on the li, and add {overflow: hidden; zoom: 1;} to the ul.

    cheers,

    gary
     
    kk5st, Oct 18, 2009 IP
  3. dracula51

    dracula51 Peon

    Messages:
    146
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    tnx mate....its working nice :)
     
    dracula51, Oct 18, 2009 IP