Collapsiable Menu Help

Yakima · Post by **Yakima** » Wed Dec 16, 2009 7:43 pm

So, i can get it to work in IE but FF is being stuborn. This script works just fine in FF (as the example shows) but this is my result.

Anyone know anything about this to help?

Post by **Dray** » Thu Dec 17, 2009 10:07 am

Squffies.com had a collapsable table in its menu on the side, last time I checked.... though checking back it looks like the site exploded. :\

When I was messing around with those kinds of menus, I found that even the slightest spelling error (I guess 'coding' error) would through off the entire thing. Maybe you're missing a quotation mark or a close bracket or some stupidly little thing like that that internet explorer ignores but Firefox is a stickler about!

Post by **StarFyre** » Thu Dec 17, 2009 2:51 pm

I've found the solution, but I don't have time to post it atm. I have a chiropractor appointment in about 5 minutes >.>;; So, when I get back, I shall post.

Post by **StarFyre** » Thu Dec 17, 2009 4:32 pm

Alrighty then! Let's begin. This is the fixed file: http://www.silveredmagic.com/downloads/lsi_content2.htm

Be aware that I didn't grab the images, so none of them will show up here. Also, you don't need to grab the css file: I made no changes to it whatsoever.

The first major thing that I noticed was that the CSS file wasn't loading in firefox -- even more than the js not working, that struck me as odd, since the CSS file works just fine on all the rest of your pages. That told me that the problem was in the html file, not the js or css.

The second thing that I immediately noticed was that, when I downloaded the page with firefox, I saw this:

Notice the strangeness? There's a space entered between every letter, leading to strange keyphrases (ex: title became title ). And there's a strange character combination at the very top, the "yp" looking characters.

The major problem inherent in this file was that it became corrupted. IE and Oprah worked around the corruption, because they're a bit sloppier in how they work than FireFox is. FireFox tried to render everything, and so screwed up the linking/inclusion of other files.

I cleaned up some other things that were throwing FireFox for a bit of a loop after I fixed the corruption. You'll note that I have declared a doctype at the top of the page - I just declared Transitional ("loose"), because it's the easiest to get away with, but Strict is what should be declared for both good coding practices and the best cross-browser compatibility possible. The doctype is declared properly, and thus demands that certain things are done certain ways, so the file has been changed with those rules in mind.

First off, the "br" tag is never "/br", though most browsers will ignore the incorrect declaration at the moment. There are only two permutations of "br" -- for HTML standard, it's just "br", for XHTML, the tag becomes "br /" (because XHTML requires that all tags close). A proper doctype declaration doesn't let browsers "get away" with ignoring incorrect declarations, thus why I changed it.

Second: "center" is a depreciated tag, and will probably stop being supported, so I changed "center" to "div align="center"". Really, I wasn't going to change this, because the doctype let me get away with keeping it, but after the first menu box, you started having the strange declaration of " a name="info"> div align="center"> /a>" which isn't a legal declaration. A div can't be declared inside an "a" tag, only the other way around. Furthermore, these divs were never closed, another thing FireFox wasn't all that pleased with, even without the doctype declaration.

Third: At the bottom of each menu past the first one is a "p" declaration that is similarly never closed. I removed the "p" declaration in place of two "br" tags to give the space at the bottom of the menu that the original page had.

That's all I really changed, I believe. Of course, you can always remove the doctype declaration and change those couple things back. They really had no bearing on the initial problem of the dropdowns not working. That was just caused by corruption.

Yakima · Post by **Yakima** » Fri Dec 18, 2009 4:55 pm

Wow...thanks! *blinks* Weird...why did it do that? I never saw that when I opened it in Notepad... O.o

I feel very small and stupid now. LOL. And here I was on cloud Nine for figure some stuff out with CSS. Heehee....

I never knew about the tag thing...I'll try to change all those. I always used it that way for some reason. >.<

But thank you so much. I normally try to keep my pages simple to avoid this stuff that I don't know about. I once used Dreamweaver but it seemed so limited sometimes. Of course, my laptop died and I can't use it. It won't let me use it on this computer, only for a limited time, anyway. I'm sure if I could use a program like that it would help me in these situations but...

