Dodgy CSS/JScript/HTML Glitch

Hi

Please take a look at:
http://uk.vector-networks.com/support/optional_test.php
http://uk.vector-networks.com/support/optional.php

See the dodgy glitch? Right, both files should be similar enough that this shouldn't happen. I have already discovered it has nothing to do with the CSS or JavaScript, so unless you have evidence to suggest otherwise, its not that!
I detached optional_test.php from the dw template, inside dreamweaver itself but that should just mean less comments in optional_test.php.

I compared the two files using fc on the command line and nothing important seemed to be different.
Please help!!!

Thanks, Phil

Code:

---

From Working page
<h1><!-- #BeginEditable "pageTitle" -->Support<!-- #EndEditable --></h1>

---

Code:

---

From not working page
<h1>Support</h1>

---

I have no idea what the #Begineditable means but perhaps it is translated by the php and styled differently?


Vince

no, that is only a comment which DreamWeaver uses to know what he should be able to edit and what is locked. That won't be it.

by the didgy glitch, do you mean the menu dissapearing and the support menu being justified wrongly.

Or do you mean the list items shifting around?

Or the SUPPORT heading being misaligned?

Or the EMAIL text being a different size?

Or the subscribe button shifting?



The source code has quite a few whitespace differences. Apparently they have an effect on the layout (probably due to quirks mode). And the comments seem to make a difference too.

By 'dodgy glitch' ( I should have been more specific ) I mean the menu disappearing 'up' and behind the white bit, and the 'Support' heading being mis-aligned.

I use CSDiff to compare the two files, and all that points out as being different are the Dreamweaver comments. :rolleyes:

Thanks

Right then, chaps.. take a look at this!

http://test.vector-networks.com/supp...ional_test.php and
http://test.vector-networks.com/supp...l-comments.php

They use the same CSS and JavaScript files... I ran them through CSDiff and tweaked optional_del-comments.php until they were identical. So why is one fine, and the other still screwing up?!

Grr.... Perhaps I'm in the wrong job?

Possibly it's the crappy tools you're using. Do you realize that the file you're using (excluding the images) is nearly 100k in size? Someone without broadband is going to get very frustrated when trying to view your "support" page.

Anyways... onto the topic...

It's kinda hard to sort through all that without knowing what the CSS looks like.

It's also very hard to debug a page item that's entirely JavaScript-generated (which generally is a bad idea).

I found the solution. But before I give it to you, let me rant a bit. Your page crashed my browser, so you deserve it :D

Personally I hate the site. Not because it's ugly (it isn't), but because I hate the code behind it. Tables are the best part of it, actually. What I really don't like is the JavaScript-generated content. What if I have JavaScript disabled? Am I therefore not eligible for your advanced not-NS4 and NS6 stylesheets? The links to the are JS-generated. That's bad.
To have a stylesheet that isn't noticed by NS4 you simply put this into your normal (universal) stylesheet:

Code:

---

@import url("advanced_styles.css");

---

There shouldn't be a need for an NS6-specific sheet. If anything, you need an IE-specific sheet, but usually you integrate the IE-specific rules (if you need them) into the main sheet using various CSS hacks. If you want a separate stylesheet, use IE conditional comments:
<!--[if
or something like that.

Generating a JavaScript-based menu completely with JavaScript is not that bad. Again, though, this makes it quite hard to navigate the page with JS off.
I prefer to have the menu based on CSS hovering (doesn't work in IE) and then enhanced with JS (to make it work in IE and make it look better in other browsers). If the user has a bad browser AND disables JS, well, ...
This way the menu is accessible for text-only browsers.



That said, the problem is that you're missing a / in the link to the style-link-generating script in the modified version:
<script language="JavaScript1.2" src="/scripts/jScripts.js" type="text/JavaScript"></script>

The indicated slash is missing in the other version.

Firstly... your rant... I completely agree with every single point you made. I didn't actually design the site myself though you see, a web design agency did.

It greatly annoys me how many web design agencies don't seem to comprehend things that even I (a Novice) can do with my eyes shut. The one thing that made me laugh the most was how two guys from a design agency looked at me with completely blank faces when I mentioned a print stylesheet. Oh, and they didn't know what a CSS media type was.

Now the problem... it had to be something that simple, didn't it!!! Why do the biggest annoyances always have the simplest answers?! I tell thee, I'm in the wrong job.

"Get me out of here!!" *rocks back and forth*

Oh, and THANK YOU! I'd kiss your face, but thats impossible, and you'd probably hurt me.

Phil :)

Quote:

---

Oh, and THANK YOU! I'd kiss your face, but thats impossible, and you'd probably hurt me.

---

Judging from your username you're probably not female and pretty, so that assessment would be right ;)