Forum Moderators: not2easy
Cheers
CSS
.language {
float: right;
clear: right;
margin: 1ex 0;
}
.language a#uk {
width: 22px;
height: 16px;
background-image: url("uk.gif");
}
.language a#japan {
width: 22px;
height: 16px;
background-image: url("japan.gif");
}
.language a#:hover {
border-top: 1px solid #4a4a4a;
border-bottom: 0.5px solid #cecece;
border-left: 1px solid #4a4a4a;
border-right: 0.5px solid #cecece;
}
.language a .alt { display: none; }
HTML
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" title="Default" />
</head>
<body>
<div class="language">
<a id="uk" href="#"><span class="alt">UK</span></a>
<a id="japan" href="#"><span class="alt">Japan</span></a>
</div>
</body>
</html>
You must specify an ID name after the # sign.
background:url(image.gif) *not* background:url("image.gif").
cEM
apparently you cant do it in firefox as its not supported...
FF is actually doing this exactly right according to the code it's being given.
Anchors are inline elements, which means they cannot, according to the W3 visual formatting model [w3.org], be given an explicit width or height. While FF follows this specification, IE ignores it if your document has no doctype declaration [w3.org]. This is why IE (without a doctype) displays your images while FF does not.
The solution is to make the <a>nchor into a block-level element, so that the width and height settings apply. To do this, just add...
.language a{
display:block;
}
This takes care of making the background images appear, but because the anchors are now block level elements, they no longer line up horizontally. Instead, they stack vertically. To get them side by side, you can add a float value to the code above...
.language a{
display:block;
float:left;
}
Another option would be to nest the <a>nchors in another element, like a list, for instance, then style the list to display horizontal and the anchors to be block level.
html:
<ul>
<li><a id="uk" href="#"><span>UK</span></a>
<li><a id="japan" href="#"><span>Japan</span></a></li>
</ul>
css:
.language ul{
margin:0;padding:0;/*gets rid of list spacing*/
list-style-type:none;/*gets rid of bullets*/
}
.language ul li{
display:inline; /*prevents an IE display bug*/
}
.language ul li a{
display:block; /*allows width and height to apply*/
width: 22px;
height: 16px;
}
.language ul li a#uk{
background:url(path/to/image.gif);
}
.language ul li a#japan{
background:url(path/to/image.gif);
}
.language span {
display: none; /*hides the text*/
}
cEM
.language ul li a{
display:block; /*allows width and height to apply*/
width: 22px;
height: 16px;
}
should be ...
.language ul li a{
float:left;
display:block; /*allows width and height to apply*/
width: 22px;
height: 16px;
}
cEM
