ferren

A working table which maintains a semblance of formatting as window width is changed from 50% to 100% of the usual landscape monitor is at http://www.electromontis.net/evoligion/_C/C11.shtml#T11.1 The code fragment that makes this work is ... <col width="110px"/> <col width="150px"/> <col /> <!-- This column absorbs width change --> <col width="40px"/> <thead> <tr><th>Instinct</th> <th>Synonyms</th> <th>Utility</th> <th>Chap</th></tr> </thead> <tbody> <tr class="red"> <td><b>Instinct-I</b></td> <td>Alpha-male egoism, <i>machismo</i></td> <td>Self propagating.</td> <td>11</td></tr> ... The validator says <col width=...> is obsolete and airily adds, 'use CSS', without further suggestions. I can't find anything in CSS that does this without style statements in each table box, which seems exceedingly inelegant. What am I missing?

TextWrangler (+ Firefox for display) and a wide screen, for Macs. Geany (") for Ubuntu, but it lacks TextWrangler's convenient multi-file search/replace . Free.

>Remember that IDs cannot begin with a numeric character. Oops. I have ~1200 id tags that are entirely numeric, and they have been working smoothly for several years. If I don't change them, is this likely to get me in trouble in the future? Or is this a rule that browsers are content to ignore, like using width="33%" for sizing images--illegal but the only way to produce the desired effect as window width changes.

Jumping to next/prev page is commonplace. I didn't have much luck asking about jumping to next/prev id tags, but how about jumping to next/prev header? Currently, I write: <h3 id="13"> <a class="up" href="#TOP">∧ </a> <a class="up" href="#12">↑</a> <a class="up" href="#14">↓</a> Title of section</h3> where I have to specify the next and previous id numbers. For ease of maintenance, I'd like to be able to write something like <h3 id="13"> <a class="up" href="#TOP">∧ </a> <a class="up" href="#prev.hdr">↑</a> <a class="up" href="#next.hdr">↓</a> Title of section</h3> making global changes simpler. I don't see a way to do this, but surely I am not the first person who wanted a way to increment an id automatically? 'current id ± 1' is the desired arithmetic, or 'last header' and 'next header'.

@Dave, I hoped the example code would show the usage. Buttons for 'next' and 'prev' are common in paged material; no pages in my html, but I want to jump to adjacent sections. <a href="#id+1">&vrtri;</a> would be ideal. Am I really the only person in 20 years who wants to increment an id number? It seems like such an obvious tool that I hoped someone had figured it out for me. PHP and JavaScript are terra incognita, and a long way from the subject I'm writing about. I am an author, and only reluctantly a programmer.

I have 1500 places where <nextid> would be useful. what is the recommended work-around? As is, I have to keep track of numbers. A generic 'next' and 'prev' would be ineffably convenient! Example: <h2 class="cen" id="01"><a class="triangles" href="#00">&vltri; </a> <a href="#TOP"> BRAIN ANATOMY </a> &nbs<a class="triangles" href="#02"> &vrtri;</a></h2> <p> ,,,</p> <h3 id="02"><a class="triangles" href="#01">&vltri; </a> <a href="#TOP"> 3 Layers of the Brain </a> <a class="triangles" href="#03"> &vrtri; <p> ,,,</p>

davej, I have ~3750 corrections to make and check. This goes a lot faster if I don't have to check them by uploading 100k files each time. I want to be able to see the result immediately. Following dsonesuk's clue, I think this means installing LAMP (Linux, Apache, MariaSQL, PHP) on my computer. I was hoping there might be an easier approach. (Got the L, sort of, but it and its computer are new and not entirely tamed.) On the other hand, in November I'll be at home with a couple of Macs with Apache and familiar OS X built in. Might this be a better starting point?

Yes--but if I am making a global change I would like to be able to work on a new set of 25 chapter off line, get them all working, and THEN upload them. Why can't I get at SSI files on my own computer? Example: my intrachapter navigation arrows--may be 25 sets in a chapter, worked on large screens but are too close together for small screens and finger tips. This leaves me with 1200 fiddly changes to make (can't use grep here). I'd prefer to swap in 25 working chapters after they have all been tested off line.

http://evoligion.wordpress.com works reasonably well with SSI files for features common to several pages. I want to edit it off line, at home, on my own machine. The problem is that I haven't found a way to call the SSI files. I get conflicting advice from the web. 'Can't be done!'; gobbledegook code in strange languages, assuming that I am the mythical system administrator to whom one is so often referred; wild guesses. This seems like a universally useful process which should be implemented in a trivial manner, as simple as whistling for any other URL. What am I missing?

Styling the link to indicate its state (link, hover, active, visited) is sometimes useful. However, 'visited' appears to be remembered. Is there a way to reset it to 'unvisited'? Reloading the file and browser does not do this, but I feel a need for 'visited today' vs 'visited last month', and haven't found a way to indicate this.

