Hello,

I'm having trouble with layers that are 'Shown' when users scroll over an image.
The layers, though placed on top of each other, appear at different places on the page. That is, they are not where I placed them, and despite the 'L' 'T' Values being the same they are not in the same incorrect positions.
The Prevent overlaps box is not marked and so it baffles me why the layer would jump halfway up the page. Is this a case of gross WYSINWYG, or is there a way of training layers to stay where they are placed?

I hope this makes sense,

Thank you in advance.

Peter

Hi Peter

I trust that you found you Dreamweaver 8 courses useful.

If you are using an older web browser to test you pages, this could cause the problems as some older browsers do not support layers.

The site below may be able to help you out, as it has example code and explains layers very well.

http://livedocs.adobe.com/dreamweaver/8/using/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=08_cssp4.htm

Hope this helps
David

Hi David,
Thank you for that link.

Am I right in thinking I shouldn't really use these layers then? If only Netscape will work it seems odd that Dreamweaver would include this functionality.

Peter

Hi Peter

These days in the recent browsers, layers should work the same in all browsers.
It would be really handy if you could send us the URL of your site so the I can have a look at the code etc.

Thanks
David

David,

The site isn't live yet, I've got a bit of time till we actually launch so i'm going through everything with a fine tooth comb.

Could I send the code in a message?

Peter

Hi Peter

Yes it is fine to send it through in a message. You can send it to info AT microsofttraining.net and mark it for attention of david.

Thanks
David

Hi Peter,

I've had a look at your code. I cannot see any other named layers apart from Layer 2 and Layer 4. I don't believe there are any other layers in your code. However, you do have CSS code for Layer 1 and Layer 3, and these blocks of CSS markup can be safely removed as you seem to have deleted those layers from your code.

When I saved your code you e-mailed through into a HTML file on my local machine, and ran it in my browser, I received many Javascript errors in my Error Console (Tools -> Error Console in Firefox). I had to make about 5 changes to your Javascript code before Firefox correctly parsed your code. All of the errors were because a new line break had appeared which broke up the commands. For example,
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args(i)))!
=null) { v=args(i+2);
...should not be split/broken at that point, because != is a comparison operator ("not equal to") that needs ! and = to be together as one for the code to be valid.

Another one was i++, splitting inbetween the pluses. ++ is an auto-increment, usually used in loops and cannot be split with a new line.

I realise you most likely haven't put these line breaks into the code yourself, it could be a result of copying and pasting. Check your file and see if the line breaks exist, it could even be in the template, in which case your template needs fixing up.

The reason why your page wasn't working in my browser was because Javascript encountered those errors, and therefore suspended all Javascript code, meaning the hide/show layers triggers weren't working.

I'm not sure why your layers aren't appearing in the same position. They did for me once I fixed the javascript. However, I notice Layer2 T value is 505, whereas Layer4 is 505px. This could be the problem?

Let me know how you go or if you need any more explanation of the above.

Regards, Rich

Thank you very much Rich,

Can i just say, I'm so glad I took this Dreamweaver course as the support is fantastic. Thank you.

I thik the splits occured when I pasted the code into the email as they are not there in dreamweaver. The != is not split, and the i++ that I can see (although I'm not quite shure what you mean) dont appear to be broken up.

Adding the px to layer 2 has put both layers in the same position, but they do not sit where they are placed in the design view. I guess this is 'what you see is not what you get', so would adjusting their position in the design view be the only option?

I'm quite worried now that my whole website is riddled with errors. If I perform a Target Browser Check, could you let me know if my errors are serious, and how to resolve them? Are there any other checks I should be doing?

Regards,

Pete

Hi Peter

I'm glad to hear that you find the support useful.

When using Javascript generally 1 error will completely break the code when it s on the web. If you are using Javascript, open the html file using either Internet explorer or FireFox, if will notify you of errors, Internet explorer does this in the bottom left hand corner of the browser screen. If will display a yellow warning triangle and displays the test error. If you click the triangle, you will be shown all the javascript errors ands the lines that they occur in. Alternatively if using FireFox use the method that Rich described above.

It is worth reading up on why code behaves differently in Internet explorer and FireFox. As you users could be browsing with either one of these browsers. If you use xhtml files, this will help with compatibility. However after a little tweaking all displays errors can be solved and you site will display the same in all browsers.

Rich should get back to you re the errors that occurred within you code.

Hope this helps
David

Peter,

Just to confirm: are you saying the layers appear in their correct positions in Dreamweaver design view, but NOT when you view the page in a browser? This could happen, but as both layers are 'absolute' and both have T and L values, they should be in exactly the right places, especially in modern browsers.

Please let me know which browser and version you are testing in.

I would upload your page to the server to do a few web tool checks. I understand the page is a draft at the moment, but if you don't link to it from anywhere else, then the public can't get to it... only you can by typing in the exact URL. Once you've uploaded the file, run these tests:

http://validator.w3.org (you can also browser to a local file, or copy/paste your code, but i wouldn't copy/paste as it may split lines again, like in the e-mail)

http://jigsaw.w3.org/css-validator/

Also check for any javascript errors using the methods detailed above. Dreamweaver shouldn't have created any errors within its behaviours, so you should be okay.

If you do upload the file to web space, let me know and i can have a look at it on-line. This would be best, because then all the images would be there too. Alternatively, e-mail the file to forum @ microsofttraining.net as an attachment.

Target browser check could be useful, but this report should also contain information on alternatives or how to fix code. I wouldn't worry about any errors concerning browsers less than version 5.0 as they are fairly old now, and not many people would be using them

Regards, Rich

[via e-mail]

Hi Rich,

Thank you for solving my original issue regarding the positions of the layers. Although after all that I think I'm getting rid of the layers for SEO purposes.

Having moved along now to checking all the coding and running the Validation and Target Browser checks, I be very grateful if you could let me know whether there are any serious issues.

The majority of my errors are to do with the bordercolour and backgroundcolour attributes of the TD tags, I'm sure these are simple issues so if you could give me a few pointers i'd be very grateful.

Thanks again for everything.

Regards

Peter

Hi Peter,

I've looked at the XML reports you sent via e-mail.

There doesn't seem to be any major problems. As you said, most of them are bordercolour and backgroundcolour properties, and these obviously only control the colour of the tables. So different visitors may see your tables differently, but other than that, the layout shouldn't be too different.

There is always a possibility of slight differences across all browsers and screen resolutions.

Marquee also doesn't work in all browsers, but a lot of visitors find Marquee annoying and hard to read anyway. Making text bigger and different colour, or just standing out from the rest can sometimes be more effective. Not everyone has time to wait for a scrolling bit of text, especially shoppers in a hurry!

The bordercolour and backgroundcolour properties are pretty much obsolete, and you'd be better off using CSS to style particular tables on your site.

See this explanation on one way to do this effectively.

Regards, Rich