Can't get tooltips <span> to scroll in IE6

My tooltip span tags seem to work fine except in IE6. I’d be grateful if anyone knows a workaround to get IE6 to scroll properly:
the page is www.profesornativo.com/relative_clauses_2.htm
Everything on the page scrolls vertically, except the tooltip section.
Her is some relevant code:


<style type="text/css">
/*<![CDATA[*/

<!-- 





a:link img {
border-style : none; 
} 
body {
margin : 0; 
padding : 0; 

color : white; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : medium; 
background-image:url(background.jpg);
background-attachment:fixed;
 background: url(background.jpg) fixed;

} 

etc...

.tooltip {
cursor:default; /*turn off cursor applied by above css*/.
position:relative;
}
.tooltip span {
position:absolute;
top:0;
left:0;
}
.tooltip:hover span {
position:absolute;
top:0px;
left : 450px;


a.tooltip:hover {
cursor:help;/*.a cursor must be set for ie6 (including cursor:default)*/
z-index:99; /*set here because ie needs a.tooltip:hover, but opera ignores it */

.scroll{

margin : auto;
background : #ffffff;
color : #333333; 
width: 570px;
padding  : 12px;

font-size : 12px; 
border: 0px solid #cccccc; 
line-height : 40px;
text-align : justify; 

}

and HTML:


<div class= "scroll">
<br/>


<a href="#" class="tooltip"><span>who</span> 
My boss, _______ is American, drives a BMW. </a>

<br/>
<a href="#" class="tooltip"><span>that/which </span>
This is the film __________ I told you about</a>
<br/>
<a href="#" class="tooltip"><span>which</span>
He was born in Dublin, ___________ is the capital.</a>
<br/>
<a href="#" class="tooltip"><span> whose</span>
That's the man ___________ wife is a lawyer. </a>
<br/>
<a href="#" class="tooltip"><span>which</span> 
The idea, __________ was very original, has been accepted.</a>
<br/>
<a href="#" class="tooltip"><span>
whom</span> 
He's the man to ___________ I sold my car.</a>

<br/>
<a href="#" class="tooltip"><span>
who</span>
My firend, __________ is from Italy, has found a new job.</a>
<br/>
<a href="#" class="tooltip"><span>
that/which</span>
I really enjoyed the dinner ___________ you cooked yesterday.</a>
<br/>
<a href="#" class="tooltip"><span> where</span>
The shop ____________ I bought my shoes has closed down.</a>

</div>

Thanks.

Hm, I dunno, however I want to ask if IE7 is the same?

I made a site which had a horizontal scrolling box with overflow: auto on it. It’s a horizontal site. Anyway, for whatever reason, IE6 and 7 (but not 8) treated every element in the scroll box who had any positioning on it (both relative and absolute) like position: fixed. It just said entirely on the screen, meaning I could not do tooltips like this, and could not do things like Gilder-Levin image replacement either. It’s really limiting!

See if IE7 is also doing this, because I’m not 100% sure this is the problem but that “scroll” box caught my eye and made me think of the problems I had with scroll boxes in IE.

I also never really found a solution, though likely there’s a JS for it (if I had tooltips like in your example though, I’d use title attributes in the anchors instead… those’ll scroll.

Everything works correctly in IE 8, Opera and Firefox but I don’t know for sure about IE 7. Do you think modifying these lines, it would work in IE? How?


<a href="#"  class="tooltip">Communicative Method<span>Speaking and listening practice.</span> </a> 

Thanks

You mean switching the order of anchor text and the span?

Never hurts to try but I’m thinking it won’t make a bit of difference. But I’m often wrong : )

If this problem is what I think it is, there really isn’t a solution. In fact, I’ve heard of people using a scroll box set-up specifically to make IE6 imitate position: fixed, which it doesn’t actually support.

You might possibly have to do the whole scrollbox differently for IE6 and 7. I mean, using something that looks like a scrollbox but isn’t, or using something else for the tooltips. I’m still thinking you might want to use the title attribute for IE and css tooltips for modern browsers.

Otherwise I’m all outta ideas. : (

Actually, on my index.html page, I dont have the scrolling problem in IE6, and it also uses a tooltip.Unfortunately; just now I don’t have access to IE6, till after the holidays. I don’t suppose you have IE6 ;o)

Actually, I do… I have a native one and a Tredosoft one.

I can prolly check the page out in more depth over the weekend… so far I was only looking at your code you posted here (since normally I’m on Linux).

I can also check IE7.

I made some changes, basically copying most of my index.html page, and rebuilding. It scrolls properly in 1E 8, Firefox and Opera. It would be great if you could check it in IE 6 and IE 7 (esp. the vertical scrolling of the tooltips - the original problem was that everything scrolled except the tooltips) .
This is the page: www.profesornativo.com/tooltip_test.htm
Thanks (and a very happy and Christian Christmas!)

So this page http://www.profesornativo.com/tooltip_test.htm is working correctly
while this page http://www.profesornativo.com/relative_clauses_2.htm is broken?

(in IE6)

right?

.tooltip { position:relative; }

anything that is positioned, will be stopped from scrolling.

this only affects old IE as it is a sideffect of
iehackjfk.css


html {
    overflow: hidden;
}


body {
    height: 100&#37;;
    overflow: auto;
}

you have 2 options now:

  1. keep supporting IE6 and work without ANY positioning in the content.
  2. remove the IE6 fix and work with content as normal.

I can help with both, but i need to know which path you will choose.

I use this to test IE6 http://www.my-debugbar.com/wiki/IETester/HomePage

:slight_smile:

The thing is that just now I don’t have access to IE6, so I can’t be sure if http://www.profesornativo.com/tooltip_test.htm is scrolling correctly in IE6. Yes, the other page www.profesornativo.com/relative_clauses_2.htm - I haven’t got round to changing it yet. First I would like to find out if the http://www.profesornativo.com/tooltip_test.htm page is scrolling in IE6 and IE7. Oh…I will try that IE6 tester. Thanks!

I see you have got the info you need now. :slight_smile:

But I think you should use the auto position option on the tooltip spans and place them where you want them according to the flow. Here is a stand alone example from your code also working in IE6:

<!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" xml:lang="en" lang="en">
<head>
<title>Profesor Nativo Ingl&#233;s / Native English Teacher</title>
<style type="text/css">
.scroll {
	position: relative;
	margin: auto;
	padding: 12px;
	width: 570px;
	height: 100px;
	overflow: auto;
	font-size: 12px;
	font-family: Verdana, Georgia, sans-serif;
	text-align: left;
}
.tooltip {
	margin: 15px 0;
	display: block;
	position: relative;
	color: #000;
	text-decoration: none;
}
.tooltip:hover {
	visibility: visible;
	color: #009;
}
.tooltip span {
	position: absolute;
	margin-left: -9999px;
	padding:0 6px;
	color: #090;
	font-weight: bold;
}
.tooltip:hover span {
	margin-left:0;
}
</style>
</head>
<body>

<div class= "scroll">
	<a href="#" class="tooltip">My boss, _<span>who</span>______ is American, drives a BMW. </a>
	<a href="#" class="tooltip">This is the film <span>that/which </span>__________ I told you about</a>
	<a href="#" class="tooltip">He was born in Dublin, __<span>which</span>_________ is the capital.</a>
	<a href="#" class="tooltip">That's the man _<span> whose</span>__________ wife is a lawyer. </a>
	<a href="#" class="tooltip">The idea, _<span>which</span>_________ was very original, has been accepted.</a>
	<a href="#" class="tooltip">He's the man to _<span>whom</span>__________ I sold my car.</a>
	<a href="#" class="tooltip">My firend, _<span>who</span>_________ is from Italy, has found a new job.</a>
	<a href="#" class="tooltip">I really enjoyed the dinner <span>that/which</span>___________ you cooked yesterday.</a>
	<a href="#" class="tooltip">The shop _<span> where</span>___________ I bought my shoes has closed down.</a>
</div>
 
</body>
</html>


.scroll {
position: relative;
}

is this taking the iefixes.css into account?
i could not get the positioning to work correctly no matter what i tried, any set position breaks it in IE6.

[QUOTE=YuriKolovsky;]is this taking the iefixes.css into account?
i could not get the positioning to work correctly no matter what i tried, any set position breaks it in IE6.[/QUOTE]If you paste my posted code into OP linked code the IE fixes are not needed.

But maybe I totally missed what the scrolling problem is about? :slight_smile:

Here is the same code, but adapted for a list as the link-container, working together with OP linked code.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Profesor Nativo Ingl&#233;s / Native English Teacher</title>
<meta name="description" content="Aprende ingl&#233;s rapidamente con un profesor nativo y experimentado. Clases particulares y en grupos peque&#241;os para adultos, ni&#241;os y empresas." />
<meta name="keywords" content="profesor nativo ingles Dublin, native English teacher Dublin, gram&#225;tica, clases particulares, private classes, experimentado, " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="" />
<meta name="Author-email" content="jkbcn@hotmail.com" />
<meta name="ROBOTS" content="ALL" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="30 days" />
<meta name="copyright" content="2005" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="language" content="English" />
<meta name="TOC" content="purl=;title=index.cfm" />
<meta name="robots" content="ALL" />
<meta name="rating" content="General" />
<!--#include virtual="/meta/index.txt"-->


<!--
<link href="/border.css" rel="stylesheet" type="text/css" />
-->
<style type="text/css">
/*<![CDATA[*/
<!-- 
/* content of "/border.css" */
a:link img
{
  border-style: none;
}
-->
/*]]>*/
</style>


<!--
<link rel="stylesheet" href="idioms_3.css" />
-->
<style type="text/css">
/*<![CDATA[*/
<!--
/* content of "idioms_3.css" */
/*********************** removed css

.tooltip { position:relative; z-index:24;
      text-decoration : none;
 
}
.tooltip span { display: none;
}
.tooltip:hover {z-index:25;
height : 0px;
width: auto;}
.tooltip:hover span {
display:inline;
position:absolute;

bottom : 15px;
 text-align : center;
   left : 100px;

width: auto;
     line-height : 25px;
background-color:#ffffff;
border:1px solid #333333;
padding-left:6px;
padding-right:6px;
padding-top:0px;
padding-bottom:0px;
font-size:12px;
font-weight : bold;
color:#000000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align : center;
}

***********************/
/********************** suggested css */
#content .tooltip { /* added specificity to override the later rules for the scroll class */
	position: relative;
	font: 12px/1.2 Verdana, Geneva, sans-serif;
	list-style: none;
}
.tooltip a {
	position: relative;
	clear: left;
	float: left;
	margin: 7px 0;
	color: #000;
	text-decoration: none;
}
.tooltip a:hover {
	visibility: visible;
	color: #009;
	cursor:help;
}
.tooltip a span {
	position: absolute;
	margin-left: -9999px;
	padding:0 6px;
	color: #090;
	font-weight: bold;
}
.tooltip a:hover span {
	margin-left:0;
}
-->
/*]]>*/
</style>

<!-- the embedded css -->
<style type="text/css">
/*<![CDATA[*/
<!-- 
a:link img {
border-style : none; 
} 
body {
margin : 0; 
padding : 0; 
color : white; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : medium; 
background-image:url(background.jpg);
background-attachment:fixed;
 background: url(background.jpg) fixed;
} 
.invisible {
display : none; 
} 
#fixed {
font-size : 13px; 
position : absolute; 
top : 0; 
background-image:url(background.jpg);
margin-left: auto; 
margin-right: auto; 
width : 13em; 
padding-left : 18px;
padding-top :12px;
padding-bottom :20px;
color : #006600; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
text-align : left; 
border : 0px black solid;
} 
body > #fixed {
    position: fixed;
}
#content {
margin-left : 17.6em; 
margin-right : auto; 
padding-top : 1em; 
padding-bottom : 1px; 
padding-left : 1px;
padding-right : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
font-weight : normal; 
line-height : 1.5; 
text-align : center; 
background : #ffffff; 
color : #000000; 
width : 632px; 
} 
h1 {
font-size : 1em; 
text-align : center; 
margin : auto; 
background : #eeeeee; 
color : #006600; 
width : 140px; 
} 
h2 {
font-size : 10px; 
text-align : center; 
margin : auto; 
background : #ffffff; 
color : #000000; 
width : auto; 
font-weight : normal; 
padding-left : 2px;
} 
h3 {
margin : auto; 
text-align : center; 
font-size : 13px; 
width : 280px; 
padding : 4px; 
font-weight : normal; 
background : #ffffff; 
color : #000000; 
font-style : normal; 
} 
h4 {
text-align : center; 
font-size : 12px; 
font-weight : bold; 
margin-top : 12px; 
margin-bottom : 0; 
padding-top : 0; 
color : #333399;  
} 
h5 {
text-align : left; 
font-size : 1.2em; 
font-weight : bold; 
margin-top : 12px; 
margin-bottom : 0; 
padding-top : 0; 
} 
h6 {
text-align : center; 
font-size : 12px; 
font-weight : normal; 
color :#333399; 
background : #ffffff;
margin-top : 16px; 
margin-bottom : 0; 
padding-top : 0; 
} 
a:link {
outline: none;
color : #0066cc; 
text-decoration : none; 
} 
a:visited {
outline: none;
color :  #0066cc; 
} 
a:active {
color :  #0066cc; 
} 
a:hover {
color :#000066;
text-decoration : none; 
} 
a {
text-decoration : none; 
} 
#fixed a {
color: #000099;
padding-top: 3px;
margin : auto;
padding-bottom: 3px;
padding-right: 10px;
width: 112px;
text-align : left;
text-decoration: none;
font-size : 11px;
font-weight : normal;
} 
#fixed a:hover {
color: #6699cc;
font-weight : normal;
} 
#ffixed a {
color: #fffccc;
padding-top: 3px;
padding-bottom: 3px;
width: 112px;
text-align : left;
text-decoration: none;
background: #ffcc00;
font-size : 11px;
font-weight : normal;
} 
#ffixed a:hover {
background:#ffffff;
color:#ffffff;
} 
div.address {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 9px; 
text-align : center;  
color : #000033;
border-top : 0px solid #cccccc; 
width : auto;
margin: 0 auto;
font-weight : normal;
} 
div.address img {
border : 0; 
text-align : center; 
} 
.wrap {
width : 780px; 
height : 100&#37;;
} 
.scroll{
margin : auto;
background : #ffffff;
color : #333333; 
width: 570px;
padding  : 12px;
font-size : 12px; 
border: 0px solid #cccccc; 
line-height : 40px;
text-align : justify; 
}
LI.list1 {
list-style : disc; 
color : black; 
background : #ffffff; 
} 
LI.list2 {
list-style : square inside; 
color : black; 
background : #ffffff; 
} 
.blacktext {
color : #333399; 
background : #ffffff; 
font-weight : normal;
} 
.title1 {
margin : auto; 
background : #ffffff; 
color : #333399;  
width : auto; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 14px; 
font-weight : bold; 
text-align : center; 
} 
.title2 {
margin : auto; 
background : #ffffff; 
color : #000099; 
width : 399px; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 16px; 
font-weight : bold; 
text-align : center; 
overflow : auto; 
} 
.title3 {
margin : auto; 
background : #ffffff; 
color : #000000; 
width : 399px; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 13px; 
font-weight : bold; 
text-align : center; 
overflow : auto; 
} 
img
{
border-style: none;
vertical-align:middle;
margin-left : auto;
margin-right : auto;
padding-bottom : 4px;
}
#c3 
a:link {
background-color : #ffffff; 
color : #3399ff; 
text-decoration : none; 
} 
#c3 a:visited {
background-color : #ffffff; 
color :   #3399ff; 
} 
#c3 a:active {
outline : none;
background-color : #ffffff; 
color :   #3399ff; 
} 
#c3 a:hover {
background-color : #ffffff; 
color :  #cccccc; 
text-decoration : none; 
} 
#c3 a {
text-decoration : none; 
outline : none;
} 
.em {
color : blue;
font-size : 14px;
font-weight : bold;
}
.w3  {
     position : absolute;
     left : 18px;
     width : 140px;
text-decoration : none; 
outline : none;
padding-left : 0px;
margin-left : 40px;
margin-right : 0px;
margin-top : 14px;
    border : 0px solid #000000; 
} 
#logo  {
text-decoration : none; 
outline : none;
padding-left : 30px;
margin-left : 0px;
margin-right : 0;
margin-top : 14px;
position: absolute;
bottom : 4px;
} 
form table {margin: 0 auto;}
-->
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
<!-- 
 h4.c2 {text-align: center}
 h3.c1 {text-align: center} 