in a table: the pop-up box has no problem hiding adjacent boxes where it overlaps a bit, but it still tries to stay inside its <td> box. I shall work on the <img> problem first.

That'll keep me busy for a while! Thanks for the hand-holding! I just noticed related behavior

No problem here, but I could some advice. With 2500 footnotes, and a similar number of links, some glossary references, and a felt need to jump to the next figure or table, I devised my own system for navigating a 25-chapter html book. The question is, will others find my system easy and understandable. http://www.electromontis.net/evoligion/_A/Quirks.shtml explains the approach and lets one practice. Footnotes haven't received much attention from W3C, so one has to improvize. Suggestions appreciated.

</head> is now in place; Nu missed that one. Thanks for the suggestions: absolute puts the box somewhere the reader (who is presumably looking at the cursor) isn't looking: not good. overflow:hidden; stays within the width of the caption and makes a cramped box if the image is wide, as it sometimes is. References often don't fold gracefully, and do better in long boxes. overflow:hidden AND float:left; sometimes breaks the caption at the anchor and puts the remainder below the image. Not good. float:left; puts a wide box below the image, or for the rare image at 100% with caption beneath, just below the anchor (where it should be). This appears to be as close to the desired original behavior as we can get these days. All things considered, I liked the old behavior better: overlap the image, text in box runs over image. Alas. (Who thought what needed fixing?) Tutorials still tell me that the box model permits boxes to overlap. Why, if its enclosing box overlaps the image, can't the text of the <span> be persuaded overlap it? ... Suppose I wanted to position the pop-up relative to the cursor, obscuring whatever lay below, in the manner of a tool tip? Do we have any control over tool tips? I will look into this further. I found a suggestion using <abbr> which might work--except that none of my browsers know about it: <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> TOR kept getting resets. Safari , iCab, Opera, Omniweb, Aviator, Vivaldi, Chrome and Chromium ignore it. Firefox at least underdotted WHO, but I presume that the expected hovering behavior is to display the unabbreviated title. I might make this work, if browsers cooperated .... (In any case, I'm already using underdots to go the glossary for neologism and jargon.)

Afterthought. Same code works at http://www.electromontis.net/evoligion/_C/Test11.html Added in edit: In its first working incarnation, the pop-up box did not displace the z=0 text as it now does. It simply hid it, which is acceptable. This suggests a major change in the behavior of the z-stacking algorithm, not entirely smoothed out yet. It might have been more useful if I had mentioned all this when behavior first changed, because it really looks like an HTML edit that did more than necessary. But--as always--I assumed it was something I had done, and in any case, I was focussed on writing rather than programming.

Worth a try. I added charset and title to the <head>, and put a picture where the code could find it, and it validated. Code now reads: ----------------------- <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Test11</title> <style> a span { display : none ; } /* Author or dagger: blue, no underline */ a.n { color : blue ; text-decoration : none ; } /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top : 0px ; /* Place box 1 line below anchor */ right : 10px ; /* Keep edge of box on screen */ display : block ; z-index : 1 ; color : black ; text-decoration : none ; font-size : .90em ; background-color: #ffd ; text-indent : 0 ; outline : 2px solid blue ; padding : 3px ; } .fl { float : left ; margin : 4px 16px 4px 0px; } </style> <body> <h2>Spectacular Mountain</h2> <figure> <img class="fl" src="http://electromontis.net/evoligion/_C/C-Images/pic.mountain.jpg" alt="Mountain View" style="width:50%"> <figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body> </html> --------------------- but the pop-up box still doesn't work the way it used to. I was pleased to see that the Nu validator does not fuss about 'width:50%;' for images. (How else do you keep an image proportional to page width as width is changed?)

2 out of 3 is good! Now for the remaining change of behavior. For several years, a bit of code has produced a pop-up box containing a footnote or reference when a link was hovered. It still works, but now if the pop-up box overlaps an image, the text avoids the image below. You can see problem if you paste the attached code into the Try It Editor at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain and hover on 'paradigm'. Something in <style> needs to be changed (apparently to keep up with bug fixes in html), but I can't find it. It seems to me that z=1 should make the presence of an image at z=0 irrelevant. It used to! (Immediate edit: I didn't see the attachment, so I changed the file from RTF to plain text and reattached...) Still no attachment visible, and it keeps saying 'No file chosen', so in case it means it, here is what the attachment would have said: --------------------------------------------------------------- <!DOCTYPE html><html> <style> a span { display : none ; } /* Author or dagger: blue, no underline */ a.n { color : blue ; text-decoration : none ; } /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top : 0px ; /* Place box 1 line below anchor */ right : 10px ; /* Keep edge of box on screen */ display : block ; z-index : 1 ; color : black ; text-decoration : none ; font-size : .90em ; background-color: #ffd ; text-indent : 0 ; outline : 2px solid blue ; padding : 3px ; } .fl { float : left ; margin : 4px 16px 4px 0px; } </style> <body> <h2>Spectacular Mountain</h2> <figure> <img class="fl" src="pic_mountain.jpg" alt="Mountain View" style="width:50%"> <figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body> </html>

