Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    My website is not displaying correctly in Firefox

    Hi all,

    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.

    Please can you take a look at http://www.usbtvtuner.co.uk/ and the link on the first review http://www.usbtvtuner.co.uk/tvstick.htm.

    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.

    Any help would be really appreciated.

    Kind regards. John.

  • #2
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    3,066
    Thanks
    2
    Thanked 319 Times in 311 Posts
    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.

    Main page -
    http://validator.w3.org/check?uri=ht...Inline&group=0

    http://jigsaw.w3.org/css-validator/v...usermedium=all

    tvstick.htm -
    http://validator.w3.org/check?uri=ht...Inline&group=0

    http://jigsaw.w3.org/css-validator/v...usermedium=all

    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.

  • Users who have thanked CFMaBiSmAd for this post:

    Johnathansaunde (12-31-2007)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Johnathansaunde View Post
    I use firefox a lot […]
    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 ).

  • Users who have thanked VIPStephan for this post:

    Johnathansaunde (12-31-2007)

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I've always thought that during your lectures you quickly google "semantic HTML" and stick whichever one hasn't been clicked in the link

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    I think I need some helps with this one!

    Hi all,

    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.

    Thanks in advance. John.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.
    Last edited by Apostropartheid; 12-31-2007 at 02:04 PM.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • Users who have thanked VIPStephan for this post:

    Johnathansaunde (01-01-2008)

  • #8
    New Coder
    Join Date
    Dec 2007
    Location
    Lancashire
    Posts
    36
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    	
    	.lbox {
    		color: #eee;
    		padding: 3px 12px;
    		margin: 0 0 15px 0;
    overflow: auto; /*clears floats*/
    		background: #6E6E6E url(lb.gif) no-repeat bottom left;
    		/*removed height*/
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Johnathansaunde (01-01-2008)

  • #10
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    a bit better now!

    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:

    http://www.usbtvtuner.co.uk/test/Internet_Music/

    Any ideas as why this maybe so?

    Best Regards. John.

  • #11
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi VIPstephen,

    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.

    Once again thanks. John.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.mmaus.com/bestaddress.html

    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.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi all,

    Any ideas please?

    Best Regards. John.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Johnathansaunde
    Hi effpeetee,

    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;

    Frank.
    Last edited by effpeetee; 01-03-2008 at 09:28 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •