CSS problem with Javascript Menu Bar
I am having a problem with a javascript menu bar on http://apcug.net/test.html but it is a function of the css file and the html code on that page. It works fine on http://www.apcug.net/APCUG/management/index.htm
Now it is true that the ones that work use http://apcug.net/style10.css and the one that does not uses http://apcug.net/style10g.css, but I have tried http://apcug.net/style10.css on the test page and while the two column stuff in 10g dont work the menu bar that is my problem has the same problem, and that is the longer the page gets, the more vertical the menu bar grows. To see this in action go to the bottom of the right column and select show earlier items, and the bar is HUGE.
In Firefox it displays
In IE it displays
Here is the HTML code for the first three items:
<div id="news">
<div id="newsdate">September 30</div>
<div id="newstitle">APCUG Reports</div>
APCUG Reports Q4 is online and available
<a href="http://reports.apcug.org/2011q4.htm">here</a>
</div>
<div id="news">
<div id="newsdate">September 7</div>
<div id="newstitle">10 days left till Software Freedom Day</div>
APCUG Region 3 Advisor Robert Vance reports that CPUser Group in the Pittsburgh PA area has
<a href="images/Agenda-1.pdf"
</div>
<div id="news">
<div id="newsdate">August 22</div>
<div id="newstitle">2011 Elections</div>
APCUG is looking for candidates for election to the Board of Director or Board of Advisors.
Do you know anyone in your group who might fill the bill? If so
<a href="2011/election.htm">p
The deadline for nominations is Sept. 15th.
</div>
If I have just those three the bar is fairly reasonable, but if I have 30 of them (either 10 copies of those three, or 30 with that same structure, in IE the bar is very deep, but in Firefox it is fine.
It is almost like in table statements if you have text that is not in a <td></td> area, it appears at the top of the table.
I certainly have blank lines between the </div> of one entry, and the <div id="news"> of the next item. Are these blank lines somehow floating to the top and making the menu bar deeper in IE, but not in Firefox, and if so what can I do about it, because I need to be able to clearly identify each new entry
The format for a news entry is
<div id="news">
<div id="newsdate"></div>
<div id="newstitle"></div>
</div>
Now it is true that the ones that work use http://apcug.net/style10.css and the one that does not uses http://apcug.net/style10g.css, but I have tried http://apcug.net/style10.css on the test page and while the two column stuff in 10g dont work the menu bar that is my problem has the same problem, and that is the longer the page gets, the more vertical the menu bar grows. To see this in action go to the bottom of the right column and select show earlier items, and the bar is HUGE.
In Firefox it displays
In IE it displays
Here is the HTML code for the first three items:
<div id="news">
<div id="newsdate">September 30</div>
<div id="newstitle">APCUG Reports</div>
APCUG Reports Q4 is online and available
<a href="http://reports.apcug.org/2011q4.htm">here</a>
</div>
<div id="news">
<div id="newsdate">September 7</div>
<div id="newstitle">10 days left till Software Freedom Day</div>
APCUG Region 3 Advisor Robert Vance reports that CPUser Group in the Pittsburgh PA area has
<a href="images/Agenda-1.pdf"
</div>
<div id="news">
<div id="newsdate">August 22</div>
<div id="newstitle">2011 Elections</div>
APCUG is looking for candidates for election to the Board of Director or Board of Advisors.
Do you know anyone in your group who might fill the bill? If so
<a href="2011/election.htm">p
The deadline for nominations is Sept. 15th.
</div>
If I have just those three the bar is fairly reasonable, but if I have 30 of them (either 10 copies of those three, or 30 with that same structure, in IE the bar is very deep, but in Firefox it is fine.
It is almost like in table statements if you have text that is not in a <td></td> area, it appears at the top of the table.
I certainly have blank lines between the </div> of one entry, and the <div id="news"> of the next item. Are these blank lines somehow floating to the top and making the menu bar deeper in IE, but not in Firefox, and if so what can I do about it, because I need to be able to clearly identify each new entry
The format for a news entry is
<div id="news">
<div id="newsdate"></div>
<div id="newstitle"></div>
</div>
I've noticed a couple of other things. the cleanup and modernization got rid of the front page junk but, it may be that those are being used to help control the menu. It looks like a lot of the styling actually goes on in the javascript.
It maybe that 11 year old Frontpage stuff just won't work correctly in an XHTML document without major surgery.
BTW nice to see an old friend. ;^)
It maybe that 11 year old Frontpage stuff just won't work correctly in an XHTML document without major surgery.
BTW nice to see an old friend. ;^)
ASKER
In effect I have done what you suggest. Most of the pages in the site use style10.css (and others, for different font sizes, using the resize javascript on the right most menu bar). Some of the pages using it have tables (http://www.apcug.net/APCUG/management/index.htm) is one that does, many others do not.
The test.html page uses style10g.css (and others for different font sizes) and it is a separate style sheet, similar to, but enhanced from the non-g style sheet. to support the two column formats (the other pages are one column, except for a few, that like http://www.apcug.net/APCUG/management/index.htm cheat and use tables to provide a semi multi column approach.
I realize browsers are different but the source for the menu bar says it is supposedly cross browser complient and with the exception of the one using the "g" stylesheet it seems to be, so I think my error must be in the "g" stylesheet which is what I asked about.
The test.html page uses style10g.css (and others for different font sizes) and it is a separate style sheet, similar to, but enhanced from the non-g style sheet. to support the two column formats (the other pages are one column, except for a few, that like http://www.apcug.net/APCUG/management/index.htm cheat and use tables to provide a semi multi column approach.
I realize browsers are different but the source for the menu bar says it is supposedly cross browser complient and with the exception of the one using the "g" stylesheet it seems to be, so I think my error must be in the "g" stylesheet which is what I asked about.
I keep seeing more problems. The big difference between FF in one and IE in the other is probably because is probably because there are adjustments for the IE4/5 defective box model that messed things up back when this code was written in 2000. If that code supports IE4/5, and that is very likely, then it will only work in quirks mode and even then I am not sure about it.
Ikeep looking through that stylesheet, and I cannot see anything wrong with it. If it is a facor in the problem, then it is some kind of interaction perhaps, but the sheet itself looks fine.
ASKER
Not sure about IE4/5, but it works so well for everything except my "g" page, and then only fails for IE, and so strangely.
What is quirks mode
What is quirks mode
ASKER
Any additional thoughts? I really need to understand why the length of my columns seems to be affecting the depth of the menu bar in IE but not in Firefox.
As I said it is analogous to a table statement where you have
<td>abc</td>xyz<td>def</td
I also just recognized who my helper was. It has been a long time since I saw you, CD
As I said it is analogous to a table statement where you have
<td>abc</td>xyz<td>def</td
I also just recognized who my helper was. It has been a long time since I saw you, CD
The problem is partially that somehow with ie your menu items height is being set to 94 px, while in firefox it is being set to 24px.
You should see if there is some sort of ie specific css that is kicking in here.
You should see if there is some sort of ie specific css that is kicking in here.
ASKER
go to the bottom of the right column and click "show previous items", it will make the right column Much longer, and if you scroll up to see the IE bar it is HUGE,much longer than 94, in other words the number of entries is somehow a factor, so I am almost certain there is no css setting 94px, that is just 24px plus some magic number that is a function of the number of entries or the total length of the column
Quirks mode is the way ie4/5 rendered with non-stanard specifications of the box model. You will recall how much browser specific coding we had to do to get IE, netscape, Mozilla, opera, and firefox to render the same. Fortunately we don't have to much of that any more. However IE now has this legacy code that it must deal with so with the older doctypes it will render as if it is IE5 so old code continues to work; sort of.
It appears that the big problem is that IE is using code to compensate for the deficiencies in the IE box model back in IE 4 and 5. It needs to render in quirks mode. With the XHTML doctype it trys to render to standard, but the values its getting from the code probably needs quirks mode. If you use an html 4.01 doctype it might be okay because that should force it into quirksmode.
The code is old and may have been cross-browser when it was written, but a lot has changed in 10 years.
I've been away quite a while. I just drop by and comment in a few questions where I might be of some help. I don't have the time or inclination to be here a lot.
It appears that the big problem is that IE is using code to compensate for the deficiencies in the IE box model back in IE 4 and 5. It needs to render in quirks mode. With the XHTML doctype it trys to render to standard, but the values its getting from the code probably needs quirks mode. If you use an html 4.01 doctype it might be okay because that should force it into quirksmode.
The code is old and may have been cross-browser when it was written, but a lot has changed in 10 years.
I've been away quite a while. I just drop by and comment in a few questions where I might be of some help. I don't have the time or inclination to be here a lot.
ASKER
I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> on it, and it still fails
I am in the same boat as you, CD. I top have been away quite a while. I just drop by and comment in a few questions where I might be of some help, but a lot of the problems are so specific that I don't have a clue on most of them.
But it is nice to see a friend from the old days.
"http://www.w3.org/TR/html4/loose.dtd"> on it, and it still fails
I am in the same boat as you, CD. I top have been away quite a while. I just drop by and comment in a few questions where I might be of some help, but a lot of the problems are so specific that I don't have a clue on most of them.
But it is nice to see a friend from the old days.
That is really strange. There has to be some kind of interaction going on between the generation script and something on the page. Let me dig around in the script and see if I can find anything. It is not my strongest skill but I might get lucky. No promises, but I'll give it some effort. Sort of a relic working on a relic. ;^)
ASKER
Sort of a relic working on a relic for a relic.
This may take some time. The script for the menu is 100% free of documentation and comments, and the variable names do not seem to indicate what they are. Plus most of the variables have been defined in another script file. They are definitely paying with the dimensions all over the place, and based on the attempts at browser detection it appears that the last version of IE they coded for was IE7. That sweetheart was part of the worse operating system in history (Vista).
I don't know if I can make sense of it without documentation, but even if we do solve it, I am pretty sure it will not survive with the next generation of browsers as it stands the file is 26k just for the menu. Even with all the junk on it this EE page is 34k for the whole page including the images. Full production $jquery libraries weigh less then that.
So a 26k script (plus additional files) with no documentation written in hieroglyphics is going to take some time and there is no guarantee that it will be fixable, or that I will even find the spot to fix it.
So old friend, this may take some time, but maybe one of these youngsters will come along and save the day by showing us up.
I don't know if I can make sense of it without documentation, but even if we do solve it, I am pretty sure it will not survive with the next generation of browsers as it stands the file is 26k just for the menu. Even with all the junk on it this EE page is 34k for the whole page including the images. Full production $jquery libraries weigh less then that.
So a 26k script (plus additional files) with no documentation written in hieroglyphics is going to take some time and there is no guarantee that it will be fixable, or that I will even find the spot to fix it.
So old friend, this may take some time, but maybe one of these youngsters will come along and save the day by showing us up.
ASKER
I appreciate the effort, old friend. The docs are sparse, but it comes from http://www.burmees.nl/menu/
If you have a different javascript menu to recommend I can consider it, but there are a LOT of files that would have to be upgraded
If you have a different javascript menu to recommend I can consider it, but there are a LOT of files that would have to be upgraded
ASKER
Stand by, I think I fixed it. I just noticed when I went to get the http://www.burmees.nl/menu/ URL that there was a 13.21 version of menu132_com.js and I was on 13.20. None of the statements about what it fixed were listed, but I installed it, and it appears to have fixed the problem. CD, see what you think.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I appreciate your willingness to dig into it Old Friend.
From one Dinosaur to another.
Incidentally if you are in seeing the future you might want to check out http://apcug.net/virtual/
From one Dinosaur to another.
Incidentally if you are in seeing the future you might want to check out http://apcug.net/virtual/
Thanks Don, and I'll look into that virtual conference; thanks for the invitation. :^)
You might be able to use that older stylesheet as a guide, but you need to create a new stylesheet that is usable for the newer structure.