Talk:Main Page

From Tearsofblood

Revision as of 14:52, 20 November 2007

CSS and JavaScript Issues

I did some research on why my CSS was broken on IE. It turns out that the comment before the doctype on the HTML pages generated by the wiki code puts IE6 and 7 (the version I was testing on) into quirks mode. What this means is that when IE reads the page, it decides it's a non-standards compliant page. Since most old non-stantards compliant pages relied on the buggy CSS support of older browsers, it emulates these bugs. In other words, it starts acting like IE5.

This is very bad. IE5's CSS support (and thus the quirks mode) is buggy as hell. I don't mean to sound rude, especially after offering to help out, but I refuse to work around IE5 bugs just to get IE6/7 to work. The version of MediaWiki being run by this site has been altered to insert a comment at the start of the page. A normal MediaWiki (for instance, the one at Wikipedia) server doesn't do this. Whoever made this change broke CSS in IE6/7.

I'm going to attempt to find a work around to force IE into standard mode. If that can't be done, I'll see if I can get in touch with the admins of this site and talk to them about the issue. If neither of these approches work, I don't know what to suggest, other than finding a different wiki hosting service.

-- Levi 03:20, 19 June 2007 (EDT)

Ok, here's the latest on the CSS hacking adgenda. Firtsly, I've made some changes to the code I'm trying to get working. I found a more efficent way to make the changes, so the code I'm trying to get working now is a lot cleaner than the stuff I had up before. (Which got I rolled back once I realized how horribly it broke IE7.) I also added the new background and moved the content block down the page like the current site, rather than at the top like my earlier version.

Secondly, I've found two sources that created the problems I saw in IE. The first was, as I mentioned before, that the site puts IE into quirks mode. However, while working on a mock-up (in standards mode), I found another thing that was causing issues. The site is set up with a stylesheet to correct for IE6 bugs, but applies it to all versions of IE equal to or above 6. This means that it's compensating for things that have been fixed in IE7. Luckily, one line of Javascript, set up to only run on ver 7, can disable the offending stylesheet. I have it currently implimented in my mock-up.

Unfortunatly, I still haven't come up with a way to force IE out of quirks mode. There may be a Javascript hack I can use there to. I've found some reference to a function to put IE into quirks mode, so if I scour the MSDN documentation, perhaps something will turn up. I haven't bothered to bother the admins about it yet. Mainly for two reasons. Firstly, I haven't given up on finding a work around. Secondly, perhaps I'm just a pesimist, but somehow I doubt I'd get a helpful response. After all, if the server's been set up like this for some time, all the other wikis (at least those that bothered with custom CSS) where built to work around the quirks, so changing it would break there stuff.

Dispite the grumpy and frustrated post I made above, if I absolutly have to, I'll see what can be done to get it working, even in quirks mode. However, the sheer amount of crazy non-standard stuff you have to work around is staggering. It's bad enough working around real bugs, working around the emulation of old bugs is obnoxious.

Finally, my mock-up is posted at [1]. It currently renders correctly in IE7, FF2, and FF1.5, the three browsers I have to test with. However, I've made one change that we can't duplicate here by editing Header. I removed the above mentioned comment that causes so much grief. We'll need to find another method.

It doesn't yet impliment all the changes to link colors and header sizes that you've done, but they'll be easy enough to add later. It also dosn't attempt any of the more complicated graphical upgrades you've got planned. I figure there's not point getting fancy untill we can get the basics working. It also fixe s the current issues with Firefox regarding the user toolbar and the view tabs.

-- Levi 13:11, 19 June 2007 (EDT)

