Old IE Bug Report

Hi again. This is the bug report for the Sidebar Worksafe and Dramatic site themes. I tested them in Internet Explorer 5.01, 5.5 and 6.0 on a Windows XP laptop.

In addition to the copies of IE, I was also using Mozilla's Firefox with the Web Developer plug-in to edit the CSS, so none of these fixes should break in modern Firefox.

Sidebar Site Themes

I started with the Sidebar'd themes because they had the most problems. Most of the screenshots are Worksafe, but that's only because it's my favorite, the issues look the same in Dramatic, they're just more orange. Most of them were just dimensional stuff anyway, no big deal. Unless stated, all changes were made in worksafe and dramatic css.

P.S. - Warning! The screenshots are really large, so if you're on dial-up or something, you might want to skip them.

My IJ Overlapping

I started with this since it looked pretty serious, with the two columns overlapping like that on a page everybody uses a lot. Luckily, it was just a dimensional thing and was easily fixed. :D

The fix: added width: 100%; to #IJ-sitepage-content-inner.

The Peekaboo Bug Part 1

There were a few instances of this, where content disappears when you scroll, but is visible on mouse highlight and other shenanigans. The biggest issue was the first headers on the content part of the page losing their backgound.

The fix: added position: relative; to .section_head. Please note, in addition to worksafe and dramatic CSS, for a few pages, I also had to add this in the lj_settings.css file.

The Peekaboo Bug Part 2

In IE 5.5, it also made a few coloured blocks show up randomly and throw off the layout.

The fix: added width: 100%; to #IJ-sitepage-content-inner. Please note that if you've already made the fix for the My IJ Overlapping, you already have this.

Private Messages Tiny From

In IE 5.01 the From in the Private Messages table was smaller than the rest of the headers in the table.

The fix: I changed FONT-SIZE: 11px; to FONT-SIZE: small; in #message_list TD.headfrom so it matches the other headers.

Private Messages Table Stretch

This only happened in IE 5.5. In 5.01 and 6.0 the table was just fine, but in 5.4 it was stretched out a little bit.

The fix: change width: 100%; to width: 80%; in #message_box TABLE and #message_list TABLE.main.

Edit Pics stretched table

This one confounded me. The little box to upload a new user pic was stretched out quite a bit in all three of the browsers. Strangely, it was the least broken in IE 5.01, making the user scroll horizontally about three page worths to use the form... the other two stretched it out to immense proportions!

I looked and looked all through the HTML for the CSS and through CSS for the table styles... and it turns out, it was the little hr in the centre that was messed up. LOL!

The fix: remove MARGIN: 1em 10%; from the selector #IJ-sitepage HR.

I whistled for a tab, and when it came near...

The Journal Display page's tabbed menu is what gave me the most problems, and to be honest, I still haven't fixed it to my satisfaction (but it is more usable now). To begin with, the unselected tabs would span the entire width of the page in all three IEs, making the user have to scroll horizontally to use the options. A little fooling around in the CSS fixing other bugs caused them to stack vertically, no where near ideal as the selected tab disappears, but at least they were on the same page. A bit more work gave me this: ugly in IE 5.01, and slightly less ugly in IE 5.5 and 6.0.

The fix: add width: 100%; to the selector #IJ-sitepage #Tabs LI.

As I've said, I'm not happy with it, but I've included it here as making this fix would at least make the form more usable until I figure out how to get the older IEs to make the proper tabs without breaking it for everyone else.

Problems

In IE 5.5, the pages Userinfo, Recent Comments, Invite a friend, Syndication (RSS), and Update Journal all have their main tables/boxes/forms pushed down to begin after the ads have cleared. They display ok, and are totally usable, there's just a bit of whitespace before you get to them.

The problem is, I can't get to them via CSS because the stylistic information (like width and stuff) has been hard-coded in the HTML. Due to the cascade, that has precedence, so if you can edit the HTML, maybe either change the widths to be a bit shorter or strip out the hardcoded styles and give the tables/forms their own id so the CSS can handle it (which, if I recall correctly from reading earlier asylum entries, you were going to do anyway).

If you even think it's worth it. This only seems to be an issue in 5.5, and according to the W3C (lords of the internet! lol), it has only 1.5% of the market share.

Conclusion

Ok, so if you make any of these changes, tell me and I'll go back and double check to make sure everything is ok. Till then, I'll start working on the dropdown themes.

Bye for now.