-->
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
<!-- 
#txt{
border:none;
font-family:verdana;
font-size:14px;
font-weight:bold;
background : #ffffff;
border: 0px solid #cccccc; 
color : #ff3300;
text-align : center;
width : 53px;
}
-->
/*]]>*/
</style>


<!--[if IE 6]>
<!--
<link rel="stylesheet" href="iehackjfk.css" type="text/css" />
-->
<style type="text/css">
/*********************** content of "iehackjfk.css"
html {
	overflow: hidden;
}
	body {
	height: 100%;
	overflow: auto;
}
***********************/
</style>
<![endif]-->


<!--[if lte IE 6 ]>
<style type="text/css">
/********************** embedded css
.tooltip {
	cursor:default;
	position:relative;
}
a.tooltip:hover {
cursor:help;
 z-index:99;
}
.tooltip span {
	position:absolute;
	top:0;
	left:0;
}
.tooltip:hover span {
	position:absolute;
	top:0px;
	left : 450px;
}
**********************/
</style>
<![endif]-->

</head>
<body>

<div class="wrap">
	<div id="content">
		<div class= "title1">
			<br />
			Relative clauses 2
			<br /><br />
			To see answers, click the questions!
			<br /><br /><br />
		</div>
		<h4>Complete the sentences :<br /><br /> who / that / which / whose / whom / where</h4>


		<ul class="scroll tooltip"> <!-- suggesting a list for the questions instead of a div with links separated by line-breaks -->
			<li><a href="#">My boss, _<span>who</span>______ is American, drives a BMW. </a></li>
			<li><a href="#">This is the film <span>that/which </span>__________ I told you about</a></li>
			<li><a href="#">He was born in Dublin, __<span>which</span>_________ is the capital.</a></li>
			<li><a href="#">That's the man __<span> whose</span>_________ wife is a lawyer. </a></li>
			<li><a href="#">The idea, __<span>which</span>________ was very original, has been accepted.</a></li>
			<li><a href="#">He's the man to __<span>whom</span>_________ I sold my car.</a></li>
			<li><a href="#">My firend, __<span>who</span>________ is from Italy, has found a new job.</a></li>
			<li><a href="#">I really enjoyed the dinner <span>that/which</span>___________ you cooked yesterday.</a></li>
			<li><a href="#">The shop __<span> where</span>__________ I bought my shoes has closed down.</a></li>
		</ul>


		<br />
		<div class= "em">
			<a href="exercises.htm" ><em>More exercises! </em></a> 
		</div>
		<br /><br /><br />
		<h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
		<!-- SiteSearch Google -->
		<form method="get" action="http://www.google.com/search">
			<table border="0">
				<tr>
					<td  valign="top" >
						<input type="hidden" name="domains" value="http://www.elise.com" />
						<input type="hidden" name="client" value="pub-5527714554151844" />
						<input type="hidden" name="forid" value="1" />
						<input type="hidden" name="ie" value="ISO-8859-1" />
						<input type="hidden" name="oe" value="ISO-8859-1" />
						<input type="hidden" name="safe" value="active" />
						<input type="hidden" name="cof" value="GALT:#660000;GL:1;DIV:#999999;VLC:336633;AH:center;BGC:FFFFFF;LBGC:993300;ALC:003366;LC:003366;T:000000;GFNT:666666;GIMP:666666;FORID:1;" />
						<input type="text" name="q" size="22" maxlength="255" value="" />
						<a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_25wht.gif"  alt="Google" /></a>
						<input type="submit" style="padding : 4px; vertical-align: top" name="sa" value="Search" />
					</td>
				</tr>
		</table>
		</form>
		<div class="address">
			<br />
			John Kelly &copy; 2006 
		</div>
	</div>