Levi, you're doing some marvellous things thusfar. However, looking at your mockup with IE6, I'm not entirely sure that things are working perfectly (although it's hard to tell whether or not they're things you already know about). Most notably, the text appears incredably small (changing the browser's text size to "large" makes things look a lot more regular. The width of the actual text content in the main content area, and the entire footer, are both a lot shorter than they should be. The views tabs aren't entirely right in several ways, and the width is much more than 800. I've prepared a screenshot of what I see here.

Again, I don't know if these are issues you're aware of, but I thought it was worth pointing out just in case.

-- Fire Wolf

Well, I don't have IE6 to test on, so I don't know how things are rendering in IE6. I'll have to take a look at the screenshot and try to figure it out, but without a browser to test on, it may be pretty tricky to work out what exactly is going on.

However, I belive I know why it is larger than 800 pixels wide as I just ran into this problem myself (in a way). As I haven't found a way to get IE out of quirks mode without removing the offending comment, I've started to work on making it render correctly in quirks mode.

Using an old hack, I managed to get it centered, but then I ran into another issue. The size of the Google ads at the bottom of the page is larger than will fit into the content area once I scale it down. In FF and standards mode IE7, it simply pokes out into the margin. It doesn't look perfect, but AFAIK there's no easy way to fix this. However, in quirks mode (and apparently IE6, even in standards mode), IE instead expands the size so that it fits. I haven't looked into a work around for this yet, but it's the next item on my adgenda.

I also have some ideas as to what may be causing the other problems. I'll look into fixing them as well. I should have a new version of the mockup posted some time soon, this time in quirks mode. Which means, if it all works, that we can actually use the results.

P.S. If you sign your comments with four tildes (~), it'll expand out into the username and time, like I've been doing. However, the "--" part you have to add yourself.

-- Levi 16:54, 20 June 2007 (EDT)

At last, at last. I've made it work. After finding no acceptable solution to the "expanding box bug" as it is known, I had a fit of inspiration. Using a bit of JavaScript, I moved the ads out of the content area and into the footer. In addition to fixing the problem in IE, it looks better too. Only one issue remains (in IE7, at least) and that with is the the personal toolbar. I haven't looked into it yet, but it should be easy to fix.

I've posted the latest mockup at the same URL I've been using (see above). The orange bar above the content area is intentional. It's a graphic that's exactly 800 pixels wide. If everything is working properly, it should be the same size as the content area. Please let me know if anything other than the personal toolbar is messed up in IE6.

I have to go to bed now. In fact, I should have done so hours ago, but I knew I was close, so I pressed on. I'll look into the personal toolbar after work tomorrow. Also, what size are you planning on having the header graphic be. I'd like to have the CSS for that ready, so that when Bear compleats it, we can put it up immediatly. Goodnight.

-- Levi 00:46, 21 June 2007 (EDT)

Levi, you rock my socks. Your mockup looks utterly perfect in IE6. I can't spot any outstanding problems with how it shows up in my browser. And the idea of putting the ad in the footer is very clever. In fact, I prefer it there, rather than having it clutter up article space, anyhow. If things are compliant on IE7 and Firefox as well, and any other browsers you have access to, go ahead and impliment the whole thing. I'll probably mess about with things on a mirror wiki (also on Editthis) to test graphical alterations, of course, but I won't screw with what you've got unless I know I have something that really works.

Incidentally, did you have any luck with changing "Tearsofblood" in the browser title bar to "Tears of Blood"? I've been looking up things on CSS sites all over, and haven't found anything useful at all.

-- Fire Wolf 20:09, 21 June 2007 (EDT)

Did the personal toolbar look a little messed up in IE6. In IE7, it was off to the left (instead of the right, where it belongs) and the little guy icon overlapped the username. I fixed this today, and as predicted, it was pretty easy to handle. Once I make a few final checks, it should go live sometime tonight.

My core CSS renders perfectly in Firefox versions 1.5 and 2.0. The IE specific fixe s make IE7 behave the same way. And, according to you, they work on IE6 as well. (Which is to be expected; while in quirks mode, they both act the same way.)

As for the title thing, I should let you know that it is outside the scope of CSS, which only handles graphics and layout and stuff, "presentation" as the jargon goes. The title is set by the HTML code of the page, which is automatically generated by the wiki code.

I've come up with two ways we could fix this, neither of which is ideal. The first would be to create a new wiki with the ID "Tears_of_Blood". The wiki software will then replace the underscores with spaces and it will work as desired. However, this would change our URL. It'd become "tears_of_blood.editthis.info", which is not as nice as what we've got now.

The other method would be to use JavaScript to dynamically rewrite the title. I havn't looked into the specifics, but I don't think it'll be that difficult to code. The downside of this is that, like the ad moving script, it wouldn't run until the page has loaded, so there may be a delay where the old title is still there.

There may be another option, but I'm not sure at the moment. If I come up with anything, I'll let you know. BTW, you neglected to answer my question about the header graphic's size. Do you already have a size worked out, or does that have to wait untill the graphic is finished?

-- Levi 19:48, 22 June 2007 (EDT)

Yeah, the user bar did at first show up on the left, but now it looks perfect and it's on the right. So that's all good. It all looks great.

Regarding doing the title ... we do already have a wiki entitled Tears_of_Blood, which was set up about a year ago as a failed attempt at this same project. But you're right that it doesn't look as nice as tearsofblood in the URL.

Given the options, I think the Javascript option you suggested is best. I could deal with a brief delay. Oh, and would it be possible for it to read "Page Title - Tears of Blood, a D&D Campaign Setting", if possible? Rather than just "Tears of Blood"? Yeah, I know. I'm a picky boss. :P

And I'm expecting the header to be 800x200. Sorry I didn't see your question the first time.

-- Fire Wolf 05:12, 23 June 2007 (EDT)

Ok then, I'll get to work on the script. As for the longer title, sure, it can be done just as easily as changing it to "Tears of Blood". However, for legal reasons, it might be better to say "a d20 Campaign Setting". Technically, "DnD" is a registered trademark of WotC, and unlike the d20 trademark, they do not allow permision for others to use it. I guess I'll leave that decision up to you. It's unlikely that "the spooky wizard" would take action against us, but we should follow the rules anyway.

As for the header graphic, thanks for the info. Currently, it's set up at 160x800, but that's not hard to change. I didn't know exactly how big a gap you wanted. I'll fix that up when I update the header to change the titles.

-- Levi 18:32, 24 June 2007 (EDT)

Excellent work, Levi! This is certainly ready for the community to mess about with now. I've been away for a week, but when I get home again I'll start putting this on the boards.

You're right about using d20 instead of D&D. It's probably wisest. Although I'm not sure we qualify as sue-able when we're not making a penny out of this, or affiliating ourselves with Wizards.

Anyway, I've just changed it to read "d20" myself to save you the trouble. I think I know enough to change one word by myself. :P

-- Fire Wolf 06:07, 2 July 2007 (EDT)

Oh, I'm not sure if this is true of all browswers, but in IE6, there is writing saying "<[endif]-->" at the top centre of the page. It's written in black, so it's hard to see due to the background, but it's still an issue I thought I should bring to your attention.

-- Administratum 13:18, 3 July 2007 (EDT)

Thanks for clues

This site helped me breakthrough some concepts I was having difficulty with, especially with header and the files necessary to get this look. I was able to copy and past the background section of this wiki's header page. Now I would like to figure out how to alter the portels(I think they are called on the left), here there is Giant in the navigation box).

I am a copy somebody elses code and modify it kind of person. It is fun getting into trouble and backing out of it. --Rcollman 09:52, 20 November 2007 (EST)

Image links

The big thing was figuring out how to find where the files were. For example /images/anEditThisWiki/2/27/Background_page_content.jpg in the header code. I could not figure out the 2/27 or what ever. So what I did was to

1. upload my background page into my wiki
   1. wiki jumps to the basic info page of the image automatically
   2. Do not move an inch off this page
2. In my browser, I viewed, page source
   1. scrolled down til I saw something that looked like the above
3. Copied just that part of the code
   1. pasted it in the discussion tab of the image and put a no wiki around it
4. As admin I returned to the header page
   1. Went to edit and found the code, then pasted the new over the old
   2. Saved header
5. Don't like the image, just upload another file, but same it as the generic name, in this case Background_page_content.jpg. Saves changing the header code.

Thx again --Rcollman 09:52, 20 November 2007 (EST)