CSS not working in different versions of browsers

Hi all,
I am trying to put in a CSS mouse-over pup up on my companies web site http://www.une.edu.au/humanities/archpal/multimedia/virtualcollection/index.php

I have done this before on another page of the site without a problem (http://www.une.edu.au/humanities/archpal/students/index.php) and thought I had the pop up working on this page also until I decided to check on the page layout from my home computer and discovered that the a.info span{display: none} command doesn't seem to work in my browser (for this page alone, the other page still works fine).

I had first tested the page on my work computer, Mac running Firefox 3.6.21 and on EI 8 and the CSS worked fine. My home computer is a Mac running Firefox 6 and Safari 5.1, I have since tested it in both these browsers and the text which is meant to be hidden is displayed from the begin.

I have tried doing the CSS mouse-over popup two different way that initially appear to work on Firefox 3.6.21 and EI 8 but don't work on the other browsers I mentioned.

The first was based on Eric Meyer's Pure CSS popup.

div#links a span {display: none;}

div#links a:hover span {display: block;
   position: absolute; top: 700px; left: 50%; width: 600px; margin-left:-200px;
   padding: 5px; z-index: 100;
   color: #000; background: white;
   font: 10px Verdana, sans-serif; text-align: center;}

Code (markup):

The second was based on the code I used on the other page of the website

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#fff;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#fff}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position: absolute; top: 70px; left: 50%; width: 600px; margin-left:-500px;
    padding: 1px;
    background-color:#fff; color:#000;
    font: 10px Verdana, sans-serif; text-align: center;}

Code (markup):

This is the html I am using also

<td>
<div id="links">
<p style="text-align: center;"><a class="info" href="#"><img title="Hennessey Photo" src="/humanities/archpal/multimedia/virtualcollection/hennesseyphoto.jpg" alt="" width="340" /><span>
<h3>J.B. Hennessey</h3>
In June of 2011 Archaeology &amp; Palaeoanthropology was gifted a large teaching and research collection of Eastern Mediterranean archeological artefacts courtesy of J. B. Hennessy.<br /> <br /> <br />John Basil Hennessy is Emeritus Professor of Near Eastern Archaeology at the University of Sydney and held the Edwin Cuthbert Hall Endowed Professorship in Near Eastern Archaeology at the University of Sydney from 1970 through to his retirement in 1990. Basil Hennessy played a major role in the development of Australian archaeology and archaeologists through his work in Cyprus, Turkey, Jordan, Jerusalem and finally at Pella in Jordan. Basil has had a long association with UNE. First through his collaboration with Morris Kelly in the establishment of the Museum of Antiquities here at UNE and most recently through his gift to Archaeology &amp; Palaeoanthropology of a major collection of Eastern Mediterranean artefacts for teaching and research. In recognition of his association and recent gift ARPA has dedicated an occasional archaeological lecture series in his honour. Named the Hennessy Archaeology Occasional Lecture Series the aim is to invite prominent archaeologists in their fields to speak on their research and findings.<br /> <br /></span></a></p>
</div>
<p style="text-align: center;">J. B. Hennessy in Jordan</p>
</td>
</tr>

HTML:

I have had to change the position values for each code because the second one aligned the text relative to the image being moused-over while the first was relative to the page.

Could someone please help me understand where I am going wrong with these two codes and why they are working fine on some browsers and not at all on other. Any help to fix the problem would be greatly appreciated.

Cheers,

 

If anyone could help me with this it would be much appreciated as I am lost as to what I have done wrong.

Cheers

 

this may be compatibility issue. insert compatible tag for IE.

 

do u have to do this w/ every browser that you would like for it to be compatible w/?

 

@you-me's response is pure garbage. Especially since he doesn't define what a "compatible tag for IE" is.
@drelude - Only IE is so inept and incompetent that it has special commands just to fix it. You don't need anything like that for any other browser.

 

Compatibility tags aren't needed for IE either if you're competent. It's for people who's pages completely die if someone using IE8 or IE9 but set to "IE7 mode" visits the page, because apparently they didn't bother building the page for IE7 properly in the first place (if IE7 can see the page, then who cares what users of IE8 or 9 have their browsers set to? They'll just see the same degraded page as IE7 users. Their choice).

Pirri:

<div id="links">
<p style="text-align: center;"><a class="info" href="#"><img title="Hennessey Photo" src="/humanities/archpal/multimedia/virtualcollection/hennesseyphoto.jpg" alt="" width="340" /><span>
<h3>text</h3><br /> <br /> <br /><br /> <br /></span></a></p>
</div>

Code (markup):

This is what validators are for. Your code is trying to do weird things that are not possible according to the rules. Namely, that you're trying to wrap a span around blocks. Unfortunately this means your headers can't be headers anymore. Or, you can abandon IE6 and have something working via CSS, but nowadays this is usually a job for Javascript.

How to get something that works but not in IE6:

<a id="info" href="somewhere"><img src="/humanities/archpal/multimedia/virtualcollection/hennesseyphoto.jpg" alt="Hennessey Photo" height="something" width="340" /></a>
<div class="links">
  <h3>text</h3>
  <p>blah blah blah...</p>
  <p>blah blah blah...</p>
  <p>blah blah blah...</p>
</div>

Code (markup):

Where you could

.links {
  display: none;
}
#info:hover + div, #info:focus + div {
  display: block;
}

Code (markup):

I don't like this for many reasons: the "loose" anchor sitting next to a block, even if you make it display: block (which I would if you do this), makes IE hiss and spit sometimes.
I especially don't like the display: none by default. It's unfriendly to screen reader users (who in order to get to the div have to leave the anchor, which then sets the div back to display: none unless they are in flat-review/SayAll mode...) and it makes the browser have to do a redraw to take something not displayed by default and adding it to the document flow from scratch.

If you really only want to hit :hover, you could solve the loose anchor problem:

<p id="info">
  <img src="/humanities/archpal/multimedia/virtualcollection/hennesseyphoto.jpg" alt="Hennessey Photo" height="something" width="340" />
</p>

Code (markup):

then

#info:hover + div {display: block;}

Code (markup):

You could try
.links {
position: absolute;
left: -999em;
}
and
#info:hover+div {position: static;}
to avoid the display: none issue, but it's still hacky.


To do it more appropriately I still favour Javascript, even though HTML5 would allow you to wrap an anchor around a div (an inline around a block element, forbidden in older forms of HTML), it's still buggy in many browsers.