</div>

<div id="fixed">
	&nbsp; <img src="nat.gif" width="144" height="145" alt="" />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="test.htm" > Free Level Test</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="exercises.htm"> Free Exercises</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="index.html"> Main page</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="mailto" href="mailto:john@profesornativo.com" >Contact me</a>
	<br /><br /><br /><br /><br /><br /><br />  <br /><br />  <br />    <br /> 
	<div class="w3">
		<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">  <img style="width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>
  </div>
</div>

</body>
</html>

your version scrolls in IE7-8 and the modern browsers, it does not scroll (ie fixed position navigation) in IE6
removing the iefix would have been enough to achieve what you have above (but you code is obviously leaner), the purpose of the IE fix was to imitate position:fixed in IE6
which was not affecting the tooltips as they had position:relative (so they did not move just like the navigation, as you scroll down)

your fix suggests:

  1. remove the IE6 fix and work with content as normal.

Thank you for your kind explanation, sorry I missed the problem, thought it was mended in the tool_tip_test link. :slight_smile:

This IE6 fix should work as OP want, implemented it in my last posted code:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Profesor Nativo Ingl&#233;s / Native English Teacher</title>
<meta name="description" content="Aprende ingl&#233;s rapidamente con un profesor nativo y experimentado. Clases particulares y en grupos peque&#241;os para adultos, ni&#241;os y empresas." />
<meta name="keywords" content="profesor nativo ingles Dublin, native English teacher Dublin, gram&#225;tica, clases particulares, private classes, experimentado, " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="" />
<meta name="Author-email" content="jkbcn@hotmail.com" />
<meta name="ROBOTS" content="ALL" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="30 days" />
<meta name="copyright" content="2005" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="language" content="English" />
<meta name="TOC" content="purl=;title=index.cfm" />
<meta name="robots" content="ALL" />
<meta name="rating" content="General" />
<!--#include virtual="/meta/index.txt"-->