Post by **Dray** » Fri Dec 18, 2009 5:00 pm

Apparently dreamweaver isn't up to standard, so you would not only get problems like these on some browsers, but because you didn't go in and do the coding by hand, you'd have even less of an idea of what the heck was going wrong. XD It gets easier with time as you learn things when you do coding manually, at least!

Yakima · Post by **Yakima** » Fri Dec 18, 2009 5:06 pm

XD I've always coded my pages by hand. Well, not in the beginning. I used the Yahoo! Page builder for my first few pages at Falas Weyr. XD I still remember the graphic set I used. LOL

So, is it okay if I go through the file and remove the [] thingies?

My organize-framed mind hates them because I can't find anything for easy/quick update...or is that going to cause a problem, too?

Yakima · Post by **Yakima** » Fri Dec 18, 2009 5:09 pm

Star, I think this might explain part of it...when I tried to save that document at one point, it popped up with a box complaining about some UNICODE type thing. I changed it to what it said it needed/wanted. Notepad usually saves everything in ANSI...Might that explain the weird file result you got (but I never saw when I opened it?)

XD

Post by **StarFyre** » Fri Dec 18, 2009 5:35 pm

Likely the corruption happened sometime during the initial saving, You can tell it's not a huge corruption issue, simply because Oprah and IE handle it without trouble, but FireFox, when I went to look at the encoding options, was grasping at straws to try and figure out what the symbols were (For the record, when I was trying to look at the js and css file with Firefox through the "View Source" links, it was showing everything to me in Chinese, it was grasping at straws that damn hard =P ) Corruption is something that just happens. It's never really your fault, nor is it anything you can prevent easily.

EDIT: Actually, yes, that would probably do it. Proper encoding for most english webpages is UTF-8, which is ANSI standard, I believe.

And, actually, when I was working on fixing your page, I realized I'd been doing my "br" tags wrong as well. Way back in the mists of time, I was told "All tags must be closed! Thus, is actually "

... Which isn't legal HTML either. It's legal XHTML. Anyone here know XHTML? ..... Yeah. Didn't think so.

I'd decided that, since I was insisting on slapping doctypes on other people's pages, I might as well stop being a hypocrite and do it myself. WAAAAHHH Jezzu! So much breakage in small ways. But at least the browsers started listening to my CSS properly! ... Which, uh, yeah.. not always a good thing c.c;;

Anyway ^^ Feel free to ask me about html shtuffs. I either know how to do it myself, or can very easily find how to do it. Just because my pages are rather simple and static doesn't mean I don't know a lot of the fancier tricks =P I just decided a long time ago they weren't worth my bother for pages I'd probably end up changing two weeks later in annoyance. (That, and when I started Akelara, I didn't know much more than what you see these days. I've had webmaster jobs since then, blarg -.-;; )

The easiest thing I've found for writing correct html is using W3C's html validator. Though, don't use the Strict doctype declaration, because then you have to do retarded workarounds for the centering of elements in a div (by retarded, I mean about four lines of CSS code to achieve "div align="center"")

Don't hesitate to look at the W3C schools website, and for some fancier things, check out www.alistapart.com which is a totally awesome html, css, and design help website with plenty of articles on pretty much anything.

Most WYSIWIG (What You See Is What You Get) editors like Dreamweaver are horribly unstandard, and create broken pages in many browsers if you do more than a simple "top bottom text in the middle" outline. That, and you can't control how the pages bend and flex in smaller or larger windows. Nor can you easily do Compliance-with-a-capitol-C.. all those national laws about how websites should be designed for old folks. Variable text sizes, flex-i-fun, maintaining compatibility with IE 4...

Oh yeah, webmaster jobs are FUN.

But look at it this way =P Three years ago, I looked at my fiance and said, "I will never learn html, because it doesn't make sense." Now, I can look at you and say, "What type of page design do you want? I'll make it work." During those three years, I cursed, threw things, said I'd give up html coding forever, cursed the creators of so-called "web-standards", wanted to kill the creators of IE... pretty much anything you can imagine, I did. In the process, and with the help of Joe and the internet, I learned. One. Little. Tiny. Annoying. Step. At. A. Time.

