Development Web design different browsers

Discussion in 'Software' started by seebul, 3 Feb 2008.

  1. seebul

    seebul Minimodder

    Joined:
    9 Aug 2005
    Posts:
    1,211
    Likes Received:
    1
    Hi, i've been trying to teach myself some basic web design stuff, but im wondering how you get stuff to look the same in all browsers, especially the position of things, i tried to make a page the other day, and on a pc running firefox the images were in different places than they were on my mac running safari.

    Also any nice tutorial websites that you guys use would be good to:D

    Thanks:brrr:
     
  2. GoodBytes

    GoodBytes How many wifi's does it have?

    Joined:
    20 Jan 2007
    Posts:
    12,300
    Likes Received:
    710
    IMO, the best solution to ensure you have an almost near (98-100%) same presentation on all web browser, is the use of CSS with you HTML pages.
    Try to avoid Java-script, unless ABSOLUTELY necessary. (pop-up windows are usually not necessary)

    These sites will be your great friend:
    http://www.w3.org/
    http://validator.w3.org/
    http://www.w3schools.com/

    Other tips:
    - Avoid all non-Hex color code, like "red"... put the real Hex code to ensure your website has the same colors on all OS's and web browser.
    - NEVER use deprecated commands (see site above to know which they are).
    - On today standard, a website should appear fine on a 800x600 screen, same for 2048x1536 and above.
    - Unlike many very old books suggestion, avoid "This web site appears best with.... at ....x.... screen resolution". That simply shows that you don't care about your visitors, and expect them to never come back.
    - Avoid commercials on your website, if you must have them, less is better.
    - NEVER put animated backgrounds
    - NEVER put background music
    - NEVER do like this: http://www.angelfire.com/super/badwebs/main.htm
    - Make a page that is Simple, with empty space between items, else it gets too crowded and creates a big mess.
    - Ask friends to test your website, and tell you, frankly, if it all sucks, or not user-friendly.
     
  3. Zurechial

    Zurechial Elitist

    Joined:
    21 Mar 2007
    Posts:
    2,045
    Likes Received:
    99
    Not only are they unnecessary, they're also a total pain in the ass for the countless people out there who like to open links to images in a new tab in Firefox or their given tab-enabled browser.

    Whilst looking at a photo gallery of screenshots from a game in an online magazine, for instance, I want to middle-click every screenshot and have the images load in tabs while I continue to read the article - Then I can browse the fully-loaded images at leisure.
    Sites that insist on the retarded practice of opening full-size images by javascript in a new window with fixed dimensions just piss me off, and I'm not the only one.

    So, to the OP: follow GoodBytes good advice. :p
     
  4. DougEdey

    DougEdey I pwn all your storage

    Joined:
    5 Jul 2005
    Posts:
    13,933
    Likes Received:
    33
    I use some Javascript in my pages, but it has fall back (generally using script.acul.us is good) for unsupported actions.
     
  5. ToMMo

    ToMMo What's a Dremel?

    Joined:
    5 Dec 2007
    Posts:
    254
    Likes Received:
    5
    CSS is awesome, didn't know much about it until I had to make a website for a module last year. Countless hours of 'googleing' and reading I made a semi professional looking website. It was integrated with perl (urgh, don't ask) and php later on. Unfortunately I had to use a bit of JScript to get some random features my team m8s wanted, but personally didn't get along with it. Was quite chuffed, got 72% in that module if I remember correctly, firsts Cheesecake!
     
  6. seebul

    seebul Minimodder

    Joined:
    9 Aug 2005
    Posts:
    1,211
    Likes Received:
    1
    Thanks for all the links and info goodbytes, i do use CSS and have been learning with it, but even if i position objects and everything useing CSS things look different in different browseres:wallbash:
     
  7. Jamie

    Jamie ex-Bit-Tech code junkie

    Joined:
    12 Mar 2001
    Posts:
    8,180
    Likes Received:
    54
    You've just got to learn how different browsers render the pages.

    Over the past few years I've built a lot of different web sites and I've learnt something new each time. I am almost at the pointer where I can predict what will break and actively try and avoid it or work around it.

    The one area I'm still most unhappy with are inputs and buttons. They are the hardest thing to get looking the same in all browsers.
     
  8. Nedsbeds

    Nedsbeds Badger, Slime, Weasel!!

    Joined:
    16 May 2002
    Posts:
    1,972
    Likes Received:
    9
    html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    }

    Try sticking that at the beginning of your css. It may give you a better idea as to why it looks different on different browsers.
    btw, I'm not saying use that in your production site (it slows down things if you zero everything and then have to restyle everything!), but it can give you an idea as to where the differences are being introduced.
    I found it quite useful when learning.
     
  9. Ending Credits

    Ending Credits Bunned

    Joined:
    4 Jan 2008
    Posts:
    5,322
    Likes Received:
    245
    • Avoid spaces in filenames; firefox doesn't like them.
    • Always put a doctype.
    • Don't use depreciated stuff.
     
  10. Cookie Monster

    Cookie Monster Multimodder

    Joined:
    27 Aug 2003
    Posts:
    4,232
    Likes Received:
    407
    I was taught to reset everything at the start of the css, like this:
    The problem im having at the moment is making a combo box match the css formatting of the rest of the form.
     

Share This Page