Funky IE 5.0 CSS rendering problems

[dugfresh33]

It actually seems as though Microsoft is anti-CSS. I have never spent so much time building a web site in my life. I've got (most of) the concepts of CSS design down, and with a few clicks here and some typing there, I have a web site that works beautifully and flawlessly in NN 7, Moz 1.5, Firefox, Firebird, and Opera. Then, after testing the site in IE 5.0 (yes, a good portion of my target user base will most likely be using that browser), I learn that I actually have countless hours of troubleshooting to go...

Here's the problem, or rather the result of the problem as IE 5 sees it:

My page loads, then sends the right container div flying down the page. On it's own. No action is required by the user; just loading the page produces this unsightly effect. AND, it's completely random. Sometimes it flies off down below the window threshold, sometimes it only flies down about 150 pixels, sometimes 350, or 412, or 271 or whatever it feels like at the moment. So, a couple of things:

1) This particular page is based on a template created in DW. It is the "Contact" page, and it was built by modifying the "Mission" page and saving it as contact.html. The "Mission" page worked fine.

2) The only thing different about the "Contact" page than any of the other pages, is that it uses inline javascript functions (pulled from this very forum) to mask e-mail address names from harvesting progs.

3) but here's the kicker: I decided to view the source in IE and it turns out that it decided to stick a title in my link-to-external-stylesheet tag that said something like, "Disabled for previewing in something or other." Then it proceeded to embed my external stylesheet in the code of my "Contact" page. What is that all about?

If you need the CSS and the page code, I will have to get that to you later, as I don't have the files with me at my FT job.

Thanks for anything you can tell me...

[matauri]

Do you have any containers that you have {height:100%} ? IE5* throws the container down the page, yet it works fine in other browsers.

I have never seen anything that resembles the rest of your post. Is this a DW thing?

[dugfresh33]

I created a template in DW, which essentially locks out certain predetermined (by the developer) areas of the code so they can not be altered, while leaving fully-editable areas, well...fully editable. I'm sure you knew that or could have figured that out, but I included that to clarify a point: all pages created with that template are essentially created equal. If the other 5 pages in the "About" section that were created from that template don't send the containers flying about, then it stands to reason that creating a sixth page for the "About" section (the "Contact" page in question) should yeild the same behavior as the other five.

So, in answer to your question, "Yes, both my right and left containers are set to 100% height." It was the only way my repeating background image would repeat when scrolling down the page. Any other method I used to set the height of the container, resulted in the background image repeating down to the bottom window frame of the browser, and when the user would scroll the page, the background image wouldn't repeat any more. And I believe that was in all of my browsers.

-- Well...let me get back to you on that. I may have set the containers to "Auto"...but I doubt it. --

But, like I said, the height setting is the same in all of my documents, but the "Contact" page is the only one that flips out in IE 5.

The only element that I can attribute this problem to, would be the inline javascript code that I use to render e-mail addresses. Why that would have anything to do with anything is beyond me, but then a lot of what Bill Gates & Co. do is beyond me.

I will go home tonight and break that page from the template and see what happens. I'll also get rid of the js and do the e-mail addresses the good ol' fashioned way and see what happens there. And, I'll mess around with container height options, too.

-- Basically, the javascript code assigns variables for the different parts of the e-mail address, then assembles them at execution time, effectively hiding any e-mail addresses from harvesting software; there is never a complete address anywhere in the code for anyone (or any software) to see. Of course, a person could view the source and assemble the variable assignments visually, but that takes time. --


Thanks so far. Any help is appreciated as this thing has become an absolute nightmare for me.

[masterpeace]

Having worked with Dreamweaver templates & CSS I can say that the problem shouldn't be in the template itself... All the template system does is keep track of what pages use what template & auto update them when you update the template. If something was out in the template section it would go out on all the pages that use that template...

It sounds more like it has "decided" somewhere between being "mission" to "contacts" that it has should read the CSS differently on certain browsers.

This may have been caused by a screwed up setting when you saved the contacts file in DW, or it may have gone haywire when you added the javascript (thought I think that is less likely)/ Probably the easiest thing to try to sort it out is to open the file in a good old fashioned text editor (not dreamweaver)and copy the head/title etc from the missions file inc the template info) and paste it over the current stuff in the contacts one (esp the part where it "imports" the CSS).

That should fix the CSS link and get rid of the "Disabled for previewing in something or other" problem.

If the java script is in the head then you may need to make sure you have an editable section in the head and manually add that into that section, being careful not to put out anything else, but you can put the javascript in the actual HMTL if necessary anyway.

Dreamweaver is generally pretty good, but I know it has inbuit setting which are suppoed to "fix" bugs in certain browsers. I avoid them in general so i can't be sure, but it sounds to me like somehow the setting has been "tunred on" and it has changed the CSS link to try fix what it sees as potential problem but has in fact created one.

This is not that surprising as even with the latest version, Dreamweaver MX, I've found the inbuilt CSS editor doesn't actually show all current CSS standards properly in it WYSIWYG view...

Let us know ho you go, and if the copy paste thing doesnt work, a link to the file 7 CSS might point us in the right direction.

Tania

[dugfresh33]

Originally Posted by masterpeace

All the template system does is keep track of what pages use what template & auto update them when you update the template. If something was out in the template section it would go out on all the pages that use that template...

That, too, is what I thought, but this morning something even funkier, well...equally as funky as my original problem...happened. I have a div that is set up for my side bar navigation links and that is where the editable region begins. Above that, in the non-editable region, I have a div that contains the company logo. I have that logo hyperlinked to the index.html page; a "return to Company XYZ's Home Page" link that appears on every page. Well, I also have my links set up to change background color on rollover. The width is 100% so that it fills the entire space the hyperlink object is occupying - sort of like a button. It works beautifully with text links, but apparently when IE 5 gets a hold of a hyperlinked graphic, all hell breaks loose and the user is not able to click on the graphic. So, after screwing around with it for hours and hours, with no fix for IE that didn't end up breaking the other browsers, too, I called it quits, left it the way it was, and decided to add a text link in a div above the side navigation div. (Remember, the editable region started after the logo box and before the side nav box.) So, I put the Home Page link right after the logo box, outside of the editable region marker. Save template. Update the files that use the template. Perfect.
Then I realized that I didn't want the Home Page link to be active on the Home Page (to avoid unnecessary confusion), so I went back into the template and cut and pasted the Home Page link code underneath the editable region marker (so that it was now editable). Save template. Update pages that use the template. Update complete.
Open one of the pages that use the template and what do I see? NO HOME PAGE LINK. Anywhere. What the????! Scoot over to the code in Code View and... it was missing completely. It removed the Home Page link code. It's still in the template, but not in the pages that use that template, even though the template updated them. ???!

As if I needed this on top of the IE problem, which still hasn't been fixed. I have narrowed it down to the inline javascript code, though. But, again, what should that have to do with anything?

I will try to get that code posted by tomorrow. I am at my wits end...