College Ave furniture store 
Problems with expand/collapse
Last night I changed the way Scripting News is rendered in HTML, and while it works in Firefox on the Mac (the browser that I use) it is broken in a bunch of others. This afternoon I’m going to try to get it working everywhere.
The advice from readers, some of it quite confusing, starts here.
I’ve got MSIE 6 running in Parallels, so as I go I’m testing there and in Firefox/Mac.
Here are the changes I’m making, in order…
1. Apparently the <a name=”xxx”> element is causing a problem, the purpose of it is to enable permalinks to work within the archive pages, Colin suggests making this the name of the <div>, so that’s what I did. (This got today’s elements expanding and collapsing in IE, but not older days. Very weird.)
2. In the stylesheet, added width:400px; to both .show and .hide and padding-left:15px; to .show. (That successfully widened the body of each post in MSIE.)
3. I eliminated the table I was using to indent the body text. (Now the older days expand and collapse. Hurrah!)
4. Added another 5 pixels of padding for a little bit more indenting.
5. At this point it appears to work in both MSIE 6 and Firefox/Mac. I will now download Opera and try it there. (Downloaded and installed, but I can’t get it to display any web pages including scripting.com. Very very strange. If you have Opera installed, could you try clicking on the pluses and minuses on scripting.com and let me know if it works. Apparently it does.)
6. Removed some old CSS and Javascript includes from the head section.
7. Added “min-width:400px;” to the .hide style, per Colin’s advice.
Scripting News Annex 
Posted by Colin Faulkingham on October 20, 2007 at 12:05 pm
Dave
I sent you and email to your scriptingnews at gmail address.
Posted by Jacob Levy on October 20, 2007 at 12:21 pm
Still the -/+ thingies do weird things in IE on XP: the first -/+ collapses EVERYTHING, then when I click the first -/+ only the first story is expanded. Other -/+ collapse/expand only that specific story…
WEIRD! 🙂
Posted by Bryan Schappel on October 20, 2007 at 12:47 pm
The collapse works in Opera on the Mac as well as Safari 3.0 beta.
Posted by Ed on October 20, 2007 at 1:36 pm
here is what happens in MSIE
Posted by Colin Faulkingham on October 20, 2007 at 1:52 pm
Dave,
I think you can fix Ed’s problem with a min-width:400px; on .hide CSS class. I will test this theory and let you know if it works.
Posted by Ed on October 20, 2007 at 2:55 pm
Dave I think you should make one good stylesheet and set all formatting in that file. You can still use tables if you want but use css to set width padding etc etc. The problem I encountered in MSIE could be fixed by setting a around the titles and permalink. you give the div a width of 400px
Instead of using the you set the formatting via css. So you would have something like
.titles {
width:400px;
font-family: Verdana, Arial, Helvetica;
color: #000000;
font-size: 10pt;
font-weight: bold;
}
You can also loose the lines
since you no longer use them..
Posted by Ed on October 20, 2007 at 2:58 pm
mmm not all code got through. The lines I’m referring to are
< script language=”JavaScript” src=”/mktree/mktree.js” >
< link rel=”stylesheet” HREF=”/mktree/mktree.css” >
Posted by Ed on October 20, 2007 at 2:59 pm
And of course I was talking about a <div class=”titles” >
Posted by Colin Faulkingham on October 20, 2007 at 3:12 pm
I wouldn’t suggest using a <div tag for the title. Your site will be better optimized for search engines when using heading tags.
I tested the min-width:400px; on the .hide CSS class and it fixed the bug Ed pointed out in IE. You could added it to both the .hide and .show class if you wanted to.
Also, after your finished making all the tweaks. You will want to put the JavaScript and the CSS in separate files. Doing this will cache the files for users locally and will decrease the page size even further. Which in the end will decrease server load.
Posted by Colin Faulkingham on October 20, 2007 at 3:15 pm
BTW for some reason when you first lunch Opera it won’t let you type in anything in the URL bar (very weird indeed). Close and re-open a new window and it will fix that problem.
Posted by Dave Winer on October 20, 2007 at 3:25 pm
I just added “min-width:400px;” to the .hide style and deleted the old unused Javascript and CSS includes.
Posted by Ed on October 20, 2007 at 3:31 pm
min-width:400px doesn’t work
Posted by Colin Faulkingham on October 20, 2007 at 3:53 pm
Ed your right. Opps! My goof! I was looking at my local version of the code incorrectly. :-0
However, since it only happens on IE and when all stories are collapsed which, is not necessarily the most typical way the page will be displayed it might not be that big of a deal.
It might work by adding it to the h4 tag with style=”width:400px;” I haven’t tried it yet.
Posted by Ed on October 20, 2007 at 4:04 pm
Dave just rewrite the whole page and clean up the code.
Posted by Ed on October 20, 2007 at 4:08 pm
since there are a few more issues in MSIE7 with your page..
Posted by Matthew Wilson on October 20, 2007 at 11:26 pm
Hi,
With Javascript disabled, selecting the “+” icons seems to go to the wrong URL. For example, with “Validating the validator”, I get http://www.scripting.com/validatingTheValidator, which isn’t found. But if I click on the blue icon after the headline, I get http://www.scripting.com/stories/2007/10/19/validatingTheValidator.html.
Posted by Gary Secondino on October 21, 2007 at 5:19 am
Hi Dave,
I’ve made several screen shot for you to illustrate what I see in Safari 2.0.4. Below each screen shot are the step by step actions taken to arrive at the result. Hope this helps you.
http://www.flickr.com/photos/50055592@N00/1672027154/
http://www.flickr.com/photos/50055592@N00/1672027160/
Posted by Larry on October 21, 2007 at 6:38 am
Clicking on the pluses and minuses works in Safari 2.0.4.
Posted by Colin on October 21, 2007 at 8:23 am
The issue Gary is experiencing has more to do with the iFrame Google map. I noticed it doing weird things to IE7.
I am not sure how to fix it possibly with display:none; in the .hide CSS class. However that might cause other issues.
Posted by Andy Brown on October 21, 2007 at 10:46 am
Looks like it is working in IE7 now on XP. Nice job.
Posted by Rich Brown on October 21, 2007 at 5:05 pm
Dave:
I’m checking Scripting News at 9:00pm EDT Sunday 21 Oct, and the collapse/expand is almost working perfectly.
I’m using Safari 2.0.4 on MacOSX 10.4.10. All items expand and contract properly *except* the College Avenue Furniture Store. It doesn’t expand, although one of the photos does appear, overwritten by the other articles…
Posted by Stanley Krute on October 23, 2007 at 9:38 am
Some datapoints on current expand/collapse
performance under XP:
I ran the following test on 4 latest browsers:
[a] one by one, from top down, close any open nodes
[b] one by one, from bottom up, open the just-closed nodes
[c] resize the window and repeat
Results:
o- No problem opening or closing any nodes in any of the
o- No opening/closing-other-nodes side effects
o- Firefox 2.0.0.8
Column widths remain constant. No column overlaps.
o- Opera 9.24
Content column and rightmost column widths change slightly as nodes open and close. No column overlaps.
o- Safari 3.0.3
Content column and rightmost column may have slight initial width changes. Long lines in content column can run over rightmost column.
o- IE 7.0.5730.11
As nodes close, content column gets narrower and narrower. No column overlaps.
By the way: of these 4 browser versions, only Safari and Opera pass the Acid2
test. Given that, the Safari overlap issue noted above hints at an
uncleanth in the coding.
— stan
Posted by Stanley Krute on October 28, 2007 at 5:50 pm
The expand/collapse UI fits blogs like a glove. It’ll be interesting to see how quickly it spreads. Thanks Dave and Colin.