<!--
<link href="/border.css" rel="stylesheet" type="text/css" />
-->
<style type="text/css">
/*<![CDATA[*/
<!-- 
/* content of "/border.css" */
a:link img
{
  border-style: none;
}
-->
/*]]>*/
</style>


<!--
<link rel="stylesheet" href="idioms_3.css" />
-->
<style type="text/css">
/*<![CDATA[*/
<!--
/* content of "idioms_3.css" */
/*********************** removed css 

.tooltip { position:relative; z-index:24;
      text-decoration : none;
 
}
.tooltip span { display: none;
}
.tooltip:hover {z-index:25;
height : 0px;
width: auto;}
.tooltip:hover span {
display:inline;
position:absolute;

bottom : 15px;
 text-align : center;
   left : 100px;

width: auto;
     line-height : 25px;
background-color:#ffffff;
border:1px solid #333333;
padding-left:6px;
padding-right:6px;
padding-top:0px;
padding-bottom:0px;
font-size:12px;
font-weight : bold;
color:#000000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align : center;
}

***********************/
/********************** suggested css */
#content .tooltip { /* added specificity to override the later rules for the scroll class */
	position: relative;
	font: 12px/1.2 Verdana, Geneva, sans-serif;
	list-style: none;
}
.tooltip a {
	position: relative;
	clear: left;
	float: left;
	margin: 7px 0;
	color: #000;
	text-decoration: none;
}
.tooltip a:hover {
	visibility: visible;
	color: #009;
	cursor:help;
}
.tooltip a span {
	position: absolute;
	margin-left: -9999px;
	padding:0 6px;
	color: #090;
	font-weight: bold;
}
.tooltip a:hover span {
	margin-left:0;
}
-->
/*]]>*/
</style>