Shard · Post by **Shard** » Fri Dec 18, 2009 5:42 pm

Screw old browsers.

Post by **StarFyre** » Fri Dec 18, 2009 5:44 pm

I'd love to say that.

But I had a webmaster job for an old folks home one time =P Know what you have to support?

Everything under the sun ohgod

It's actually in the law book. Specifically. Eff me.

Yakima · Post by **Yakima** » Fri Dec 18, 2009 6:05 pm

I try to make my pages work in both IE and FireFox. I use IE really only because I can click "Edit" from the window bar. FF dosn't let me do that. I can right click in the folder window but I find it easier with the IE edit thing. XD

I'm glad you knew how to fix it and what not. Is that thing on the top that you added something i should add to ALL my pages? Including fixing the align="center" tags?

I have to laugh at what you said about Dreamweaver. I used it for the first few projects, making the pages so simple. And then...I did this (please note that it may not show the button on the bottom...OR the images....grrr...It's old...very old CSS which isn't behaving. Sorry...IE may show it better...*nods*), on my own, coded myself. Got an A. XD. People were really shocked. I also remember people wanting to make the background static (not moving or whatever), when it scrolled and I was able to give them the actuall CODe for it since Dreamweaver didn't allow it. I mean, I lets you see the code and edit it, thankfully.

Anyway...To go reoranize my contents now. *would dance but feels like shit so doesn't XD*

Post by **StarFyre** » Fri Dec 18, 2009 6:22 pm

Mmm.. Here's the best answer I can give you.

Technically, browsers will react to pages much more reliably if there's that tag at the top. The flip side is that you will have to do standards compliance checking if you add that code in. So here's the thing: how much do you want a more reliable reaction to html and css, and is it worth the issue of validating every single page you have? That's for you to answer.

If you feel like trying to tackle that problem, the full code for true compliance is actually this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

