Web Design: How can I please ALL browsers?

Joined
Aug 15, 2006
Messages
483
Reaction score
13
Points
18
Location
Abu Dhabi, United Arab Emirates
I am designing a website, and as technology advances (New web design programs/browsers etc) I personally find that it is proving more and more of a problem to make the website display correctly in ALL browsers.

At the moment I test my sites as I go on IE, Opera and FireFox, and use Dreamweaver and Photoshop to do my work.

The site that I'm doing at the moment I have split up into slices in Photoshop and I am editing it accordingly as to how I need it in Dreamweaver - IE loves the design, Opera also is a big fan, however Mozilla hates it and displays it all wrong.

Is there a 'trick' as such, to please all browsers?

Will I find less of these problems occuring creating/designing on my Mac when it arrives next week as opposed to Windows?

Any tips from the more experienced of people out there? Anything is appreciated.

Liam
 
Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
Best bet is to design for Firefox since it's very standards compliant then once you have it to where you want it, start adding in your css for IE using something like this:

Code:
<link rel="stylesheet" href="styles/default.css" media="all" />
<!--[if IE]><link type="text/css" rel="stylesheet" href="/styles/ie.css"></link><![endif]-->
<!--[if lt IE 6]><link type="text/css" rel="stylesheet" href="/styles/ie5.css"></link><![endif]-->
Make sure you have a valid doctype also.
 
Joined
Sep 9, 2006
Messages
690
Reaction score
51
Points
28
Your Mac's Specs
macbook
recently, I've skipped checking in IE since it hasn't been updated for mac in a long time. Also, it often doesn't display colours properly.

I also check it in Safari since I think safari supports embedded colour profiles.

Also, didn't you mean you're slicing up the design in Imageready?
 
Joined
Jun 6, 2006
Messages
1,153
Reaction score
94
Points
48
Your Mac's Specs
MacBook 2.0GHz White, 512MB RAM, 60GB HDD
I generally start by building the site up from the basics. Build all the bits that will definitely work on all browsers, then test each rendering engine (gecko, ie, opera, safari). Build up the CSS and HTML until the overall site is useable, then I can start adding fancy bits in with the knowledge that the base design works. Any problems can then be directly attributed to the new functionality.
 
Joined
Jul 25, 2004
Messages
389
Reaction score
5
Points
18
Location
Gaithersburg, MD
Your Mac's Specs
Mac Pro 2.6ghz Quad Xeon, 23" Cinema
Yes. Develop for Firefox and then do your tweaks. You can do browser specific style sheets or do the little hacks that only IE can interpret like:

#box {
width: 500px;
}
* > #box {
width: 520px;
}

things like that. Just google something like CSS IE Firefox hack or something.
 
Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
Sure ignore IE for Mac, but DO NOT ignore IE for PC since it still has majority of the marketshare.
 
Joined
Sep 26, 2006
Messages
10
Reaction score
0
Points
1
anyone else using Flock out there? I think it's GREAT. I really don't even use Firefox anymore. I think it was built using the Firefox core, only it was optimzed for Macs. It's a great addition, esp. for macheads.
 
S

sursuciofla

Guest
I just downloaded Flock, my eighth browser...I like to test them with my website.
 
Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's Specs
MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
Yeah I really really like Flock, but using Tab Mix Plus with it, it doesn't work and I need that functionality, Otherwise I would definitely be using Flock instead of firefox :)
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top