Please can someone help me out with this problem, it is literally driving me nuts
I have created a webiste and for some reason it displays okay in IE6 but not in Firefox. I use firefox a lot and I presume so do a lot of Internet surgers so would really like my site to work in Firefox. The problem I believe could have something to do with the CSS and although I have tried now for for a day and half I am no nearer resolving the issue.
If you view both pages in ie6, they look okay but not in firefox.
The website is built around my hobby of internet television, that gre out of my job as a tv repair person. I got the website of OSWD and am finding it a bit hard as I have to amend my wording otherwise the website does not line up.
There are a number of validation errors that need to be corrected. The css errors, where a length is used without any units on them, would account for some of the differences in how different browsers render your site.
Once your pages are free of errors, then worry about cross-browser problems.
__________________
If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.
Why are you not testing them in Firefox at first then? Besides the fact that you should test them frequently in as many browsers as possible after each coding step you take during development you should never, never, never use IE 6 as primary measure.
See it from this side: Firefox displays what you have coded (and CFM… – ah, I never get that name together – has shown you all the errors you have in your code) while IE is guessing what you could have meant. Or, to say it differently: You have assumed that IE’s buggy behavior and interpretation of your code is the right way to go and then you’re wondering why browsers that actually do what you tell them (i.e. do it right) display it wrong.
I guess you got my point? Use standards compliant browsers such as Opera (currently the most advanced browser regarding support of standards), Firefox/Netscape/Camino, Safari, Konqueror for primary testing and IE only to check if it’s alright there, too. And then fix the issues IE is having, if necessary through the use of conditional comments.
Chances are, though, that if you get it good in standards compliant browsers there’s no need to tweak anything for IE because it may display it correctly as well. The key to cross-browser compliant websites is clean, valid, and semantic HTML (sorry if I’m annoying those that read this the 1000th time ).
Firstly thanks for the prompt repsonse. I have checked the validator error messages and to be honest the first one itslef has got me a bit confused. Please see an extract from the message below:
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
I have no idea why this would happen or how to go about correcting it. I downloaded the template from OSWD and used Frontpage to edit it. The code looks okay ( I am no coder), what I mean is there does not appear to be any thing missing, like quotation marks.
The reason I have used IE6 was because Frontpage displays the page in IE6. It was only when I had loaded the page to my site that I noticed the differances.
I would be grateful if someone could help me correct the first messge and then maybe I can try and figure out the next one etc.
FrontPage doesn't, I believe, use IE6 to render it, although it probably uses a subset of the Trident engine. But you have your problem right there. FrontPage won't ever give you valid code.
Anyway, it's because you're using a deprecated element, font. This is probably unavoidable with FP.
If you're using English, why are you using ISO 8859-2? Latin-2 isn't an encoding targetted at English, and you may have problems with it. Try Latin-1 (iso-8859-1) or 15 (iso-8859-15) or, even better, UTF-8.
Well, the validator gives literal feedback like a computer (why doesn’t that surprise? haha), you have to read “between the lines”.
If I check your index page the first error message I get is “there is no attribute ‘color’”. This might be surprising as nothing looks wrong. But the thing that is wrong is actually the font element.
At first I’m happy to see you’re using a strict doctype because that’s what you should use. However, after strict rules <font> has been deprecated (outdated, removed from the official standards) because it’s a purely stylistic element that has no structural value. Nowadays we separate structure from design. HTML is responsible for the structure and CSS is responsible for the design. So the <font color="…"> thing should rather be a <span style="color: …"> or something like this (style should also be written in an external stylesheet but that’s just to show you the principle).
Then when it’s talking about end tag omitted that means you forgot the closing slash on an image or something like that. In XHTML all elements must be lowercase, closed, attribute values must be enclosed by quotes, and elements must be properly nested. So your images must read <img … /> And also note that the alt attribute is required for accessibility reasons, even if you leave the value empty.
That should suffice for a start. Ain’t got too much time right now.
I had same problem with my website! Just one page Free Stuff for your Computer in Firefox it went all to the left. I tried all sorts but failed. So I deleted fire fox! It looks ok in IE I'm using Website maker 5X & it validates every page. So I'm in the middle of changing my docs back to IE!!
Regards
Frank
My website is www.aspecialdate.co.uk go to Free Stuff check it out.
Hello Johnathonsaunde,
One thing I notice was content of the gray boxes in left column were overflowing.
Change your CSS to look like this and see if it helps:
Thanks Excavator and to all who are trying to help me- you need to bear with me with on this one
Excavator the wording now appears as it should on Firefox so thanks for all you help on this. Although now the grey boxes are out of sync on the main page when viewed though IE:
Thanks for the detailed explanation of why went wrong. Although I can understand what you are saying I find it hard that someone without any programming expercience can learn all this. I got to admit I am no techie when it comes to this sort of stuff so any help is much apprecaited.
Is there any screen type editor similar to Frontpage where you can move the CSS around, I think I would find this a lot easy.
For example the wording above my grey and orange boxes, I think would be easy to move in a screen editor if one exits as I would really like the paragraph to go above all my boxes.
I have and am using this one. It is the best I have tried and the wysywyg is as good as any. It also allows to to view the results on any browser that you have installed without leaving the editor. The technical support is free and unstinted. Well worth a look. There is a free trial.
Thanks for the advice regarding the software. A quick question, does the software have a WYSIWYG for the CSS pages as this is where I fall down big time.
Also any ideas as to why I may be getting the problems I noted in my post above.
Kind regards. John.
Hi! Jonathon.
Like you, I too find most of my problems are due to CSS. The software is interactive and you can have split screen or switch full screen as you wish. It will also let you edit software on the internet.
Editing of CSS is only possible if it is included with the html. This is no problem. The css is best in the <head> of the code whilst under development and can be moved to it's own css file later.
You can download it free and the trial period is quite generous. They really are outstanding with support.
Give it a whirl. I don't think you'll be disappointed.
There are still css validation errors. http://www.usbtvtuner.co.uk/tvstick.htm
Some widths and heights are not correct. width:200; is not acceptable, there must be a unit included, width:200px;
Before you post, read our: 
Use standards compliant browsers such as Opera (currently the most advanced browser regarding support of standards), Firefox/Netscape/Camino, Safari, Konqueror for primary testing and IE only to check if it’s alright there, too. And then fix the issues IE is having, if necessary through the use of 
).
