Fix for website . . . possibly

[jpskewedthrone]

OK, I've changed a field setting on my website. If anyone out there is using FireFox and has a chance to take a look, see if that fixed the error. Let me know if not. Everyone with Explorer should be able to see the website now with no overlapping of the text and right menu bar. If not, please let me know.

Also, I've added a few more links to the Buy! Buy! Buy! part of the site, since B&N now has it available. Plus I added in a link to Clarksworld Books, since they have it for sale as well.

I'm still playing around with how to get just the cover art up on LJ without a link required.

Comments

[pbray.livejournal.com]

It's alive! Cool, it displays just fine now.

[jpsorrow.livejournal.com]

Cool! Now to verify it's working for Firefox and that should satisfy all of the emails I received about errors. (Unless you're using FireFox.) Thanks for the fix. I hadn't had a chance to seriously play around with new things yet. Hadn't even gotten around to emailing Yeep.

[jennifer-dunne.livejournal.com]

Looks good on my work screen, too -- which I'd assume had the same IE settings as Tricia's, but who knows...

Congrats on the website going live.

[pbray.livejournal.com]

For displaying your cover in your LJ, try this tag in your LJ entry:

Syntax (using words instead of bracket symbols for illustration purposes)
left angle bracket img src="http://www.sff.net/people/jpalmatier/joshcovermed.jpg" right angle bracket

And here's the html tag:

all in the name of bug-testing...

[deborahkalin.livejournal.com]

you're gonna love me... yeah, the sidebar now displays on the right the way it should and it's no longer covering up any text. Yay!

However, now your footer text (the copyright line) isn't displaying after everything else. instead, it's displaying at the bottom of the green box, which means the text which overflows the green box is written over the top of it. (Hang on. Just checked this page in Explorer, and the green box flows all the way to the bottom of the text, so you're probably confused right about now, right? In firefox, the pale green box only goes as far down as the bottom of the cover image, the dark green box is behind that and only goes as far down as the bottom of the dragon/sidebar image; then there's the footer text underneath that. And your page text overflows all of it, so it's laid atop the funky blue background image for quite a ways.)

If I had to guess, I'd say this is to do with floats. (I presume the sidebar is floated?) Firefox adheres to W3C standards, which means the parent element *won't* auto-enclose a floated child element. Explorer doesn't adhere to this and the browser automatically encloses floated child elements, so it might look like your design is fine if you test in IE. I'm pretty sure Opera/Safari/Netscape/Mozilla also adhere to the W3C standards and don't auto-enclose either.

There's a couple of fixes out there, the most common one being to add a <div class="clear"></div> to the parent element, after all the floated elements, where "clear" is defined as being 1px in height and having overflow hidden or other tricksy elements. Another one is to define the parent element, in your case "container"?, as having "layout: table", which will make Firefox auto-enclose.

I've made some FF screencaps for you: top of the screen (http://flyservers.registerfly.com/members5/deborahmcdonnell.com/images/JP-Home_top.jpg), and overflow (http://flyservers.registerfly.com/members5/deborahmcdonnell.com/images/JP-Home_base.jpg) (large pix, so I didn't embed them here).

Hope this helps. If you have no idea what I'm talking about, feel free to email me (you can get my addy from my website).

Re: all in the name of bug-testing...

[jpsorrow.livejournal.com]

Thanks for all the suggestions. I'm in the middle of creating exams right now, but when I get a chance I'll check all of your fixed out and see what happens.

And you may be getting an email from me then. *grin*

Re: all in the name of bug-testing...

[deborahkalin.livejournal.com]

no worries!

Re: all in the name of bug-testing...

[jpsorrow.livejournal.com]

OK, I've added the div class line after all the floaters as you suggested, but of course can't test it to see if it worked or not. If you get a chance, could you take a look? I've only done the fix to the home page, not any of subsidiary pages. And it doesn't seem to have screwed up the page in IE.

Thanks for the help. And for the screencaps. They were helpful in seeing what the problem was (although I did get it from your description as well).

Re: all in the name of bug-testing...

[deborahkalin.livejournal.com]

Hi Joshua, I checked out the home page, and it still didn't load properly, so I've had a dig around in the source-code for the home page and your stylesheet.

You can find the altered files here: home page (http://flyservers.registerfly.com/members5/deborahmcdonnell.com/JP-Home.htm) and style sheet (http://flyservers.registerfly.com/members5/deborahmcdonnell.com/josh_style.css).

in summary: I've defined the .clear class in your stylesheet, and added it to a couple of places in the homepage code. I've also wrapped your supportingText and linkList divs in a parent div (called wrapper in the altered stylesheet), and I've added a display: table to supportingText so that it shouldn't overflow the green in the background. Also, I noticed that the linkList was floated left, and to get it working on my machine at home I had to float it right.

I think this should fix the problem in most browsers. Good luck!

Re: all in the name of bug-testing...

[deborahkalin.livejournal.com]

oh, forgot to mention: when you load the altered homepage it won't style properly. that's just because i didn't change the call to the stylesheet in the code, so it can't find the .css file.

Re: all in the name of bug-testing...

[jpsorrow.livejournal.com]

I uploaded both of your files (you're putting way too much work into this, BTW; but it's greatly appreciated). When I used your index file with your style sheet, a few of the pictures didn't show correctly (only half of the throne appeared, for example) and the links on the right didn't overlay the dragon picture, they blocked it out with green. This is all on IE of course. But when I used my original index file with the div clear command you suggested before, and your style sheet where the clear command is defined, then everything works like I wanted on IE. Check and see if its working on FireFox.

And again, all the help is appreciated.

Re: all in the name of bug-testing...

[deborahkalin.livejournal.com]

we have victory! it's all working happily now, with the supportingText all on green and the footer neatly at the bottom, and the dragon happily on the right and... all is well with the world again.

Re: all in the name of bug-testing...

[jpsorrow.livejournal.com]

Yippee!!! I'll add the appropriate line to all of the other subpages and that should be that. I hope. *grin*

Re: all in the name of bug-testing...

[deborahkalin.livejournal.com]

actually, looking at where you have the line, i'm not sure it's doing the work so much as the style sheet (remember i added "display: table" to the supportingText class? I think that might be what's helping firefox. because when i visit your other pages, they're displaying happily as well.)

Re: all in the name of bug-testing...

[jpsorrow.livejournal.com]

That could be. I did just add the line to all of the other pages (it was rather quick). But either way, at least they are happily displaying now. I added a thank you to you on the homepage. With applause. It's nice to have a completely working webpage before that first convention.

Re: all in the name of bug-testing...

[deborahkalin.livejournal.com]

glad to help out :)

[clarkesworld.livejournal.com]

Thanks for linking to my store!

-Neil

[jpsorrow.livejournal.com]

No problem. I knew you were reading my LJ. And you are the ONLY one to have the cover up there, and the cover copy from the book, which I assume you sneerched from my website. I'm still waiting for the "others" to get the cover up there. *grin*

[clarkesworld.livejournal.com]

:) Yep. The cover and description were liberated from your website.