<!-- the embedded css -->
<style type="text/css">
/*<![CDATA[*/
<!-- 
a:link img {
border-style : none; 
} 
body {
margin : 0; 
padding : 0; 
color : white; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : medium; 
background-image:url(background.jpg);
background-attachment:fixed;
 background: url(background.jpg) fixed;
} 
.invisible {
display : none; 
} 
#fixed {
font-size : 13px; 
position : absolute; 
top : 0; 
background-image:url(background.jpg);
margin-left: auto; 
margin-right: auto; 
width : 13em; 
padding-left : 18px;
padding-top :12px;
padding-bottom :20px;
color : #006600; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
text-align : left; 
border : 0px black solid;
} 
body > #fixed {
    position: fixed;
}
#content {
margin-left : 17.6em; 
margin-right : auto; 
padding-top : 1em; 
padding-bottom : 1px; 
padding-left : 1px;
padding-right : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
font-weight : normal; 
line-height : 1.5; 
text-align : center; 
background : #ffffff; 
color : #000000; 
width : 632px; 
} 
h1 {
font-size : 1em; 
text-align : center; 
margin : auto; 
background : #eeeeee; 
color : #006600; 
width : 140px; 
} 
h2 {
font-size : 10px; 
text-align : center; 
margin : auto; 
background : #ffffff; 
color : #000000; 
width : auto; 
font-weight : normal; 
padding-left : 2px;
} 
h3 {
margin : auto; 
text-align : center; 
font-size : 13px; 
width : 280px; 
padding : 4px; 
font-weight : normal; 
background : #ffffff; 
color : #000000; 
font-style : normal; 
} 
h4 {
text-align : center; 
font-size : 12px; 
font-weight : bold; 
margin-top : 12px; 
margin-bottom : 0; 
padding-top : 0; 
color : #333399;  
} 
h5 {
text-align : left; 
font-size : 1.2em; 
font-weight : bold; 
margin-top : 12px; 
margin-bottom : 0; 
padding-top : 0; 
} 
h6 {
text-align : center; 
font-size : 12px; 
font-weight : normal; 
color :#333399; 
background : #ffffff;
margin-top : 16px; 
margin-bottom : 0; 
padding-top : 0; 
} 
a:link {
outline: none;
color : #0066cc; 
text-decoration : none; 
} 
a:visited {
outline: none;
color :  #0066cc; 
} 
a:active {
color :  #0066cc; 
} 
a:hover {
color :#000066;
text-decoration : none; 
} 
a {
text-decoration : none; 
} 
#fixed a {
color: #000099;
padding-top: 3px;
margin : auto;
padding-bottom: 3px;
padding-right: 10px;
width: 112px;
text-align : left;
text-decoration: none;
font-size : 11px;
font-weight : normal;
} 
#fixed a:hover {
color: #6699cc;
font-weight : normal;
} 
#ffixed a {
color: #fffccc;
padding-top: 3px;
padding-bottom: 3px;
width: 112px;
text-align : left;
text-decoration: none;
background: #ffcc00;
font-size : 11px;
font-weight : normal;
} 
#ffixed a:hover {
background:#ffffff;
color:#ffffff;
} 
div.address {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 9px; 
text-align : center;  
color : #000033;
border-top : 0px solid #cccccc; 
width : auto;
margin: 0 auto;
font-weight : normal;
} 
div.address img {
border : 0; 
text-align : center; 
} 
.wrap {
width : 780px; 
height : 100&#37;;
} 
.scroll{
margin : auto;
background : #ffffff;
color : #333333; 
width: 570px;
padding  : 12px;
font-size : 12px; 
border: 0px solid #cccccc; 
line-height : 40px;
text-align : justify; 
}
LI.list1 {
list-style : disc; 
color : black; 
background : #ffffff; 
} 
LI.list2 {
list-style : square inside; 
color : black; 
background : #ffffff; 
} 
.blacktext {
color : #333399; 
background : #ffffff; 
font-weight : normal;
} 
.title1 {
margin : auto; 
background : #ffffff; 
color : #333399;  
width : auto; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 14px; 
font-weight : bold; 
text-align : center; 
} 
.title2 {
margin : auto; 
background : #ffffff; 
color : #000099; 
width : 399px; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 16px; 
font-weight : bold; 
text-align : center; 
overflow : auto; 
} 
.title3 {
margin : auto; 
background : #ffffff; 
color : #000000; 
width : 399px; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 13px; 
font-weight : bold; 
text-align : center; 
overflow : auto; 
} 
img
{
border-style: none;
vertical-align:middle;
margin-left : auto;
margin-right : auto;
padding-bottom : 4px;
}
#c3 
a:link {
background-color : #ffffff; 
color : #3399ff; 
text-decoration : none; 
} 
#c3 a:visited {
background-color : #ffffff; 
color :   #3399ff; 
} 
#c3 a:active {
outline : none;
background-color : #ffffff; 
color :   #3399ff; 
} 
#c3 a:hover {
background-color : #ffffff; 
color :  #cccccc; 
text-decoration : none; 
} 
#c3 a {
text-decoration : none; 
outline : none;
} 
.em {
color : blue;
font-size : 14px;
font-weight : bold;
}
.w3  {
     position : absolute;
     left : 18px;
     width : 140px;
text-decoration : none; 
outline : none;
padding-left : 0px;
margin-left : 40px;
margin-right : 0px;
margin-top : 14px;
    border : 0px solid #000000; 
} 
#logo  {
text-decoration : none; 
outline : none;
padding-left : 30px;
margin-left : 0px;
margin-right : 0;
margin-top : 14px;
position: absolute;
bottom : 4px;
} 
form table {margin: 0 auto;}
-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
<!-- 
 h4.c2 {text-align: center}
 h3.c1 {text-align: center} 
-->
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
<!-- 
#txt{
border:none;
font-family:verdana;
font-size:14px;
font-weight:bold;
background : #ffffff;
border: 0px solid #cccccc; 
color : #ff3300;
text-align : center;
width : 53px;
}
-->
/*]]>*/
</style>


<!--[if IE 6]>
<!--
<link rel="stylesheet" href="iehackjfk.css" type="text/css" />
-->
<style type="text/css">
/*********************** removed content of "iehackjfk.css"
html {
	overflow: hidden;
}
	body {
	height: 100%;
	overflow: auto;
}
***********************/
/*********************** suggested css */[COLOR="Red"]
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
.wrap {
	position:relative;
	float: right;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#fixed {
	clear: both;
	position: absolute;
	top: 0;
	left: 0;
}[/COLOR]
</style>
<![endif]-->


