Posts Tagged javascript

Browser nuances

I've recently been working on a new site. I prefer to write the xhtml, css, php, and javascript without using any WYSIWYG interface. This is great for a few reasons.

  1. I can practice coding
  2. I can manage my own code better
  3. I can verify that the code is W3C compliant
  4. PHP/MySQL doesn't preview very well in pre-Dreamweaver CS4 WYSIWYG environments.
  5. Neither does javascript

I personally switch back and forth between three editors. I use Vim as much as I can. I love that old editor. I use Notepad++ mainly for vbscripting and quit web page edits. Finally, I've found that I love the code view in Dreamweaver. It's a great tool. So, now that I've gotten that out of the way, let me explain the one thing I can't stand about web development. I love everything about it except for ......browsers. All web developers will tell you that writing web pages for Internet Explorer, Firefox, Opera, and now Chrome is a headache. It's not that writing a webpage is a headache. It's the fact that each of these browsers have their nuances. Here's an example... I'm working on a fluid layout for this new site. I have a search box that sits in a div in the upper left corner of the browser window.

Here it is in IE7:

Nuance 1 IE7

Notice the border around the search box. It goes above the top of the browser. This is because I'm using a negative margin value to move the search box up. I did this because in Firefox the search box was too low. I was developing the site and previewing in Firefox to check my code. So I adjusted the CSS in relation to what I saw in Firefox. Here's the same element in Firefox:

Nuance 1 FF

Again notice the top border of the search box. In fact, notice that the whole box show up in FF. Here's the same example in Google's Chrome browser:

Nuance 1 GC

You may be saying to yourself, "that looks exactly like the Firefox example. You would be correct but here's my second example of nuances. Here is my category menu just under that same search box...in Firefox:

Nuance 2 FF

That's how I wanted it to look. I'm using jQuery to get the rounded edges in the inside div. Check out the same edges in Google's Chrome:

Nuance 2 GC

When one spends hours trying to make a design look the same across all browsers, it's frustrating to say the least. I haven't mastered it yet. I would really rather spend this time adding AJAX to the site so that it will be functioning and ready for deployment.

, , , ,

No Comments