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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Doctype difficulties

    I have never used DOCTYPES on my websites, but I noticed that with my current coding, adding padding to an image only shows up in Firefox, but not in IE (ex: http://avrilhq.com - "T in the Park Photos" update on 10 Jul 2007). I noticed that other sites with this effect have doctypes.

    When I added a doctype (any doctype - I've tried them all), the padding shows in the images in IE, and everything looks fine, however it now looks like this: http://img338.imageshack.us/img338/2159/messedupvq8.jpg in Firefox. It seems like nothing can look right in both browsers. Is something I can do to fix this? Thanks in advance?
    Last edited by Mrs_Ward; 07-11-2007 at 12:37 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Put the doctype back on the page. The padding should collapse on the top and bottom if the element is not a block level element like an image. Your first mistake was coding without a doctype in the first place. You second mistake was thinking that tables could be used for page layout. Read the link in my sig titled "Why Tables for Layout is Stupid?". Finally you need to validate your page. Currently you have 42 errors. This number might change after adding a doctype. See your errors here.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,637
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    The first thing you should know is what a doctype is for and why you should use it (also read this discussion and ALA's article).

    The second thing to know is that you canít fix bad code by just adding or removing a doctype tag. The right and only way to fix display issues is to fix that huge mess of code you have there.

    And the third thing to know is that usually Firefox displays the site as you coded it. And if the visual result is bad then most likely your code is bad. IE, however, tries to figure out what you could have meant and displays an acceptable result if you look at it superficially.

    So the only solution to your problem is to correct your code which means recoding the site from scratch according to the latest standards ((X)HTML strict!) and trends regarding semantics because the fourth thing to know is that tables for layout is stupid.

    Good luck.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Put the doctype back on the page. The padding should collapse on the top and bottom if the element is not a block level element like an image. Your first mistake was coding without a doctype in the first place. You second mistake was thinking that tables could be used for page layout. Read the link in my sig titled "Why Tables for Layout is Stupid?". Finally you need to validate your page. Currently you have 42 errors. This number might change after adding a doctype. See your errors here.
    When I first started the site, unfortunately, I had no idea DOCTYPES even existed, as I was 12 years old, haha. Things have been okay without them though, except this little padding issue.

    About the tables, I hear half the internet saying they're great, half say they suck. I automatically get the tables generated since I slice with ImageReady. The code it produces is also the cause of the majority of the errors the validator gives me, such as no quotations around certain values, capital letters, etc.

    Thanks for your imput

    Quote Originally Posted by VIPStephan View Post
    The first thing you should know is what a doctype is for and why you should use it (also read this discussion and ALA's article).

    The second thing to know is that you canít fix bad code by just adding or removing a doctype tag. The right and only way to fix display issues is to fix that huge mess of code you have there.

    And the third thing to know is that usually Firefox displays the site as you coded it. And if the visual result is bad then most likely your code is bad. IE, however, tries to figure out what you could have meant and displays an acceptable result if you look at it superficially.

    So the only solution to your problem is to correct your code which means recoding the site from scratch according to the latest standards ((X)HTML strict!) and trends regarding semantics because the fourth thing to know is that tables for layout is stupid.

    Good luck.
    I was afraid that the only way to fix this mess was to re-code the whole site Thanks for your advice!

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,637
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Well, actually I have real respect and am quite surprised that you were able to create such a site with ImageReady and itís actually working without major problems.

    Tables arenít bad by themselves. Tables are really good and useful (and even the only option) if you are displaying tabular data (e.g. sports results, name/adress listing, stock exchange tables, &c.). They are only bad if they are used for a general page layout because that would be abusing their original purpose.

    However, after overcoming the first obstacles in the process of transforming a site from table based layout to a modern, semantic CSS layout youíll joyfully notice that this made your site smaller in terms of file size, hence faster loading, a lot easier to maintain and much more accessible - due to cleaner, shorter, and more semantic code. In the end this will even save you a lot of work. And it will bring you respect among fellow web developers.

    If you canít do that by yourself then there are people that would be more than willing to help you - if you payed them, of course. But if you wanna have a professional looking site (and the design is really nice already) then you also need professional looking code.

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Well, actually I have real respect and am quite surprised that you were able to create such a site with ImageReady and itís actually working without major problems.

    Tables arenít bad by themselves. Tables are really good and useful (and even the only option) if you are displaying tabular data (e.g. sports results, name/adress listing, stock exchange tables, &c.). They are only bad if they are used for a general page layout because that would be abusing their original purpose.

    However, after overcoming the first obstacles in the process of transforming a site from table based layout to a modern, semantic CSS layout youíll joyfully notice that this made your site smaller in terms of file size, hence faster loading, a lot easier to maintain and much more accessible - due to cleaner, shorter, and more semantic code. In the end this will even save you a lot of work. And it will bring you respect among fellow web developers.

    If you canít do that by yourself then there are people that would be more than willing to help you - if you payed them, of course. But if you wanna have a professional looking site (and the design is really nice already) then you also need professional looking code.
    So, one thing I'm a bit confused about is when tables are considered "abused". Would that refer to when sliced layouts use tables to align themselves, as ImageReady does it? All I have is IR for slicing and do the rest in notepad. I can think of no other way to do it. I've gone through divs, had major problems, as well as iFrames. This table layout is the first that has looked acceptable in all browsers. Thanks again for your response!

  • #7
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Also, using tables "purely" (i.e. if on the same page you don't have a table with tabular data) for laying out content isn't valid HTML. This "purely" sounds stupid, but here it is:
    Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Perhaps the easiest way of considering whether a table is appropriate or not is to add a border around all the <td> entries. If that makes the content look stupid then the content doesn't belong in a table.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,637
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by Mrs_Ward View Post
    I've gone through divs, had major problems, as well as iFrames. This table layout is the first that has looked acceptable in all browsers.
    The way you say that confirms to me that youíre thinking too much from a visual point of view. Iíve explained it numerous times before (maybe I should really write a tutorial about that) but before you start designing you have to structure your content semantically. You put all your text and content related images in the document and start deciding whether something is a headline, a paragraph, a list, a table, etc.. The content has to make sense already without any styles. You must be able to read it from top to bottom and get the message.

    And then you start dividing this content into logical sections, e.g. header, content, footer, and sub sections within the content like main, info, ads, or whatever (assign names and classes according to functions of the element(s), not their supposed look).

    After you have the content sorted out you can start styling the page, i.e. apply stylistic images (images that arenít directly related to the content but are only to make the page look good) as background images through CSS to certain elements, you add colors and stuff, and you position the certain sections using floats or direct positioning (be careful with the latter one, seems easier at first but can turn into a nightmare if youíre not using it wisely).

    Sure, figuring all that out will take some more time in the beginning but as I said it will save you a lot of time and money in the end. Get some inspiration on http://csszengarden.com (read the page thoroughly and study the HTML and CSS). Also refer to my first post in this thread where I linked to an article about semantics.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    The HTML has to make as much sense to someone listening to the web page or reading it in braille with their fingers as it does on your mobile phone or computer screen. You then add a separate stylesheet for each media tyle to define its "appearance" for that particular media.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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