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 Thanks
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.
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.
I use some Javascript in my pages, but it has fall back (generally using script.acul.us is good) for unsupported actions.
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!
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
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.
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.
Avoid spaces in filenames; firefox doesn't like them. Always put a doctype. Don't use depreciated stuff.
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.