The meta tag being there to tell a browser "This is the encoding this page uses. So USE IT!" UTF-8 is a bit restricting through, so if you often use strange characters you might need to use the much more lenient UTF-16 (unless you feel like constantly looking up the html character codes -- I don't have to, because TextPad puts the list right there next to my workspace)

If you want to go the compliance route, here's the website for validating pages. It'll tell you what's wrong (in general). Though if you decide to do this and come across an error you can't figure out, ask me and I'll be glad to help.

http://validator.w3.org/

Yakima · Post by **Yakima** » Fri Dec 18, 2009 6:41 pm

Is TextPad "better" the NotePad? XD It looks interesting...er. Like it changes the colors of the tags and whatnot...*nods* I think I might try that one...

I bookmarked the validator...even ran a test with my old lsi_contents2 page...wow. Something about the ">" tag it doesn't like.

Post by **StarFyre** » Fri Dec 18, 2009 7:01 pm

Textpad is like a more advanced form of Notepad. It does syntax highlighting, can open multiple files at once (ala this: http://www.silveredmagic.com/downloads/menu_bar.png ), and can save workspaces, so that you can just one-click reopen all those three-bagillion files.

I use an ancient copy of it, and technically I'm just using Joe's copy of it... it is a program that you have to buy (eventually), and costs about $30 US for a single-user liscence. On the other hand, the trial is fully-functional and doesn't insert anything into your files... I forget if the trial actually has a time limit, or if it just pops up "Hey, really, you should buy me" reminders...

EDIT: Oh, yeah, the whole > is bad thing. Usually you can tell what's going on by what the error message is. Sometimes its a case of having a /> (which it often doesn't like), or there's some tag that was opened somewhere and never closed, which might make other tags further on register as invalid.

Yakima · Post by **Yakima** » Fri Dec 18, 2009 7:12 pm

I just can't figure out why it's complaining about them where they are...like this one:

<img>[/b] 

It doesn't like the bold one...

Anyway, I like the colors and stuff. I liked that about Dreamweaver.

Lets me see if I make a mistake faster. lol I may just use it for as long as I can...

Shard · Post by **Shard** » Fri Dec 18, 2009 7:34 pm

That isn't the same format?

Post by **Dray** » Fri Dec 18, 2009 7:57 pm

Hey Starfyre, I have a question: In this site, those pokeballs in the corner switch to images of fakemon when you log in, dependent on a field that you fill out in your character account information. The players provide the image URL's for the fakemon pictures, but the default pokeball image is not provided by players, it's there 'automatically'.

The same thing occurs under each players post in the forums, which is really neat!

I'm not sure if that is (relatively complex) HTML or PHP or something else, but I thought I would ask if you knew how to emulate it! I would like to try to do something like that at some point!

Post by **StarFyre** » Fri Dec 18, 2009 8:13 pm

Bolding can't enclose an image tag, only font. So it'd need to be <img> 

Dray: My instant reaction would be to say that there'd need to be a database backing that up -- which would already exist, because you have the login information which has to be stored somewhere, afterall. What would then need to occur is just a small piece of PHP that would dynamically generate that small section of the page based on login information. This also works on forums if you have the ability to modify the code, because you'd just need to add that code snippet into the right area of every post (You know how forums work, in general, right? In truth, all these messages with pretty formatting are nothing more than rows in a table username-text-thread-order pairs, perhaps, or maybe more complicated, but in truth, that's all that really matters.) In the forums, the fakemon would be treated as a form of "signature" appended to the post, just like our sigs are dealt with here.

Yakima · Post by **Yakima** » Fri Dec 18, 2009 8:37 pm

Grr...I didn't realize the forum ate the code - and that I could disable HTML in a post. XD This is the full part of the code:

Code: Select all

<img src="images/pmenu_market.jpg" width="180" border="1"[>]<br><br>

It's the one encased in the "box" [].

Post by **Dray** » Fri Dec 18, 2009 8:56 pm

That's what I thought. I've had a vague dealing with the acornrack webbuilding... it's all a little over my head in dealing with PHP and the likes!

Do you happen to know where I could start searching for that particular kind of substitution with tables? The images all come from photobucket, I'm pretty sure... is there just some PHP code that says 'replace default item (pokeball.png) with item from table X (input in form where us players toss in the proper URL)'? I don't know what that function might be called so I don't know where to start googling for it!

Post by **StarFyre** » Fri Dec 18, 2009 8:57 pm

Oh! Try putting an alt modifier inside there.

Code: Select all

<img src="images/pmenu_market.jpg" width="180" border="1" alt="Market"><br><br>

See if that helps.

Dray: I'd need to do some research of my own, but I could probably start pointing you in the right direction after the insanity that is christmas has passed =P

Shard · Post by **Shard** » Fri Dec 18, 2009 9:27 pm

Alt-text doesn't work with firefox though, any more. (or ever, actually) it's the picture title now (or always should have been). which is stupid. and confusing.

Post by **StarFyre** » Fri Dec 18, 2009 9:33 pm

Yeah, but standards requires that the alt thingy be there. And don't look at me, I don't make standards =P

Actually, if you want to be rawr about it, the alt text is required to be there so that people who view websites with images turned off (or with the inability to view images for some reason) have an idea of what's supposed to be there.

...

Feh. Who browses the interwebs without pictures?

Shard · Post by **Shard** » Fri Dec 18, 2009 9:51 pm

No one, that's who.

Thing is I can't really see why it'd be called "standard" (unless you mean just for your work) if the function *doesn't actually work at all*. Dunno, I mean, ever since I started using Firefox there's never, ever been alt text visible with the alt= command. It does come up with title=, and I know that's NOT how it worked in IE (don't know about anything else). Fairly frustrating, because dreamweaver doesn't even have a spot FOR "title" inclusion, if you try putting anything in it it barfs up a message back at you that it's unacceptable. >_> of course, I'm using the older non-adobe Dreamweaver, maybe they changed it in the newer version but I couldn't care less, since adobe can kiss my ass.