So, you are saying that only tables should be used for such a list.
One problem I have with tables is that if I want to, say, insert a new verb, it’s very complicated with tables, but easy with divs since each line is seperated by <br /> instead of tables cells. On the other hand I can´t get the divs to behave themselves at the bottom of the page - they overlap other divs and I can´t find a solution for that.
So, you are saying that only tables should be used for such a list.
Well, looking at it, I didn’t see it as a list, because there’s a relationship from left to right AND from top to bottom. If it were only two columns then it could be a definition list, but there are multiple versions of the same verb, and each word from left to right is another version of the same word.
One problem I have with tables is that if I want to, say, insert a new verb, it’s very complicated with tables, but easy with divs since each line is seperated by <br /> instead of tables cells.
Hmm, adding a verb should be adding a row, since you’re going to add all the versions of the word when you add it. Maybe I could do an example. Most important is that the tag you use around the words make sense for the type of content in it. Esp if there’s any chance of people using the page who need assistive technology or something that can see or use the semantics of, or types of of tags.
On the other hand I can´t get the divs to behave themselves at the bottom of the page - they overlap other divs and I can´t find a solution for that.
The bottom? I saw the border getting covered up near the top but what’s wrong with the bottom?
Normally, left to their own devices, divs won’t overlap other elements as they’re normally just static divs.
If you want, I or one of us could code an example you could look at, but first I’d want to know how the bottom is supposed to look.
Erik, what did you do in your code to get the tooltips to scroll? Or was it just that you guys removed the overflow? I have an page built in an overflow box that simply can’t have any positioning due to this IE bug. I noticed some weird stuff like display: inline on the abso-po’d tooltip span, and the z-index changes for some reason. Is any of that doing something else? Abso-po’d boxes can’t be display: inline. …or was that just to change the display state?
Damn, Konq is still screwing with my -9999em offset abso-po’d boxes. What a retard browser. This is the newest Konq. Grrr…
The problem at the bottom of the verb list page was that the google search box wasn´t positioned at the bottom as it should - it was near the top of the page, to the right, off the content page altogether. I did finally find a solutionwhich was to place an empty table just under the verb list and on top of the google search box:
`
</div>
<table width="600px">
<tr>
<td> </td>
</tr>
</table>
<br/>
<br/><br/>
<div id="logo">
<!-- SiteSearch Google -->
This is the page: http://www.profesornativo.com/irregular_verbs_1.htm
So, I was still able to do the 6 columns of verbs just using css and divs. I think it would be much easier to add or delete words from a <div> list than a tables list, since all the table cells are so inter-dependent - unless there’s some trick I’m missing. I may have used some unorthodox methods, but as long as the pages pass the validation test, I’m happy.
I have almost finished the updating, and it has been a great help using the IE tester, plus all the generous help in this forum. I have learned so much!
since you can’t use positioning at all (if you plan to work with IE6) tables might be your only option (good job solving it :)) i didn’t realize that tables are like positioned elements that aren’t positioned, im happy that you have it all working as you wanted, and that your finding IEtester useful 
just one little thing - I notice that when I’m on the verb list page and I actually click one of the question marks after scrolling down the page (although clicking isnt neccessary as it works on mouseover), the clck returns me to the page top. Is there a way to prevent this? www.profesornativo.com/irregular_verbs_1.htm Apart from that there are a couple of minor glitches in IE5.5, like fixed side bar not being fixed and an image not being centered, but I don’t think it’s an important problem. Thanks.
to understand what you can and can’t do you need to know what links and IE6 can and can’t do.
<a href=“#”>Top</a>
clicking that link leads you to the top of the page
essentially you need to read this about links
href=“” refreshes the same page
href=“#” leads to the top of the page (without refresh)
href=“#someid” leads to some tag with the id of “someid” (without refresh) if the id does not exist on the page then the link does nothing.
IE6 does not support :hover on links that don’t have a href
so if you want to support :hover in IE6 you have to keep that href=“#” on the links which leads to the top of the page, or you can give each of these links some meaningful resources that lead to additional information on the page.
like <a href=“#awoken”>awoken</a>
<div id=“awoken”>Some more details about awoken at the bottom of the page.</div>
that would be the meaningful way to handle it, to just get rid of the
the clck returns me to the page top
then
you can give it some href=“#something” that does not exist as any id on any part of the page, that will kill the moving of the page because the browser wont be able to find anything with the id=“something” and just give up.
the links that don’t do anything I call <a href=“#void”>nothing happens</a>
Wow I sure missed a lot since I was online last!
The links part is a problem no matter what you do… I rewrote the page in tables to show a way to do it with tables and found that my usual solution (to make an id for the anchor and make the href go to that anchor) makes a different problem because the page is so long.
So, instead of bringing people to the top, it instead (just as jolting for some people) moves the clicked link to the top of the screen… unless the screen is already scrolled down as far as possible already.
I didn’t think of that, and is prolly the best solution. So, I don’t have it below, but pretend I do… : )
Since you didn’t have an :active or :focus pseudo class on the anchor, clicking doesn’t work on many browsers anyway. Adding :active helps it work in IE6, while adding :focus helps it work in many browsers (all but Saffy Chrome who don’t hold focus on clicked things).
dubman, I don’t want to seem evil or tell you you’re doing everything wrong etc so I just want to show you what your current page is like without CSS. One of the ideas in web design is that HTML is the most important thing, and needs to make sense without help from eye candy (CSS), scripting (JS), or images (none of these things can be guaranteed unless your page is only going to be run on an intranet, which maybe it will be, I dunno).
…
Unless you can guarantee that everyone using this page has CSS on and is not blind or using any assistive technology that shows the page linearly, you’ll get someone, somewhere, getting the above.
And here’s how I would have done the page, but with tables (which makes the HTML also make more sense… each version of the word comes in the right order):
http://stommepoes.nl/Mesas/mesas.html
Since I usually delete stuff after a while, here’s the code:
HTML
(meta tags I couldn’t figure out how to make them in lang=“es” while letting the rest of the stuff be lang=“en”)
<!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=utf-8" />
<meta http-equiv="content-language" content="en" />
<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" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
<h1>Irregular Verbs Exercise</h1>
<p>Click "?" to see the past participle.</p>
<table summary="the present,then the preterite, and finally past participle version of each verb">
<thead>
<tr>
<th scope="col">Present</th>
<th scope="col">Past</th>
<th scope="col">Past Participle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">awake</td>
<td>awoke</td>
<td><a href="#awoken" id="awoken">? <span>awoken</span></a></td>
</tr>
<tr>
<td scope="row">be</td>
<td>was / were</td>
<td><a href="#been" id="been">? <span>been</span></a></td>
</tr>
<tr>
<td scope="row">beat</td>
<td>beat</td>
<td><a href="#beaten" id="beaten">? <span>beaten</span></a></td>
</tr>
<tr>
<td scope="row">become</td>
<td>became</td>
<td><a href="#become" id="become">? <span>become</span></a></td>
</tr>
<tr>
<td scope="row">begin</td>
<td>began</td>
<td><a href="#begun" id="begun">? <span>begun</span></a></td>
</tr>
<tr>
<td scope="row">bend</td>
<td>bent</td>
<td><a href="#bent" id="bent">? <span>bent</span></a></td>
</tr>
<tr>
<td scope="row">bite</td>
<td>bit</td>
<td><a href="#bitten" id="bitten">? <span>bitten</span></a></td>
</tr>
<tr>
<td scope="row">blow</td>
<td>blew</td>
<td><a href="#blown" id="blown">? <span>blown</span></a></td>
</tr>
<tr>
<td scope="row">break</td>
<td>broke</td>
<td><a href="#broken" id="broken">? <span>broken</span></a></td>
</tr>
<tr>
<td scope="row">bring</td>
<td>brought</td>
<td><a href="#brought" id="brought">? <span>brought</span></a></td>
</tr>
<tr>
<td scope="row">build</td>
<td>built</td>
<td><a href="#built" id="built">? <span>built</span></a></td>
</tr>
<tr>
<td scope="row">burst</td>
<td>burst</td>
<td><a href="#burst" id="burst">? <span>burst</span></a></td>
</tr>
<tr>
<td scope="row">buy</td>
<td>bought</td>
<td><a href="#bought" id="bought">? <span>bought</span></a></td>
</tr>
<tr>
<td scope="row">catch</td>
<td>caught</td>
<td><a href="#caught" id="caught">? <span>caught</span></a></td>
</tr>
<tr>
<td scope="row">choose</td>
<td>chose</td>
<td><a href="#chosen" id="chosen">? <span>chosen</span></a></td>
</tr>
<tr>
<td scope="row">come</td>
<td>came</td>
<td><a href="#come" id="come">? <span>come</span></a></td>
</tr>
<tr>
<td scope="row">cost</td>
<td>cost</td>
<td><a href="#cost" id="cost">? <span>cost</span></a></td>
</tr>
<tr>
<td scope="row">cut</td>
<td>cut</td>
<td><a href="#cut" id="cut">? <span>cut</span></a></td>
</tr>
<tr>
<td scope="row">deal</td>
<td>dealt</td>
<td><a href="#dealt" id="dealt">? <span>dealt</span></a></td>
</tr>
<tr>
<td scope="row">dig</td>
<td>dug</td>
<td><a href="#dug" id="dug">? <span>dug</span></a></td>
</tr>
<tr>
<td scope="row">do</td>
<td>did</td>
<td><a href="#done" id="done">? <span>done</span></a></td>
</tr>
<tr>
<td scope="row">draw</td>
<td>drew</td>
<td><a href="#drawn" id="drawn">? <span>drawn</span></a></td>
</tr>
<tr>
<td scope="row">drink</td>
<td>drank</td>
<td><a href="#drunk" id="drunk">? <span>drunk</span></a></td>
</tr>
<tr>
<td scope="row">drive</td>
<td>drove</td>
<td><a href="#driven" id="driven">? <span>driven</span></a></td>
</tr>
<tr>
<td scope="row">eat</td>
<td>ate</td>
<td><a href="#eaten" id="eaten">? <span>eaten</span></a></td>
</tr>
<tr>
<td scope="row">fall</td>
<td>fell</td>
<td><a href="#fallen" id="fallen">? <span>fallen</span></a></td>
</tr>
<tr>
<td scope="row">feel</td>
<td>felt</td>
<td><a href="#felt" id="felt">? <span>felt</span></a></td>
</tr>
<tr>
<td scope="row">feed</td>
<td>fed</td>
<td><a href="#fed" id="fed">? <span>fed</span></a></td>
</tr>
<tr>
<td scope="row">fight</td>
<td>fought</td>
<td><a href="#fought" id="fought">? <span>fought</span></a></td>
</tr>
<tr>
<td scope="row">find</td>
<td>found</td>
<td><a href="#found" id="found">? <span>found</span></a></td>
</tr>
<tr>
<td scope="row">fly</td>
<td>flew</td>
<td><a href="#flown" id="flown">? <span>flown</span></a></td>
</tr>
<tr>
<td scope="row">forbid</td>
<td>forbade</td>
<td><a href="#forbidden" id="forbidden">? <span>forbidden</span></a></td>
</tr>
<tr>
<td scope="row">forget</td>
<td>forgot</td>
<td><a href="#forgot" id="forgot">? <span>forgot</span></a></td>
</tr>
<tr>
<td scope="row">forgive</td>
<td>forgave</td>
<td><a href="#forgiven" id="forgiven">? <span>forgiven</span></a></td>
</tr>
<tr>
<td scope="row">freeze</td>
<td>froze</td>
<td><a href="#frozen" id="frozen">? <span>frozen</span></a></td>
</tr>
<tr>
<td scope="row">get</td>
<td>got</td>
<td><a href="#got" id="got">? <span>got</span></a></td>
</tr>
<tr>
<td scope="row">give</td>
<td>gave</td>
<td><a href="#given" id="given">? <span>given</span></a></td>
</tr>
<tr>
<td scope="row">go</td>
<td>went</td>
<td><a href="#gone" id="gone">? <span>gone</span></a></td>
</tr>
<tr>
<td scope="row">grow</td>
<td>grew</td>
<td><a href="#grown" id="grown">? <span>grown</span></a></td>
</tr>
<tr>
<td scope="row">hang</td>
<td>hung</td>
<td><a href="#hung" id="hung">? <span>hung</span></a></td>
</tr>
<tr>
<td scope="row">have</td>
<td>had</td>
<td><a href="#had" id="had">? <span>had</span></a></td>
</tr>
<tr>
<td scope="row">hear</td>
<td>heard</td>
<td><a href="#heard" id="heard">? <span>heard</span></a></td>
</tr>
<tr>
<td scope="row">hide</td>
<td>hid</td>
<td><a href="#hidden" id="hidden">? <span>hidden</span></a></td>
</tr>
<tr>
<td scope="row">hit</td>
<td>hit</td>
<td><a href="#hit" id="hit">? <span>hit</span></a></td>
</tr>
<tr>
<td scope="row">hold</td>
<td>held</td>
<td><a href="#held" id="held">? <span>held</span></a></td>
</tr>
<tr>
<td scope="row">hurt</td>
<td>hurt</td>
<td><a href="#hurt" id="hurt">? <span>hurt</span></a></td>
</tr>
<tr>
<td scope="row">keep</td>
<td>kept</td>
<td><a href="#kept" id="kept">? <span>kept</span></a></td>
</tr>
<tr>
<td scope="row">kneel</td>
<td>knelt</td>
<td><a href="#knelt" id="knelt">? <span>knelt</span></a></td>
</tr>
<tr>
<td scope="row">know</td>
<td>knew</td>
<td><a href="#known" id="known">? <span>known</span></a></td>
</tr>
<tr>
<td scope="row">lay</td>
<td>laid</td>
<td><a href="#laid" id="laid">? <span>laid</span></a></td>
</tr>
<tr>
<td scope="row">lead</td>
<td>led</td>
<td><a href="#led" id="led">? <span>led</span></a></td>
</tr>
<tr>
<td scope="row">leave</td>
<td>left</td>
<td><a href="#left" id="left">? <span>left</span></a></td>
</tr>
<tr>
<td scope="row">lend</td>
<td>lent</td>
<td><a href="#lent" id="lent">? <span>lent</span></a></td>
</tr>
<tr>
<td scope="row">let</td>
<td>let</td>
<td><a href="#let" id="let">? <span>let</span></a></td>
</tr>
<tr>
<td scope="row">lie</td>
<td>lay</td>
<td><a href="#lain" id="lain">? <span>lain</span></a></td>
</tr>
</tbody>
</table>
<table summary="the present,then the preterite, and finally past participle version of each verb">
<thead>
<tr>
<th scope="col">Present</th>
<th scope="col">Past</th>
<th scope="col">Past Participle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">light</td>
<td>lit</td>
<td><a href="#lit" id="lit">? <span>lit</span></a></td>
</tr>
<tr>
<td scope="row">lose</td>
<td>lost</td>
<td><a href="#lost" id="lost">? <span>lost</span></a></td>
</tr>
<tr>
<td scope="row">make</td>
<td>made</td>
<td><a href="#made" id="made">? <span>made</span></a></td>
</tr>
<tr>
<td scope="row">mean</td>
<td>meant</td>
<td><a href="#meant" id="meant">? <span>meant</span></a></td>
</tr>
<tr>
<td scope="row">meet</td>
<td>met</td>
<td><a href="#met" id="met">? <span>met</span></a></td>
</tr>
<tr>
<td scope="row">pay</td>
<td>paid</td>
<td><a href="#paid" id="paid">? <span>paid</span></a></td>
</tr>
<tr>
<td scope="row">put</td>
<td>put</td>
<td><a href="#put" id="put">? <span>put</span></a></td>
</tr>
<tr>
<td scope="row">read</td>
<td>read</td>
<td><a href="#read" id="read">? <span>read</span></a></td>
</tr>
<tr>
<td scope="row">ride</td>
<td>rode</td>
<td><a href="#ridden" id="ridden">? <span>ridden</span></a></td>
</tr>
<tr>
<td scope="row">.......bring</td>
<td>brought</td>
<td><a href="#brought" id="brought">? <span>brought</span></a></td>
</tr>
<tr>
<td scope="row">build</td>
<td>built</td>
<td><a href="#built" id="built">? <span>built</span></a></td>
</tr>
<tr>
<td scope="row">burst</td>
<td>burst</td>
<td><a href="#burst" id="burst">? <span>burst</span></a></td>
</tr>
<tr>
<td scope="row">buy</td>
<td>bought</td>
<td><a href="#bought" id="bought">? <span>bought</span></a></td>
</tr>
<tr>
<td scope="row">catch</td>
<td>caught</td>
<td><a href="#caught" id="caught">? <span>caught</span></a></td>
</tr>
<tr>
<td scope="row">choose</td>
<td>chose</td>
<td><a href="#chosen" id="chosen">? <span>chosen</span></a></td>
</tr>
<tr>
<td scope="row">come</td>
<td>came</td>
<td><a href="#come" id="come">? <span>come</span></a></td>
</tr>
<tr>
<td scope="row">cost</td>
<td>cost</td>
<td><a href="#cost" id="cost">? <span>cost</span></a></td>
</tr>
<tr>
<td scope="row">cut</td>
<td>cut</td>
<td><a href="#cut" id="cut">? <span>cut</span></a></td>
</tr>
<tr>
<td scope="row">deal</td>
<td>dealt</td>
<td><a href="#dealt" id="dealt">? <span>dealt</span></a></td>
</tr>
<tr>
<td scope="row">dig</td>
<td>dug</td>
<td><a href="#dug" id="dug">? <span>dug</span></a></td>
</tr>
<tr>
<td scope="row">do</td>
<td>did</td>
<td><a href="#done" id="done">? <span>done</span></a></td>
</tr>
<tr>
<td scope="row">draw</td>
<td>drew</td>
<td><a href="#drawn" id="drawn">? <span>drawn</span></a></td>
</tr>
<tr>
<td scope="row">drink</td>
<td>drank</td>
<td><a href="#drunk" id="drunk">? <span>drunk</span></a></td>
</tr>
<tr>
<td scope="row">drive</td>
<td>drove</td>
<td><a href="#driven" id="driven">? <span>driven</span></a></td>
</tr>
<tr>
<td scope="row">eat</td>
<td>ate</td>
<td><a href="#eaten" id="eaten">? <span>eaten</span></a></td>
</tr>
<tr>
<td scope="row">fall</td>
<td>fell</td>
<td><a href="#fallen" id="fallen">? <span>fallen</span></a></td>
</tr>
<tr>
<td scope="row">feel</td>
<td>felt</td>
<td><a href="#felt" id="felt">? <span>felt</span></a></td>
</tr>
<tr>
<td scope="row">feed</td>
<td>fed</td>
<td><a href="#fed" id="fed">? <span>fed</span></a></td>
</tr>
<tr>
<td scope="row">fight</td>
<td>fought</td>
<td><a href="#fought" id="fought">? <span>fought</span></a></td>
</tr>
<tr>
<td scope="row">find</td>
<td>found</td>
<td><a href="#found" id="found">? <span>found</span></a></td>
</tr>
<tr>
<td scope="row">fly</td>
<td>flew</td>
<td><a href="#flown" id="flown">? <span>flown</span></a></td>
</tr>
<tr>
<td scope="row">forbid</td>
<td>forbade</td>
<td><a href="#forbidden" id="forbidden">? <span>forbidden</span></a></td>
</tr>
<tr>
<td scope="row">forget</td>
<td>forgot</td>
<td><a href="#forgot" id="forgot">? <span>forgot</span></a></td>
</tr>
<tr>
<td scope="row">forgive</td>
<td>forgave</td>
<td><a href="#forgiven" id="forgiven">? <span>forgiven</span></a></td>
</tr>
<tr>
<td scope="row">freeze</td>
<td>froze</td>
<td><a href="#frozen" id="frozen">? <span>frozen</span></a></td>
</tr>
<tr>
<td scope="row">get</td>
<td>got</td>
<td><a href="#got" id="got">? <span>got</span></a></td>
</tr>
<tr>
<td scope="row">give</td>
<td>gave</td>
<td><a href="#given" id="given">? <span>given</span></a></td>
</tr>
<tr>
<td scope="row">go</td>
<td>went</td>
<td><a href="#gone" id="gone">? <span>gone</span></a></td>
</tr>
<tr>
<td scope="row">grow</td>
<td>grew</td>
<td><a href="#grown" id="grown">? <span>grown</span></a></td>
</tr>
<tr>
<td scope="row">hang</td>
<td>hung</td>
<td><a href="#hung" id="hung">? <span>hung</span></a></td>
</tr>
<tr>
<td scope="row">have</td>
<td>had</td>
<td><a href="#had" id="had">? <span>had</span></a></td>
</tr>
<tr>
<td scope="row">hear</td>
<td>heard</td>
<td><a href="#heard" id="heard">? <span>heard</span></a></td>
</tr>
<tr>
<td scope="row">hide</td>
<td>hid</td>
<td><a href="#hidden" id="hidden">? <span>hidden</span></a></td>
</tr>
<tr>
<td scope="row">hit</td>
<td>hit</td>
<td><a href="#hit" id="hit">? <span>hit</span></a></td>
</tr>
<tr>
<td scope="row">hold</td>
<td>held</td>
<td><a href="#held" id="held">? <span>held</span></a></td>
</tr>
<tr>
<td scope="row">hurt</td>
<td>hurt</td>
<td><a href="#hurt" id="hurt">? <span>hurt</span></a></td>
</tr>
<tr>
<td scope="row">keep</td>
<td>kept</td>
<td><a href="#kept" id="kept">? <span>kept</span></a></td>
</tr>
<tr>
<td scope="row">kneel</td>
<td>knelt</td>
<td><a href="#knelt" id="knelt">? <span>knelt</span></a></td>
</tr>
<tr>
<td scope="row">know</td>
<td>knew</td>
<td><a href="#known" id="known">? <span>known</span></a></td>
</tr>
<tr>
<td scope="row">lay</td>
<td>laid</td>
<td><a href="#laid" id="laid">? <span>laid</span></a></td>
</tr>
<tr>
<td scope="row">lead</td>
<td>led</td>
<td><a href="#led" id="led">? <span>led</span></a></td>
</tr>
<tr>
<td scope="row">leave</td>
<td>left</td>
<td><a href="#left" id="left">? <span>left</span></a></td>
</tr>
<tr>
<td scope="row">lend</td>
<td>lent</td>
<td><a href="#lent" id="lent">? <span>lent</span></a></td>
</tr>
<tr>
<td scope="row">let</td>
<td>let</td>
<td><a href="#let" id="let">? <span>let</span></a></td>
</tr>
<tr>
<td scope="row">lie</td>
<td>lay</td>
<td><a href="#lain" id="lain">? <span>lain</span></a></td>
</tr>
</tbody>
</table>
<form method="get" action="http://www.google.com/search" id="formSearch">
<div>
<input type="hidden" name="domains" value="http://www.elise.com" />
<input type="text" name="q" size="22" maxlength="255" value="" />
<label for="q"><a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_25wht.gif" alt="Search Google" /></a></label>
<input type="submit" name="sa" value="Search"/>
<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;"/>
</div>
</form>
<div id="counter">
<a href="http://xyz.freelogs.com/stats/d/dubmann/"><img alt="free counter" src="http://xyz.freelogs.com/counter/index.php?u=dubmann&s=ariali" /></a>
<script type="javascript" src=http://xyz.freelogs.com/counter/script.php?u=dubmann></script>
<a href="http://www.freelogs.com/" >free hit counter</a>
</div>
<div class="address">
<p>John Kelly © 2006</p>
</div>
</div>
<div id="sidebar">
<h2 class="access">Site menu</h2>
<ul>
<li><a href="test.htm"> Free Level Test</a></li></li>
<li><a href="index.html"> Main page</a></li>
<li><a href="exercises.htm">Free Exercises</a></li>
<li><a class="mailto" href="mailto:john@profesornativo.com">Contact me</a></li>
</ul>
<p id="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" height="31" width="88" alt="Valid CSS!" /></a>
</p>
</div>
</body>
</html>
There are validation errors due to the fact that instead of doing all the verbs, I just repeated a bunch from the first table, lawlz. If I’d put in the real words it would pass.
Google’s ugly ugly form wasn’t valid. Prutsers. Everyone looks up to the great godly googles but they make crapola code for no good reason, and it was a form without any labels. Grrr. Forms need labels.
CSS
/*ingles*/
* {
margin: 0;
}
img {
vertical-align: bottom;
border: 0;
}
html, body {
height: 100%;
padding: 0;
}
body {
color: #006;
padding: 0 0 0 13.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #fff url(background.png) 0 0 repeat-x fixed;
}
#container {
width: 610px;
min-height: 100%;
margin: 0;
padding-left: 23px;
color: #006;
font-size: .7em;
line-height: 1.2em;
text-align: center;
background-color: #fff;
}
* html #container {height: 100%;}
h1 {
font-size: 1.3em;
font-weight: normal;
margin: 0 0 35px;
padding-top: 2.5em;
}
h1 + p {
font-size: 1.1em;
margin: 0 0 30px;
}
table {
table-layout: fixed;
float: left;
width: 286px;
margin-bottom: 60px;
text-align: left;
}
table+table {
margin-left: 5px;
}
td a {
position: relative;
text-decoration: none;
color: #006;
}
td a span {
position: absolute;
left: -9999px;
}
td a:focus, td a:hover {
color: #fff;
}
* html td a:hover {height: 1%;}
td a:focus span, td a:hover span, td a:active span {
left: 25px;
color: #006;
font-weight: bold;
text-decoration: none;
}
#formSearch {
margin-bottom: 28px;
}
#formSearch input[type="submit"] {
padding: 4px;
}
#counter {
width: 12em;
margin: 0 auto 20px;
text-align: center;
}
#counter img {
display: block;
margin: 0 auto 5px;
}
#counter a {
font-weight: bold;
text-decoration: none;
white-space: nowrap;
}
#counter a:focus, #counter a:hover {
color: #eee;
}
#sidebar {
position: fixed;
left: 0;
top: 0;
width: 13em;
padding-top: 288px;
background: url(nat.gif) 28px 46px no-repeat;
}
* html #sidebar {position: absolute;}
h2.access {
position: absolute;
left: -999em;
}
#sidebar ul {
margin: 0 0 180px 46px;
}
#sidebar ul a {
color: #03c;
font-size: .7em;
line-height: 3em;
text-decoration: none;
}
#sidebar ul a:focus, #sidebar ul a:hover {
color:#69f;
}
#w3 a {
display: block;
width: 88px;
margin: 0 auto 5px;
}
With the padding I have to imitate your current page, screens that are not as large as yours are simply missing the w3c badges… that’s ok, they’re not important, but because the sidebar is fixed (except in IE6) that is something to watch out for.
Yeah, IE5 and 6 don’t understand position: fixed. Now, there is a way to fake it (using CSS frames) but this would, unless Yuri or Erik know a more awesome way, require an overflow box (which would bring back the problems of the relatively positioned anchors for the hover tooltips, arg!) and the scrollbar would be on the white table box instead of the right of the whole screen (not necessarily a bad thing but maybe you would not want it). IE would think the side was fixed because really, you wouldn’t be scrolling the page but a box… but it ends up like the page I mentioned at the beginning of the thread, which had the positioning problem from the overflow box.
Anyway the main point is, whenever you want to add a word, this is your code you add:
<tr>
<td scope="row">PRESENT TENSE WORD HERE</td>
<td>PAST TENSE HERE</td>
<td><a href="#PP HERE" id="PP HERE">? <span>PP HERE</span></a></td>
</tr>
And that’s pretty easy, plus it doesn’t have all the nonbreakingspaces and br’s, cause CSS to the rescue : )
i completely agree with Poes.
Bah, and I’m already tweaking it. So now the online code and code above don’t match anymore : ) Oh well, it’s only an example.
Nice work!
Though I went with a list in my post above (and probably had done here too), I also agree that using a table is to prefer.
In my post before I served IE6 the faked fixed position as you say with an overflow box. The wrap-div I used for this in IE6 was already present in that other page, and added here it should work the same.
[COLOR="Red"]<div id="wrap">[/COLOR]
<div id="container">
tables and stuff
</div>
[COLOR="Red"]</div>[/COLOR]
<div id="sidebar">
sidebar
</div>
Changes in the general css:
html, body {
height: 100%;[COLOR="Red"]
margin: 0;
padding: 0; [/COLOR]
}[COLOR="Red"]
#wrap {
height: 100%;
}[/COLOR]
#container {
width: 610px;
min-height: 100%; [COLOR="Red"]
padding: 0 0 0 18em;[/COLOR]
color: #006;
font-size: .7em;
line-height: 1.2em;
text-align: center;
background-color: #fff;
}
Served to IE6 only:
html,
body {
overflow: hidden;
}
#wrap {
position: relative;
float: right;
width: 100%;
overflow: auto;
}
#sidebar {
clear: both;
position: absolute;
}
I don’t think there would be any problems with any positioning in the container or the anchors in the table.
Erik, I actually had some questions earlier, because in overflow boxes I have trouble like dubman did, both in IE6 AND IE7.
Is overflow: hidden on the body somehow fixing it? What is helping IE7?
Erik, what did you do in your code to get the tooltips to scroll? Or was it just that you guys removed the overflow? I have an page built in an overflow box that simply can’t have any positioning due to this IE bug. I noticed some weird stuff like display: inline on the abso-po’d tooltip span, and the z-index changes for some reason. Is any of that doing something else? Abso-po’d boxes can’t be display: inline. …or was that just to change the display state?
It’s a problem I’m currently having on a horizontal site… so far I’ve just avoided doing image replacement just so IE6 and 7 are ok.
Also wondering if html and body have any default padding… I’ve started leaving it out because I couldn’t find anyone yet who added it in (but I could be missing it). I’m removing margins from everyone at the get-go.
Is overflow: hidden on the body somehow fixing it? What is helping IE7?
you are hiding any overflow for body (the page content) and html (aka removing the scrollbar) and instead we add a wrapper witch is 100% high and acts as the new body, we give it a overflow:auto (so now if content overflows over the 100% height a scollbar will appear) and anything that is positioned inside that wrapper will be positioned relative to the body and not the wrapper (because the wrapper has no position) and will look like position:fixed.
this is for IE6 only though
p.s. I also never found any default padding on the body or the html.
[ot]In IE, when a parent has overflow:auto set and a child has position:relative; it will act like fixed in IE. The fix is to also add position:relative to the element that has overflow:auto;
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
width:300px;
height:200px;
overflow:auto;
[color=red]/*position:relative*/[/color]
}
p.fixed {
position:relative;
background:red
}
</style>
</head>
<body>
<div class="outer">
<p class="fixed">I am fixed</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
<p>Normal stuff</p>
</div>
</body>
</html>
[/ot]
Edit:
@Yuri, Opera by default has padding set on the <body>. I forget who else…I think IE off the top of my head?
Off Topic:
I just did a test in Chrome/Opera/FF/IE7. All would remove the space between <body> and the content when I would set margins to 0 on the body. I guess Opera switched over? So now it’s all margins in every browser except the older versions.
I never used the old opera so never witnessed the padding on its body.
now about the fixed position.
you are absolutely correct Ryan.
I feel really stupid now considering i knew the solution and didn’t tell the OP on how to fix it… well, another css trick is in the bag.
I bet you had the same problem at one point or another 
the solution as a clarification for possible readers:
IE only css
.fixed {
position:relative;
}
html,body,#body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#body {
overflow:auto;
position:absolute;
top:0;
}
html
<div class="fixed">content that is now position:fixed in IE6</div>
<div id="body">
normal content
</div>
Duh, I’v prolly read that solution a bazillion times and kept missing it. Thanks Ryan!
Opera has padding on the body? Ok, what about the HTML element?
I should start checking specifically the body padding on the pages I’ve done lately to see who’s adding some in… You’re prolly right about IE.
The <html> doesn’t contain any padding/margins. The only reason we shouldn’t really style it is because of older IE bugs. Same reason for the <body>. IE bugs.
I just did a test in Chrome/Opera/FF/IE7. All would remove the space between <body> and the content when I would set margins to 0 on the body. I guess Opera switched over? So now it’s all margins in every browser except the older versions.
I’m referring to the mid versions of 9
now about the fixed position.
you are absolutely correct Ryan.
I feel really stupid now considering i knew the solution and didn’t tell the OP on how to fix it… well, another css trick is in the bag.
I bet you had the same problem at one point or another
Not me, my friend in AP computer science had the problem (we were done so he was working on his site in dreamweaver) and he had hte problem and I fixed it.
I hadn’t seen teh overflow even though I’d suspected it, because it had been hidden away in an ie-only stylesheet lawlz. But since the overflow: hidden didn’t seem to be used on purpose, simply removing fixed dubman’s original problem, didn’t it? I mean, none of the other browsers had an overflow-hidden page anyway, right?
The <body> shouldn’t have overflow:hidden; set anyway because there is no way you can ensure all content will always stay within the viewport at all times and not be clipped :).
Actually, even on my version posted above, that’s a possible problem, due to the padding used in the fixed box to space things out the way the orig site has it… actually on my laptop I can’t see the w3c buttons at all… my scriptblocker usually covers them : )
Also, one reason I generally don’t use overflow: hidden on body/html is in IE6, any in-page skip links won’t get you there… so back when I did often have overflow: hidden on the body or some whole-page wrapper, I’d have to tell IE6 in a little secret whisper:
- html html/body/#wrapper/whatever {overflow: visible;}
just to get skip/in-page links working.