<!--[if lte IE 6 ]>
<style type="text/css">
/********************** removed embedded css
.tooltip {
	cursor:default;
	position:relative;
}
a.tooltip:hover {
cursor:help;
 z-index:99;
}
.tooltip span {
	position:absolute;
	top:0;
	left:0;
}
.tooltip:hover span {
	position:absolute;
	top:0px;
	left : 450px;
}
**********************/
</style>
<![endif]-->

</head>
<body>

<div class="wrap">
	<div id="content">
		<div class= "title1">
			<br />
			Relative clauses 2
			<br /><br />
			To see answers, click the questions!
			<br /><br /><br />
		</div>
		<h4>Complete the sentences :<br /><br /> who / that / which / whose / whom / where</h4>


		<ul class="scroll tooltip"> <!-- suggesting a list for the questions instead of a div with links separated by line-breaks -->
			<li><a href="#">My boss, _<span>who</span>______ is American, drives a BMW. </a></li>
			<li><a href="#">This is the film <span>that/which </span>__________ I told you about</a></li>
			<li><a href="#">He was born in Dublin, __<span>which</span>_________ is the capital.</a></li>
			<li><a href="#">That's the man __<span> whose</span>_________ wife is a lawyer. </a></li>
			<li><a href="#">The idea, __<span>which</span>________ was very original, has been accepted.</a></li>
			<li><a href="#">He's the man to __<span>whom</span>_________ I sold my car.</a></li>
			<li><a href="#">My firend, __<span>who</span>________ is from Italy, has found a new job.</a></li>
			<li><a href="#">I really enjoyed the dinner <span>that/which</span>___________ you cooked yesterday.</a></li>
			<li><a href="#">The shop __<span> where</span>__________ I bought my shoes has closed down.</a></li>
		</ul>


		<br />
		<div class= "em">
			<a href="exercises.htm" ><em>More exercises! </em></a> 
		</div>
		<br /><br /><br />
		<h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
		<!-- SiteSearch Google -->
		<form method="get" action="http://www.google.com/search">
			<table border="0">
				<tr>
					<td  valign="top" >
						<input type="hidden" name="domains" value="http://www.elise.com" />
						<input type="hidden" name="client" value="pub-5527714554151844" />
						<input type="hidden" name="forid" value="1" />
						<input type="hidden" name="ie" value="ISO-8859-1" />
						<input type="hidden" name="oe" value="ISO-8859-1" />
						<input type="hidden" name="safe" value="active" />
						<input type="hidden" name="cof" value="GALT:#660000;GL:1;DIV:#999999;VLC:336633;AH:center;BGC:FFFFFF;LBGC:993300;ALC:003366;LC:003366;T:000000;GFNT:666666;GIMP:666666;FORID:1;" />
						<input type="text" name="q" size="22" maxlength="255" value="" />
						<a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_25wht.gif"  alt="Google" /></a>
						<input type="submit" style="padding : 4px; vertical-align: top" name="sa" value="Search" />
					</td>
				</tr>
		</table>
		</form>
		<div class="address">
			<br />
			John Kelly &copy; 2006 
		</div>
	</div>
</div>

<div id="fixed">
	&nbsp; <img src="nat.gif" width="144" height="145" alt="" />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="test.htm" > Free Level Test</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="exercises.htm"> Free Exercises</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="index.html"> Main page</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="mailto" href="mailto:john@profesornativo.com" >Contact me</a>
	<br /><br /><br /><br /><br /><br /><br />  <br /><br />  <br />    <br /> 
	<div class="w3">
		<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">  <img style="width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>
  </div>
</div>

</body>
</html>


Discovered a few errors when I was about to delete the local code. Glad I did. :slight_smile:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Profesor Nativo Inglés / Native English Teacher</title>
<meta name="description" content="Aprende inglés rapidamente con un profesor nativo y experimentado. Clases particulares y en grupos pequeños para adultos, niños y empresas." />
<meta name="keywords" content="profesor nativo ingles Dublin, native English teacher Dublin, gramática, clases particulares, private classes, experimentado, " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="" />
<meta name="Author-email" content="jkbcn@hotmail.com" />
<meta name="ROBOTS" content="ALL" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="30 days" />
<meta name="copyright" content="2005" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="language" content="English" />
<meta name="TOC" content="purl=;title=index.cfm" />
<meta name="robots" content="ALL" />
<meta name="rating" content="General" />
<!--#include virtual="/meta/index.txt"-->


<!--
<link href="/border.css" rel="stylesheet" type="text/css" />
-->
<style type="text/css">
/*<![CDATA[*/
<!-- 
/* content of "/border.css" */
a:link img
{
  border-style: none;
}
-->
/*]]>*/
</style>


<!--
<link rel="stylesheet" href="idioms_3.css" />
-->
<style type="text/css">
/*<![CDATA[*/
<!--
/* content of "idioms_3.css" */
/*********************** removed css 

.tooltip { position:relative; z-index:24;
      text-decoration : none;
 
}
.tooltip span { display: none;
}
.tooltip:hover {z-index:25;
height : 0px;
width: auto;}
.tooltip:hover span {
display:inline;
position:absolute;

bottom : 15px;
 text-align : center;
   left : 100px;

width: auto;
     line-height : 25px;
background-color:#ffffff;
border:1px solid #333333;
padding-left:6px;
padding-right:6px;
padding-top:0px;
padding-bottom:0px;
font-size:12px;
font-weight : bold;
color:#000000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align : center;
}

***********************/
/********************** suggested css */
.tooltip {
	position: relative;
/*	margin: 0; /* ul reset for IE */
/*	padding: 0; /* ul reset for others */
	overflow: hidden; /* contained float clearing */
	font: 12px/1.2 Verdana, Geneva, sans-serif; /* removed the later font rules for the scroll class */
	list-style: none;
}
.tooltip a {
	position: relative;
	clear: left;
	float: left;
	margin: 13px 0;
	color: #000;
	text-decoration: none;
}
.tooltip a:hover {
	visibility: visible;
	color: #009;
	cursor:help;
}
.tooltip a span {
	position: absolute;
	margin-left: -9999px;
	padding:0 6px;
	color: #090;
	font-weight: bold;
}
.tooltip a:hover span {
	margin-left:0;
}
-->
/*]]>*/
</style>

