CODEWITHSUNDEEP
htmlcssdebugging
Ramzi Khahil
Ramzi Khahil

Reputation: 5052

CSS style are not applying when I import them from an external file

I have the following page:

<html>
<head>
<title>Kahil</title>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu1.css" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" dir="RTL">
<center>
<div class='horizontalcssmenu'>
  <ul  id='cssmenu1'>
    <li><a href=''>Menu1</a></li>
    <li><a href='/pages/F4F8E5F4E9EC.php'>Menu2</a></li>
    <li><a href='http://kahil.bizclick.co.il/pages/F2E1E5E3E5FA.php'>Menu3</a></li>
    <li><a href='/pages/E2ECF8E9E4.php'>Menu4</a>
      <ul class='box'>
        <li><a href='/pages/E2ECF8E9E4/EEE3E1F7E5FA.php'>Menu4.1</a></li>
        <li><a href='/pages/E2ECF8E9E4/EEE5F6F8E9-F4F8F1E5ED.php'>Menu4.2</a></li>
        <li><a href='http://kahil.bizclick.co.il/pages/E2ECF8E9E4/E4E3F4F1E4-F2EC-E7E5ECF6E5FA.php'>Menu4.3</a></li>
      </ul>
    </li>
    <li><a href='/pages/F6E5F8-F7F9F8.php'>Menu5</a></li>
  </ul></div>

</body>
</html>

And the following CSS styles that I want to be applied on them:

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: right;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 60px; /*Width of top level menu link items*/
padding: 2px 8px;
text-decoration: none;
/*background-color: #1C3702;*/
color: #7E4732;
font: bold 12px Arial, Helvetica, sans-serif;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

The wired thing is that if its in the file like in the example, no styles are applied, but when I inline them with <style> ... </style> it suddenly works. I have checked the link tag like a 100 times, and I can't find whats wrong.

Edit: As requested I uploaded that to here The whole folder contains now 2 files, index.html and c1.css. The format should be plain text since I use Notepad++ to edit them, but the CSS file was originally downloaded. For debugging convenience I already put there the style tag and commented it out. You can add a > at the end of line 5 to see it working.

Upvotes: 0

Views: 251

Answers (3)

Andiih
Andiih

Reputation: 12413

I just followed the css link in Chrome inspector (rather than just typing the path in) and got what appeared to be a set of 'chinese type' characters - clearly some unicode error

栮牯穩湯慴捬獳敭畮甠筬洊牡楧㩮〠਻慰摤湩㩧〠਻楬瑳猭祴敬琭灹㩥渠湯㭥紊ਊ⨯潔⁰敬敶楬瑳椠整獭⼪⸊潨楲潺瑮污獣浳湥⁵汵氠筩瀊獯瑩潩㩮爠汥瑡癩㭥搊獩汰祡›湩楬敮਻汦慯㩴爠杩瑨਻紊ਊ⨯潔⁰敬敶敭畮氠湩瑩浥⁳瑳汹⩥ਯ栮牯穩湯慴捬獳敭畮甠楬愠੻楤灳慬㩹戠潬正਻楷瑤㩨㘠瀰㭸⼠圪摩桴漠⁦潴⁰敬敶敭畮氠湩瑩浥⩳ਯ慰摤湩㩧㈠硰㠠硰਻整瑸搭捥牯瑡潩㩮渠湯㭥⼊截捡杫潲湵ⵤ潣潬㩲⌠䌱㜳㈰⨻ਯ潣潬㩲⌠䔷㜴㈳਻潦瑮›潢摬ㄠ瀲⁸牁慩ⱬ䠠汥敶楴慣‬慳獮猭牥晩਻੽ਉ⨯畓⁢敬敶敭畮⼪⸊潨楲潺瑮污獣浳湥⁵汵氠⁩汵੻敬瑦›㬰琊灯›㬰瀊獯瑩潩㩮愠獢汯瑵㭥搊獩汰祡›汢捯㭫瘊獩扩汩瑩㩹栠摩敤㭮稊椭摮硥›〱㬰紊

Which is odd - but clearly causing the issue (and not paths as I suggested before)

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46569

Your HTML file is in UTF-16 format, while the CSS file is not. This is extremely confusing to browsers.

When saving, make sure they have the same encoding, or, specify the encoding for the CSS file explicitly in its HTTP header.

Upvotes: 4

Andiih
Andiih

Reputation: 12413

it can only be the path. I note that the path you are displaying is not a root path (beginning with /) so will be dependent on the position of the page in the site. I'd use firebug's net tab to see what is happening.

Upvotes: 3

Related Questions