Ah so; a whole world of largely incomprehensible help! Is this (turfed up Firefox - Tools - Web Developer - Inspector - html- Rules) an example of 'selectors affecting the style of an element'? It does suggest a certain mutability behind the scenes which could account for an inexplicable change of behavior. table { writing-mode: horizontal-tb !important; /* XXX remove when bug 1077521 is fixed */ display: table; border-spacing: 2px; border-collapse: separate; /* XXXldb do we want this if we're border-collapse:collapse ? */ box-sizing: border-box; text-indent: 0;} The tools appear to be Firefox specific, at least to some degree. I recently moved my web development to Firefox from Opera because Firefox displays &vltri; and (apparently alone among browsers) understands 'scoped' and Syrian fonts. Is there a book which might explain the dozen tools and hundreds of options that Firefox offers? I hesitate to buy tech books without being able to peruse them, having several times bought books from the web that sounded helpful but weren't. (I know of no useful bookstores between the Pyrenees and England except for a couple in Amsterdam, and I won't get to Boston until September.)

Good shot! I disabled my long and confusing CSS file, and both <sub> and <cite> started working again (even if the result is deformatted and ghastly). So now I recursively disable half the CSS file to isolate the offenders. Problem solved. Some helpful web guru's tutorial explained that it was always best to start with a reset, and provided a long template--including <sup> and <cite>. After removing this, <sup> and <cite> worked once again. The odd thing is that they worked for a long time with the reset in place, making me think that it was indeed some change at the W3C level that caused the change of behavior. Or a passing alpha particle.

Thanks. <div> <style scoped> dd, dt{ display: inline-block;float: left; } dt {clear: left; width: 110px; margin-right: 12px; text-align: right;} </style> worked for short lines, but as predicted, one needs <br> for multi-line <dd>s, and this fails when the page width changes. Also, I find zebra-striping useful here, and nth-child doesn't work on <dl>s. So: back to borderless tables. Sorry about the duplicate posting. Accidental.

Is there a way to force <dd> to start on the same line as <dt>? I'm making a Timeline; <table> works but causes a tag stew with classes on each <td>. All I want is a format like: 1861 Changes in CO2 might cause climate change. 1896 Arrhenius outlines effects of anthropogenic CO2. 1936 Callendar: doubling CO2 will raise temperature 2°C. 1972 Sawyer: by 2000, CO2 will increase by 25%, and temperature by 0.6°C. 2014 Hansen: a legal case can be made for children to sue the government .... but it seems to be awkward to arrange in HTML!

Is there a way to force <dd> to start on the same line as <dt>? I'm making a Timeline; <table> works but causes a tag stew with classes on each <td>. All I want is a format like: 1861 Changes in CO2 might cause climate change. 1896 Arrhenius outlines effects of anthropogenic CO2. 1936 Callendar: doubling CO2 will raise temperature 2°C. 1972 Sawyer: by 2000, CO2 will increase by 25%, and temperature by 0.6°C. 2014 Hansen: a legal case can be made for children to sue the government .... but it seems to be awkward to arrange in HTML!

Two tags, <cite> and <sup>, suddenly fail to work across 6 browsers under Mavericks. This suggests that all browsers call on a system file to interpret HTML. <i> still produces italics; other vertical-positioning tags work, so if there is a corrupted file, it is quite specific. Is re-installation of OS X the logical fix, or is there a simpler approach?

I create a z-1 box on hover for footnotes and references, with: /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top ; 30 px ; right : 10px ; /* Keep right edge of box on screen */ display : block ; z-index : 1 width : 95% ; color : black ; text-decoration : none ; font-size : 0.90em ; text-indent : 0 ; text-align : left ; background : #fcfaff ; outline : 2px solid blue ; padding : 3px ; } This has been working for several years; suddenly it crowds the text to the right of the right edge of anything below the hovering box. See the effect at http://electromontis.net/evoligion/_B/B05.shtml#F5.1 when you hover on the blue text in the figure caption--at least in Safari and Firefox. (I have changed many other presumably unrelated things, but not this css code.)

25 book chapters, with a common nav table in ssi that sets a 1-px border for <td>. Everything works. Now I want a timeline table without borders, (or border: 0px;) below the nav table. Seems trivial; the first 75 'obvious' approaches have not worked. I get borders everywhere or nowhere. It is inelegant to write <td class="no-border"> for each entry in the borderless table (500 times). Surely there's a better way? See the 2 misbehaving tables athttp://electromontis.net/evoligion/_G/Tim.shtml#Ti and, e.g., PALEOLITHIC. The first wants borders, the second does not. What have I overlooked?