I have some old code which displayed country flags on my page using HTML and CSS. The original source went missing but I'd copied the files over to my own server. That worked for a while but recently I noticed that the flags were no longer being displayed.
I've written a basic page from scratch to demonstrate the error. I'm probably making some very basic mistake here. Could someone review this to see if I've done something obviously wrong?
The simple HTML page is as follows.
<!DOCTYPE html>
<html>
<head>
<link/>
<link rel="stylesheet" type="text/css" href="flags.css">
</head>
<body>
<ul class="f32">
<li class="flag ar">Argentina</li>
</ul>
</body>
</html>
The flags css is like this....
.f32 .flag{display:inline-block;height:32px;width:32px;vertical-align:text-top;line-height:32px;background:url(flags32.png) no-repeat;}
.f32 ._African_Union(OAS){background-position:0 -32px;}
.f32 ._Arab_League{background-position:0 -64px;}
There are more lines but this gives a basic idea and I think the top row is what's important here.
The flags32.png file (a strip of country flags in a single png) are in the same location as the css and the html file here. When I run this, I get nothing except the word 'Argentina'. The flag doesn't show. Should this work?
I've written a basic page from scratch to demonstrate the error. I'm probably making some very basic mistake here. Could someone review this to see if I've done something obviously wrong?
The simple HTML page is as follows.
<!DOCTYPE html>
<html>
<head>
<link/>
<link rel="stylesheet" type="text/css" href="flags.css">
</head>
<body>
<ul class="f32">
<li class="flag ar">Argentina</li>
</ul>
</body>
</html>
The flags css is like this....
.f32 .flag{display:inline-block;height:32px;width:32px;vertical-align:text-top;line-height:32px;background:url(flags32.png) no-repeat;}
.f32 ._African_Union(OAS){background-position:0 -32px;}
.f32 ._Arab_League{background-position:0 -64px;}
There are more lines but this gives a basic idea and I think the top row is what's important here.
The flags32.png file (a strip of country flags in a single png) are in the same location as the css and the html file here. When I run this, I get nothing except the word 'Argentina'. The flag doesn't show. Should this work?
