Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    402
    Thanks
    118
    Thanked 0 Times in 0 Posts

    List items show in wrong direction in IE 7 and 6

    even though i have the following list items setup to appear next to each other, horizontally, across the page, for some reason they appear vertically, on top of one another, in IE 6 and 7. please advise how i correct this issue.

    thanks in advance!

    current html
    Code:
        <div class="new_thumb">
          <ul>
    	    <li><a href="pics/samples/rg_original.jpg" target="_blank">Before<img src="pics/samples/rg_orig_thumb.jpg" /></a></li>
    	    <li><a href="http://www.xxxxxx.com/" target="_blank">After<img src="pics/samples/rg_new_thumb.jpg" /></a></li>
    	    <li><a href="pics/samples/dvir_old.jpg" target="_blank">Before<img src="pics/samples/dvir_old_thumb.jpg" /></a></li>
    	    <li><a href="http://www.xxxxxx.com/" target="_blank">After<img src="pics/samples/dvir_new_thumb.jpg" /></a></li>	
    	    <li><a href="pics/samples/cls_original.jpg" target="_blank">Before<img src="pics/samples/cls_orig_thumb.jpg" /></a></li>
    	    <li><a href="http://www.xxxxx.com/" target="_blank">After<img src="pics/samples/cls_new_thumb.jpg" /></a></li>
          </ul>
    	</div>
    current css
    Code:
    .new_thumb {
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    }
    .new_thumb ul {
    	margin: 5px 0;
    	padding: 0px;
    }
    .new_thumb ul li {
    	padding: 0px;
    	margin: 5px;
    	width: 126px;
    	height: 140px;
    	list-style-type: none;
    	display: inline-block;
    }
    .new_thumb ul li a {
    	color: #000000;
    }
    .new_thumb ul li a:visited {
    	color: #000000;
    }
    .new_thumb ul li a:hover {
    	color: #F92325;
    	text-decoration: none;
    }
    .new_thumb ul li a img {
    	display: block;
    	border: thin solid #0000FF;
    }
    .new_thumb ul li a img:link {
    }
    .new_thumb ul li a img:visited {
    	border: thin solid #0000FF;
    }
    .new_thumb ul li a img:hover {
    	border: 2px solid #000000;
    }
    Attached Thumbnails Attached Thumbnails List items show in wrong direction in IE 7 and 6-before-after.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello sixrfan,
    Did you try floating the li? It has a width so a float is not going to hurt anything.

    Code:
    .new_thumb ul li {
    	padding: 0px;
    	margin: 5px;
    	width: 126px;
    	height: 140px;
    	list-style-type: none;
    	float: left;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    sixrfan (12-05-2009)

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    402
    Thanks
    118
    Thanked 0 Times in 0 Posts
    that did it. thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •