Ok, to begin, I know it is virtually impossible to create a site that will work perfectly on any browser, and any operating system. But I am at a lost here.
I wrote this site completely from scratch, first one ever, with a lot of help from people on these forums. And I thank all of you. The scripting is sound, and follows "the standard" if there is such a thing, but the results on different browser, and systems is driving me nuts.
It work perfectly on IE for PC, and what I mean by that, I get the result that I want, but also I get what I would expect to get logically from looking at the scripting. Now is that a good thing or a bad thing that IE work properly is a debate that I don't really want to get into here. The thing is, try it on Netscape 7.1, and OMG the differences. I would expect some, but these. The cell padding is off the wall, makes it all out of alignment making the page twice a long as it needs to be. Not to mention, not all the JavaScript commands work as they should, or should I say, as they do in IE.
And don't even get me started on Mac's. What works in IE for Mac's does not work in Safari, and vice versa. The div tags scripting for the buttons at the bottom does not work in IE for Mac's, but it does for IE for PC.
I have read the statistic, what browser is mostly used, what OS is most command, what resolution is most likely used, and so on and so forth. But I am still at a lost. The company I am doing this for are Mac users, but the client is a PC user, with an OLD system. And I am a PC, newest system. So when I send them sample as to see where thing are, and how they are going. One loves it, the other hates it, see this see that, and change this and change that. And I haven't even started the site yet. Just working on the template, and when/if it is ever ready I can just put the content in and link the pages. But until I get all this crap worked out with the systems and platforms nothing can proceed.
So can any, or all people interested, check out the site, and suggest or offer tips on how it can be improve the performance based on their personal browser type and OS.
I am sorry for the long post. They are the words of a tired and exasperated person. It feel good rant a little.
If you are interested: (It is in Danish)
This is what it should look like. (http://www.birkemusik.dk/test/whatshould.jpg)
And the map (found from the link "se kort") (http://www.birkemusik.dk/test/map.jpg)
Thanks in advance.
Fang
09-10-2003, 04:42 AM
Start with validating, the HTML and CSS, both do not validate.
Change the file extention from html to css. This it why the style sheet does not work in Mozilla etc..
<link rel="stylesheet" type="text/css" href="contacts_files/theStyle.css"> and the file itself.
You have <a class="green" href="http://www.birkemusik.dk/test/website">Undervisning</a><br><br>
Why not have a margin-bottom in class="green" and do away with the <br>'s
You have <td width="175"><p class="left">
Just give the <td> the class, no need for the <p>
Dare I mention the incorrect use of tables for layout.
Enough for now :)
Fang
09-10-2003, 04:49 AM
Start with validating, the HTML and CSS, both do not validate.
change the file extention from html to css. This it why the style sheet does not work in Mozilla etc..
<link rel="stylesheet" type="text/css" href="contacts_files/theStyle.css">
You have <a class="green" href="http://www.birkemusik.dk/test/website">Undervisning</a><br><br>
Why not have a margin-bottom in class="green" and do away with the <br>'s
You have <td width="175"><p class="left">
Just give the <td> the class, no need for the <p>
Dare I mention the incorrect use of tables for layout.
Enough for now :)
p2bc
09-10-2003, 04:49 AM
Dare away...
What should it be. Expamle would be nice.
Thx by the way.
p2bc
09-10-2003, 05:00 AM
When you say change from html, to css, you mean the file itself. The "contact.html" file should be contact.css???
Y is this necessary, it call a style sheet that is a css file. From what I have read this is valid. This is just for my personal knowledge, not question you in the least.
:)
p2bc
09-10-2003, 05:09 AM
http://www.birkemusik.dk/test/contacts.css
Ok changed the extension to css for the file, but not much difference that I can see.
And can a Mac user explain why on IE (Mac) the teacher picture will not always load. It is the simplest of commands and well nadda. Even if I control click and select load image.
:confused:
That truly has me confused.
96turnerri
09-10-2003, 05:39 AM
the reason why that pic may not load could be to do with the macs privacy settings, it may not display it as it thinks it is a banner/advert
Fang
09-10-2003, 06:56 AM
The style sheet:
<link rel="stylesheet" type="text/css" href="contacts_files/theStyle.html">
The file extension is wrong, should be: theStyle.css
type="text/css" which is css and you are using html
same for type="text/javascript" use .js
p2bc
09-10-2003, 08:00 AM
Fang:
The "theStyle" sheet has a css extension always has.
If you try "http://www.birkemusik.dk/test/theStyle.css" you will open the page. If you try "http://www.birkemusik.dk/test/theStyle.html" you will get and error message. Not to mention, if you look at the source, which I think you did, 8th line from the top, is
Not sure where the 'href="contacts_files/theStyle.html"' came from. That it why I am confused with your post.
Sorry
96turnerri:
When you say Mac privacy setting, is that independent to the browser, because the same Mac computer, 2 different browsers, IE and Safari. Not to mention, on the same browser, it might not open some pictures, but open others. And all those html files are exactly the same. I copied and pasted the information into my template file and did a save as. So I don't think it has to do with the privacy setting, because why for some it thinks it is a banner, and for others it does not.
96turnerri
09-10-2003, 08:10 AM
this is true i thought u meant for all macs, but reading ovr it again u dont, maybe the settings are different or one has updated patch if you know what i mean??
p2bc
09-10-2003, 08:17 AM
No, I mean I tried it on 5 Mac's, (G4, iMac new/and old, iBook)(OS, OsX) you name it I did it. It just doesn't jive. The kicker, almost all give different results.:confused:
96turnerri
09-10-2003, 10:36 AM
i havnt a clue then sorry
Fang
09-10-2003, 12:51 PM
You have two files theStyle.css and theStyle.html, both with the same contents.
This is confusing Mozilla, delete the .html and the css should work for Mozilla.
96turnerri
09-10-2003, 12:58 PM
what exactly is mozilla? is a different name for msie?
Fang
09-10-2003, 01:18 PM
Mozilla (http://www.mozilla.org/) is an open source browser similar to Netscape's navigator.
It supports standards much better than Internet Explorer.
Mozilla is a MUST have if you are developing websites.
96turnerri
09-10-2003, 01:22 PM
ok im gonna get it and see what im missing out, what sort of advantages does it have?
p2bc
09-10-2003, 01:55 PM
Originally posted by Fang
You have two files theStyle.css and theStyle.html, both with the same contents.
This is confusing Mozilla, delete the .html and the css should work for Mozilla.
Fang man, I real appreciate the help, but I don't have 2 theStyle files, just the one with the css extension.
Try it:
Copy/past the link into your browser (I not making a link so you don't think I am rigging it.)
One comes back with an error message, and the other displays the scripting.
I don't know what else to tell you. When I get to the office tomorrow, I will flush the server, but I check is from home and it seems in order.
Fang
09-10-2003, 02:48 PM
Mozilla thinks there are two. Everytime I save your page with Mozilla I get theStyle.html and theStyle.css.
96turnerri
09-10-2003, 03:35 PM
i have mozilla now and when i save it i also get both .html and .css
Fang
09-11-2003, 02:12 AM
You must validate your documents:
In theStyle.css the declaration text-aline should be text-align
This is causing Mozilla to recognise the MIME type incorrectly.
Here is valid meta data: note the language da not dk:
<meta http-equiv="Content-Type" lang="da" content="text/html; charset=windows-1252">
<meta name="copyright" content="s a Consult Rabbe by maintained and Created Designed">
Attribute values must be quoted, all of them.
What is this?
function openwindow(url);
function openmap(url);
function load();
function showButton(xButton)
In javascript no semi-colon after closing accolade
};
Some of these errors are small, but can cause major problems.
p2bc
09-11-2003, 04:01 AM
Thanks.
I downloaded HTML-Kit, and been cleaning the page up with most of their suggestion.
These are for the pop-up windos for the
Teachers - function openwindow(url);
Map - function openmap(url);
Message in status bar - function load();
Roll over 4 the bottom buttons - function showButton(xButton)
You were also mentioning something about tables.
And by the way, I change the
<td width="173"><p class="left">
to
<td width="173" class="left">
But it did not work.
So I tried
<td width="173" style="margin-left: 0.5cm">
But that did not work either. Could you explain what you meant when you said get rid on the <p> tags.
I also addes the margin-bottom: 20px to the green attributes for the side menu, but it did not work either. Any clues.
Thanks a lot for the time and effort.
p2bc
09-11-2003, 04:07 AM
Here is valid meta data: note the language da not dk:
<meta http-equiv="Content-Type" lang="da" content="text/html; charset=windows-1252">
<meta name="copyright" content="s a Consult Rabbe by maintained and Created Designed">
Is there a reason my it is completely backwards, or could I put
<meta name="copyright" content="Rabbe Consult by Maintained and Created Designed">
The a/s is like saying Inc.
Fang
09-11-2003, 04:32 AM
I just copied what was there, you can change the order.
p2bc
09-11-2003, 07:34 AM
I found out why for the most part it was doing looping thins on a Mac.
Which it can, but not if you plan for any user using Mozilla compatible software to see it. And because of this, any code that follows afterwards is just ignored.
I want that to accommodated for different resolution of user monitors. So I made it that the instrument button
are always at the bottom, of the page. But this cause some problem when viewing the content.
Basically I using a div tag with a overflow, with a set width, and height to compensate but it is not working entirely as it suppose to.
Can someone take a look, and me iron out the glitch.
The problem is it does not activate when the height is less that it suppose to be, it still uses the main page scrollbar for that .
It only activates when the width is reduced. Which is ok, but it is the height that is the problem because the button cover the text.
If you check the site, and reduce the width, and height you will see what I mean.
Concentrate on validation first. Every time I save your page the file extensions are changed to html, no js no css.
All the browsers are having problems reading your code.
Fang
09-11-2003, 10:47 AM
Here's what a validated version looks like.
Don't edit it with Frontpage or any other MS editor
toicontien
09-11-2003, 01:30 PM
On the subject of one of your pictures not coming up on MAC browsers:
On NS 7.1 Mac OS 9 the banner displays fine. On IE 5, same OS, same computer, the banner is a PNG file (Flash not installed for IE). Now when I go to open the banner in a new window (control + click), I get a message saying IE doesn't have a helper application to open the PNG file.
On some MAC browsers, you may be running into a graphics compatibility problem. People may need Quicktime to have the ability to view some PNG images, especially if your image has been saved with the latest options for PNG images.
As a general rule, M$IE has crappy support for PNGs.
p2bc
09-11-2003, 01:45 PM
Never thought about that, and png's
I was always under the impression png started on Mac's.
I use to get these e-mail from a buddy (a mac user) and could never open them until I installed IE 6.
Go figure.
DaveSW
09-11-2003, 01:45 PM
Originally posted by p2bc
According to W3schools tutorial, all this:
Dave:
Yes actually I did. Because it was the only thing in that particular reference.
p{font: bold 14px sans-serif)
now it looks like this, and it works( on a Mac that is, always did on a PC)
p { font-size: 14px; font-family: geneva, helvetica, arial, sans-serif }
Fang:
Thanks for the work, but one question. What did you do. I see the <tbody> tags in the tables. Not sure their purpose, and I see you changed the layout of the style sheet. And the order of the action script with the onclick commands. Not sure how this all effects the final outcome.
Trying to figure this out so I don't make the same mistakes again.
Can you...explain???
Fang
09-12-2003, 01:55 AM
I converted your page to xhtml and then back again to html4.
This was the easiest way to produce a near valid document.
The <tbody> tags were left in as then do not affect your document layout.
You can change the layout back to what it was, the content changes are important.
The layout change was due to another validation program.
I'm not sure what you mean by "action script with the onclick commands"?
p2bc
09-12-2003, 02:58 AM
Was:
<a href="... onclick(this.href)...>
Now reads
<a onclick(this.href)... href="...>
Thanks
Fang
09-12-2003, 05:51 AM
The order is not important, change it if you like.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.