<!-- the embedded css -->
<style type="text/css">
/*<![CDATA[*/
<!-- 
a:link img {
border-style : none; 
} 
body {
margin : 0; 
padding : 0; 
color : white; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : medium; 
background-image:url(background.jpg);
background-attachment:fixed;
 background: url(background.jpg) fixed;
} 
.invisible {
display : none; 
} 
#fixed {
font-size : 13px; 
position : absolute; 
top : 0; 
background-image:url(background.jpg);
margin-left: auto; 
margin-right: auto; 
width : 13em; 
padding-left : 18px;
padding-top :12px;
padding-bottom :20px;
color : #006600; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
text-align : left; 
border : 0px black solid;
} 
body > #fixed {
    position: fixed;
}
#content {
margin-left : 17.6em; 
margin-right : auto; 
padding-top : 1em; 
padding-bottom : 1px; 
padding-left : 1px;
padding-right : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 11px; 
font-weight : normal; 
line-height : 1.5; 
text-align : center; 
background : #ffffff; 
color : #000000; 
width : 632px; 
} 
h1 {
font-size : 1em; 
text-align : center; 
margin : auto; 
background : #eeeeee; 
color : #006600; 
width : 140px; 
} 
h2 {
font-size : 10px; 
text-align : center; 
margin : auto; 
background : #ffffff; 
color : #000000; 
width : auto; 
font-weight : normal; 
padding-left : 2px;
} 
h3 {
margin : auto; 
text-align : center; 
font-size : 13px; 
width : 280px; 
padding : 4px; 
font-weight : normal; 
background : #ffffff; 
color : #000000; 
font-style : normal; 
} 
h4 {
text-align : center; 
font-size : 12px; 
font-weight : bold; 
margin-top : 12px; 
margin-bottom : 0; 
padding-top : 0; 
color : #333399;  
} 
h5 {
text-align : left; 
font-size : 1.2em; 
font-weight : bold; 
margin-top : 12px; 
margin-bottom : 0; 
padding-top : 0; 
} 
h6 {
text-align : center; 
font-size : 12px; 
font-weight : normal; 
color :#333399; 
background : #ffffff;
margin-top : 16px; 
margin-bottom : 0; 
padding-top : 0; 
} 
a:link {
outline: none;
color : #0066cc; 
text-decoration : none; 
} 
a:visited {
outline: none;
color :  #0066cc; 
} 
a:active {
color :  #0066cc; 
} 
a:hover {
color :#000066;
text-decoration : none; 
} 
a {
text-decoration : none; 
} 
#fixed a {
color: #000099;
padding-top: 3px;
margin : auto;
padding-bottom: 3px;
padding-right: 10px;
width: 112px;
text-align : left;
text-decoration: none;
font-size : 11px;
font-weight : normal;
} 
#fixed a:hover {
color: #6699cc;
font-weight : normal;
} 
#ffixed a {
color: #fffccc;
padding-top: 3px;
padding-bottom: 3px;
width: 112px;
text-align : left;
text-decoration: none;
background: #ffcc00;
font-size : 11px;
font-weight : normal;
} 
#ffixed a:hover {
background:#ffffff;
color:#ffffff;
} 
div.address {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 9px; 
text-align : center;  
color : #000033;
border-top : 0px solid #cccccc; 
width : auto;
margin: 0 auto;
font-weight : normal;
} 
div.address img {
border : 0; 
text-align : center; 
} 
.wrap {
width : 780px; 
height : 100%;
} 
.scroll{
/* margin: auto; */
	margin: 40px auto;
background : #ffffff;
color : #333333; 
width: 570px;
padding: 12px;
/************************
font-size : 12px; 
border: 0px solid #cccccc; 
line-height : 40px;
*************************/
text-align : justify; 

}
LI.list1 {
list-style : disc; 
color : black; 
background : #ffffff; 
} 
LI.list2 {
list-style : square inside; 
color : black; 
background : #ffffff; 
} 
.blacktext {
color : #333399; 
background : #ffffff; 
font-weight : normal;
} 
.title1 {
margin : auto; 
background : #ffffff; 
color : #333399;  
width : auto; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 14px; 
font-weight : bold; 
text-align : center; 
} 
.title2 {
margin : auto; 
background : #ffffff; 
color : #000099; 
width : 399px; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 16px; 
font-weight : bold; 
text-align : center; 
overflow : auto; 
} 
.title3 {
margin : auto; 
background : #ffffff; 
color : #000000; 
width : 399px; 
padding-top : 2px; 
padding-left : 5px; 
padding-right : 13px; 
font-size : 13px; 
font-weight : bold; 
text-align : center; 
overflow : auto; 
} 
img
{
border-style: none;
vertical-align:middle;
margin-left : auto;
margin-right : auto;
padding-bottom : 4px;
}
#c3 
a:link {
background-color : #ffffff; 
color : #3399ff; 
text-decoration : none; 
} 
#c3 a:visited {
background-color : #ffffff; 
color :   #3399ff; 
} 
#c3 a:active {
outline : none;
background-color : #ffffff; 
color :   #3399ff; 
} 
#c3 a:hover {
background-color : #ffffff; 
color :  #cccccc; 
text-decoration : none; 
} 
#c3 a {
text-decoration : none; 
outline : none;
} 
.em {
color : blue;
font-size : 14px;
font-weight : bold;
}
.w3  {
     position : absolute;
     left : 18px;
     width : 140px;
text-decoration : none; 
outline : none;
padding-left : 0px;
margin-left : 40px;
margin-right : 0px;
margin-top : 14px;
    border : 0px solid #000000; 
} 
#logo  {
text-decoration : none; 
outline : none;
padding-left : 30px;
margin-left : 0px;
margin-right : 0;
margin-top : 14px;
position: absolute;
bottom : 4px;
} 
form table {margin: 0 auto;}
-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
<!-- 
 h4.c2 {text-align: center}
 h3.c1 {text-align: center} 
-->
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
<!-- 
#txt{
border:none;
font-family:verdana;
font-size:14px;
font-weight:bold;
background : #ffffff;
border: 0px solid #cccccc; 
color : #ff3300;
text-align : center;
width : 53px;
}
-->
/*]]>*/
</style>


