#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    67
    Rep Power
    13

    CSS Columns with LI


    The columns work, however underneath the selected item, a gap forms. But only on the first 2/3 columns. Why? How can i stop it?


    Sorry about the messiness of the HTML code, it is dynamically created so readability in source code of page was not thought about!

    Sometimes you will be able to see it on my testing server.

    Screenshots for when my server is not online are attached.


    CSS:
    css Code:
     
    #listview
    {	
    	position:absolute;
    	top:122px;
    	left:273px;
    	border:solid 2px #000;
    	height:412px;
    	width:694px;
    	padding-top:15px;
    	overflow:scroll;
    }
    #listview li
    {
    	background-position:left center;
    	background-repeat:no-repeat;
    	border-left:1px solid #000;
    	border-right:1px solud #000;
    	float:left;
    	height:80px;
    	width:150px;
    	overflow:hidden;
    	margin:10px;
    	text-align:center;
    }

    HTML:
    html4strict Code:
     
    <div id="listview"><ul id="listview_ul"><li class="selected" style="background-image: url(.images/ext/txt.gif);" id="40b65fa114057838a74dc7a4b630c36a" onclick="javascript:getDetails(this,'FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt')">FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt
     
    	<input id="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" value="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li class="" style="background-image: url(.images/ext/txt.gif);" id="777468c20ef558d02fac83c104f69389" onclick="javascript:getDetails(this,'U GOT TOLD!.txt')">U GOT TOLD!.txt
     
    	<input id="U GOT TOLD!.txt" value="U GOT TOLD!.txt" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/U GOT TOLD!.txt" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li class="" style="background-image: url(.images/ext/genericBlue.gif);" id="9eee28d877a7f1616a57e8a52165d99a" onclick="javascript:getDetails(this,'U GOT TOLD.txt111')">U GOT TOLD.txt111
     
    	<input id="U GOT TOLD.txt111" value="U GOT TOLD.txt111" name="rname_name" style="display: none;" type="text">
     
    	<input name="rname_folder" value="/U GOT TOLD.txt111" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li class="" style="background-image: url(.images/ext/txt.gif);" id="5dd99cc991e032ee43afd619fa300157" onclick="javascript:getDetails(this,'You get a message if you dont put any content. Solved now.txt')">You get a message if you dont put any content. Solved now.txt
     
    	<input id="You get a message if you dont put any content. Solved now.txt" value="You get a message if you dont put any content. Solved now.txt" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/You get a message if you dont put any content. Solved now.txt" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li style="background-image: url(.images/ext/txt.gif);" id="a120c2992faa1a664a87378674340f0c" onclick="javascript:getDetails(this,'hahahah.txt')">hahahah.txt
     
    	<input id="hahahah.txt" value="hahahah.txt" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/hahahah.txt" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
     
    	</li><li style="background-image: url(.images/ext/php.gif);" id="828e0013b8f3bc1bb22b4f57172b019d" onclick="javascript:getDetails(this,'index.php')">index.php
     
    	<input id="index.php" value="index.php" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/index.php" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li style="background-image: url(.images/ext/txt.gif);" id="e4c275a9e3ae1a0ac717c02826694d61" onclick="javascript:getDetails(this,'it works.txt')">it works.txt
     
    	<input id="it works.txt" value="it works.txt" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/it works.txt" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li style="background-image: url(.images/ext/txt.gif);" id="872002aaa5df50c813fd3443dc0bf561" onclick="javascript:getDetails(this,'lol.txt')">lol.txt
     
    	<input id="lol.txt" value="lol.txt" name="rname_name" style="display: none;" type="text">
     
    	<input name="rname_folder" value="/lol.txt" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li><li style="background-image: url(.images/ext/exe.gif);" id="aeee850280b2d24f213678fe7ca9bc0b" onclick="javascript:getDetails(this,'look at da preety icons.exe')">look at da preety icons.exe
     
    	<input id="look at da preety icons.exe" value="look at da preety icons.exe" name="rname_name" style="display: none;" type="text">
    	<input name="rname_folder" value="/look at da preety icons.exe" type="hidden">
    	<input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">
    	</li></ul></div>
    Attached Images
    Last edited by alicats12345; November 19th, 2008 at 03:07 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    67
    Rep Power
    13
    I fixed it myself.
    it was becuse i apply a .selected style to the selected item. which put a border at the top and bottom. This caused the weird effect.

IMN logo majestic logo threadwatch logo seochat tools logo