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

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    css list-style-type,background works for IE in windows, Fails in Linux


    Hi,

    When i open index.html from windows server in IE all the images and list style type works. Fails in linux server for IE 9.

    To reproduce the problem :
    1) copy the files to windows machine. and open the index.html it works fine.
    2) copy the files to linux, and open index.html in IE 9, fails to load the image.

    ###index.html
    Code:
    <html lang="en-GB">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    	<meta name="author" content="The CSS Ninja">
    	<meta name="keywords" content="CSS, Tree menu, checked pseudo-class, CSS Ninja">
    	<meta name="description" content="Create a pure CSS tree folder structure with collapsible folders utilising checkboxes along with the checked pseudo-class">
    	<meta name="robots" content="all">
    	<meta name="copyright" content="The CSS Ninja">	
    	<!--[if gte IE 9 ]><link rel="stylesheet" type="text/css" href="_styles.css" media="screen"><![endif]-->
    	<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="_styles.css" media="screen"><!--<![endif]-->	
    	<title>Pure CSS collapsible tree menu | The CSS Ninja</title>
    </head>
    <body>	
    	<ol class="tree">
    		<li class="type2">
    			<label>Elan r2</label><input type="checkbox" id="hier"/>
    			<ol>
    		<li class="type1"> <!-- SECTION 1 START-->
    			<label>DFT</label> <input type="checkbox" id="hier"/> 
    			<ol>
    			<li><input type="checkbox" id="main"/>FILE1</a></li>
    			<li><input type="checkbox" id="main"/>FILE2</a></li>
    			<li><input type="checkbox" id="main"/>FILE3</a></li>
    			<li><input type="checkbox" id="main"/>FILE4</a></li>
    			<li><input type="checkbox" id="main"/>FILE5</a></li>
    			</ol>
    		</li> <!-- SECTION 1 END -->
    		<li class="type1"> <!-- SECTION 2 START-->
    			<label for="folder2">DIG</label> <input type="checkbox" id="folder2" /> 
    			<ol>
    			<li><input type="checkbox" id="main"/>FILE1</a></li>
    			<li><input type="checkbox" id="main"/>FILE2</a></li>
    			<li><input type="checkbox" id="main"/>FILE3</a></li>
    			<li><input type="checkbox" id="main"/>FILE4</a></li>
    			<li><input type="checkbox" id="main"/>FILE5</a></li>
    			</ol>
    		</li> <!-- SECTION 2 END -->
    		<li class="type1"> <!-- SECTION 3 START-->
    			<label for="folder3">MIX</label> <input type="checkbox" id="folder3" /> 
    			<ol>
    			<li><input type="checkbox" id="main"/>FILE1</a></li>
    			<li><input type="checkbox" id="main"/>FILE2</a></li>
    			<li><input type="checkbox" id="main"/>FILE3</a></li>
    			<li><input type="checkbox" id="main"/>FILE4</a></li>
    			<li><input type="checkbox" id="main"/>FILE5</a></li>
    			</ol>
    		</li> <!-- SECTION 3 END -->
    	<li class="type2"> <!-- SECTION 3 START-->
    		<label for="folder4">OWNERS</label> <input type="checkbox" id="folder4" />
    		<ol>
    			<li class="type1">
    				<label for="folder5">SUBBAREDDY</label><input type="checkbox" id="folder5" /> 
    				<ol>
    				<li><input type="checkbox" id="main"/>FILE1</a></li>
    				<li><input type="checkbox" id="main"/>FILE2</a></li>
    				<li><input type="checkbox" id="main"/>FILE3</a></li>
    				</ol>
    			</li>
    			<li class="type1">
    				<label for="folder6">ORPHANS</label><input type="checkbox" id="folder6" /> 
    				<ol>
    				<li><input type="checkbox" id="main"/>FILE1</a></li>
    				<li><input type="checkbox" id="main"/>FILE2</a></li>
    				<li><input type="checkbox" id="main"/>FILE3</a></li>
    				</ol>
    			</li>
    		</ol>
    	</li> <!-- SECTION 3 END-->
     </ol>
     </li>
    </ol>	
    </body>
    </html>
    ###_styles.css
    Code:
    /* Just some base styles not needed for example to function */
    /**, html { font-family: Verdana, Arial, Helvetica, sans-serif; }*/
    
    body, form, ul, li, p, h1, h2, h3, h4, h5
    {
    	margin: 0;
    	padding: 0;
    }
    body { background-color: #606061; color: #ffffff; margin: 0; }
    img { border: none; }
    p
    {
    	font-size: 1em;
    	margin: 0 0 1em 0;
    }
    
    html { font-size: 100%; /* IE hack */ }
    body { font-size: 1em; /* Sets base font size to 16px */ }
    table { font-size: 100%; /* IE hack */ }
    input, select, textarea, th, td { font-size: 1em; }
    	
    /* CSS Tree menu styles */
    ol.tree
    {
    	padding: 0 0 0 30px;
    	width: 300px;
    }
    li.type1 
    { 
    	position: relative; 
    	margin-left: -15px;
    	list-style: none;
    }
    
    li.type2
    { 
    	position: relative; 
    	margin-left: -15px;
    	list-style: none;
    
    }
    /* cleared */
    
    li.type1>input
    {
    	position: absolute;
    	left: 0;
    	margin-left: 0;
    	/*opacity: 0;*/
    	z-index: 2;
    	cursor: pointer;
    	height: 1em;
    	width: 1em;
    	top: 0;
    	background: url(folder-horizontal.png) 15px 1px no-repeat;
    }
    li.type2>input
    {
    	position: absolute;
    	left: 0;
    	margin-left: 0;
    	opacity: 0;
    	z-index: 2;
    	cursor: pointer;
    	height: 1em;
    	width: 1em;
    	top: 0;
    	
    }
    /* cleared */
    
    li.type1>input + ol
    {
    	margin: -0.938em 0 0 -44px; /* 15px */
    	height: 1em;
    }
    li.type2>input + ol
    {
    	background: url(toggle-small-expand.png) 40px 0 no-repeat;
    	margin: -0.938em 0 0 -44px; /* 15px */
    	height: 1em;
    }
    /* cleared */
    
    li.type1>input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
    li.type2>input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
    /* cleared */
    
    li.type1>label
    {
    	background: url(folder-horizontal.png) 15px 1px no-repeat;
    	/*cursor: pointer;*/
    	display: block;
    	padding-left: 37px;
    }
    li.type2>label
    {
    	background: url(folder-horizontal.png) 15px 1px no-repeat;
    	/*cursor: pointer;*/
    	display: block;
    	padding-left: 37px;
    }
    /* cleared */
    li.type1>input:checked + ol
    {
    	margin: -1.25em 0 0 -44px; /* 20px */
    	padding: 1.563em 0 0 80px;
    	height: auto;
    }
    li.type2>input:checked + ol
    {
    	background: url(toggle-small.png) 40px 5px no-repeat;
    	margin: -1.25em 0 0 -44px; /* 20px */
    	padding: 1.563em 0 0 80px;
    	height: auto;
    }
    /* cleared */
    
    li.type1>input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
    li.type1>input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
    /* cleared */
    
    li.type2>input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
    li.type2>input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
    /* cleared */
    Regards,
    Subbareddy
    Last edited by Kravvitz; July 10th, 2013 at 03:17 PM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    *** Moderator note: Post split from this this thread. ***

    Welcome to DevShed Forums, subbar443.

    Next time please start your own thread instead of posting an off-topic question in someone else's old thread.

    It sounds to me like you may have a problem with case-sensitive file names. By default for both operating systems, Windows is not case-sensitive while Linux is. So make sure that the file-names are all lowercase, like they are in your stylesheet.

    Are you really only testing in one browser?

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo