I am rebuilding http://www.justice.govt.nz/maorilandcourt/ in HTML/CSS without the Javascript and images for text. The funtionality has to be the same and the look too (as much as possible). The problem I have is that in IE, the text is not changing when I hover over the links (It is meant to change from the English to Maori, and it works in Firefox and Opera). Any help appreciated.
i did all the coding, to change links when hovered over.
except for the
a.hover {background:#FFFFFC}
because when i click to save changes, it changes the “#” and adds some numbers.
so, instead, i changed the value slightly.
but, it just shows both the text for the link, and the text for the link when it’s hovered, one next to the other. here is the page i’m working on, the text in the left box is what i am having problems with.
Hello, and welcome to Sitepoint. You’re declaring an anchor with a class of hover. If you want to apply a hover effect to the anchor, you need to change the period to a semi colon so it looks like this:
a:hover
Then you’ll be able to change the background color when you hover over the link. Also, don’t forget to assign a color value to the rule as well, even if you only use color: inherit; instead of an actual color value.
Yup, I have Internet Explorer 3, 4, 5.01, 5.5, 6 and 7(RC1) running simultaneously on the same system without the need for a virtual machine. Only IE4 is not working, and that was only after I upgraded from IE6 to IE7RC1 as my default IE installation.
Well for starters, you have 374 HTML errors and at least 205 CSS errors on your page. I also saw two different layouts trying to load at the same time. You may want to take a day off, sit down and fix them all, starting with the HTML errors, then worry about the CSS.
And for the record, I tested your page in FireFox, and it took over five minutes to load.
o, it’s supposed to jut show “cold”, and when you hover over it, it’ll say “i like the cold side of the pillow”
The code on its own seems to be working ok (apart form the fact there is no property as text-color:! It should be color if you want to change the text color or if its just to counter the ie bug then use visibility:visible as below.).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a span.sm, a:hover span.lg {display: inline; }
a:hover span.sm, a span.lg {display: none; }
a:hover {visibility:visible}
</style>
</head>
<body>
<div id="aboutme"> <a href="http://"> <span class="sm">cold</span> <span class="lg">i like the cold side of the pillow</span> </a> </div>
</body>
</html>
just one more thing, if i have lots of links, how can i make then be next to each other?
because right now theyre one underneath the other.
do i need to take something out?
It depends how you have organised them in the html. Links are inline elements by default and will align next to each other anyway. If you have them contained in block elements such as p tags or have made the links display:block then you will need to float them next to each other.
If you have lost of links then they should probably be contained within a list structure and then you can float the li items next to each other by applying float:left to them. (or make the list and the anchors display:inline and they should still line up alongside.)