<!--
<link rel="stylesheet" href="iehackjfk.css" type="text/css" />
-->
<!--[if IE 6]>
<style type="text/css">
/*********************** removed content of "iehackjfk.css"
html {
	overflow: hidden;
}
	body {
	height: 100%;
	overflow: auto;
}
***********************/
/*********************** suggested css */
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
.wrap {
	position:relative;
	float: right;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#fixed {
	clear: both;
	position: absolute;
	top: 0;
	left: 0;
}
</style>
<![endif]-->


<!--[if lte IE 6 ]>
<style type="text/css">
/********************** removed embedded css
.tooltip {
	cursor:default;
	position:relative;
}
a.tooltip:hover {
cursor:help;
 z-index:99;
}
.tooltip span {
	position:absolute;
	top:0;
	left:0;
}
.tooltip:hover span {
	position:absolute;
	top:0px;
	left : 450px;
}
**********************/
</style>
<![endif]-->

</head>
<body>

<div class="wrap">
	<div id="content">
		<div class= "title1">
			<br />
			Relative clauses 2
			<br /><br />
			To see answers, click the questions!
			<br /><br /><br />
		</div>
		<h4>Complete the sentences :<br /><br /> who / that / which / whose / whom / where</h4>


		<ul class="scroll tooltip"> <!-- suggesting a list for the questions instead of a div with links separated by line-breaks -->
			<li><a href="#">My boss, _<span>who</span>______ is American, drives a BMW. </a></li>
			<li><a href="#">This is the film <span>that/which </span>__________ I told you about</a></li>
			<li><a href="#">He was born in Dublin, __<span>which</span>_________ is the capital.</a></li>
			<li><a href="#">That's the man __<span> whose</span>_________ wife is a lawyer. </a></li>
			<li><a href="#">The idea, __<span>which</span>________ was very original, has been accepted.</a></li>
			<li><a href="#">He's the man to __<span>whom</span>_________ I sold my car.</a></li>
			<li><a href="#">My firend, __<span>who</span>________ is from Italy, has found a new job.</a></li>
			<li><a href="#">I really enjoyed the dinner <span>that/which</span>___________ you cooked yesterday.</a></li>
			<li><a href="#">The shop __<span> where</span>__________ I bought my shoes has closed down.</a></li>
		</ul>


		<br />
		<div class= "em">
			<a href="exercises.htm" ><em>More exercises! </em></a> 
		</div>
		<br /><br /><br />
		<h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
		<!-- SiteSearch Google -->
		<form method="get" action="http://www.google.com/search">
			<table border="0">
				<tr>
					<td  valign="top" >
						<input type="hidden" name="domains" value="http://www.elise.com" />
						<input type="hidden" name="client" value="pub-5527714554151844" />
						<input type="hidden" name="forid" value="1" />
						<input type="hidden" name="ie" value="ISO-8859-1" />
						<input type="hidden" name="oe" value="ISO-8859-1" />
						<input type="hidden" name="safe" value="active" />
						<input type="hidden" name="cof" value="GALT:#660000;GL:1;DIV:#999999;VLC:336633;AH:center;BGC:FFFFFF;LBGC:993300;ALC:003366;LC:003366;T:000000;GFNT:666666;GIMP:666666;FORID:1;" />
						<input type="text" name="q" size="22" maxlength="255" value="" />
						<a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_25wht.gif"  alt="Google" /></a>
						<input type="submit" style="padding : 4px; vertical-align: top" name="sa" value="Search" />
					</td>
				</tr>
		</table>
		</form>
		<div class="address">
			<br />
			John Kelly &copy; 2006 
		</div>
	</div>
</div>

<div id="fixed">
	&nbsp; <img src="nat.gif" width="144" height="145" alt="" />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="test.htm" > Free Level Test</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="exercises.htm"> Free Exercises</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="index.html"> Main page</a>
	<br />
	<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="mailto" href="mailto:john@profesornativo.com" >Contact me</a>
	<br /><br /><br /><br /><br /><br /><br />  <br /><br />  <br />    <br /> 
	<div class="w3">
		<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">  <img style="width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>
  </div>
</div>

</body>
</html>

Thanks for all the suggestions. Now I’m downloading the IE tester - a slow process, since here I have the slowest connection speed you can imagine.

So I wiil try some of those codes and see how it goes. Thanks a mill!

Ok, it’s taking me a bit of time, but I think most of the site is working now. The fixed sidebar isn’t actuallu fixed in IE5.5, but I don 't think it’s a problem, unless tehere is some easy fix,…

Just now I’m trying top fix the verb list, and trying to use DIVs instead of tables, but I can’t get the bottom of the page right:
http://www.profesornativo.com/index_5.htm


div.address {
 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 9px; 
text-align : center;  
color : #000033;
border: 1px solid #cccccc; 
width : 600px;
margin: 0 auto;
font-weight : normal;
} 

The border 1px above shows that the div crosses over the verb list divs. I tried using lots of <br /> to seperate the divs but it seems that some browsers interpret them differently, like IE 8 and Firefox. Any help appreciated, Thanks a lot.

For Firefox, go to addons.mozilla.org (https) and ask for a plugin called “Aardvark”.

It outlines boxes for you on your page.

Or just take those boxes at the top and give them border: 1px solid #f00 and you’ll see immediately why the border doesn’t show. The inner divs are sticking out funny.

Just now I’m trying top fix the verb list, and trying to use DIVs instead of tables,

Well, you do have more than 2 columns. This could very well be a table, and probably should be. Just use proper header tags (th) on the top items and for the (you don’t have it yet but I assume the left side should have the infinitive) left “headers” you’d keep them td’s but give them a scope=“row” to show the relationship across a row.

BTW why isn’t there “to wake” on the left?

My foster sister-in-law is learning English and she’s actually having some trouble with the past participles, not so much which form it should take, but which helping verb belongs with it (has or have, with or without been). Funnily enough, I think the differences in the irregular verbs come from Dutch. They say OId Dutch and Frisian (which is totally different from Dutch) are some of the closest related languages to Old English, where a lot of these weird tenses come from. Why do you wake up and not wake down or sideways? Dunno, but Dutch also has the directions, and those “directions” are part of the verb.

Sing:
zing, zang, gezongen : )