Websites And Browser Compatibilty Issues

I usually test on 3 browsers: Firefox, IE 7 and IE 6. I always have the biggest headache in IE 6 as it is not standards  compliant which means I often have to add conditionally formatting or link to a different css stylesheet completely. It almost always messes up my layout unless I do some major alterations. Unfortunately IE6 is still the most widely used browser internationally although it is being phased out by IE7. I don't know how widely used it is in Africa - probably more than the West. I can't wait until they phase out that browser completely.

Anyways, here is a useful program for testing your sites on IE if you don't have all the versions: http://www.my-debugbar.com/wiki/IETester/HomePage

CSS is a problem on IE and FF.

Most users here however use IE6.

Frankly im surprised this is an issue

@Gamine
This is a very big issue. You should give solutions to solve the issue. That is what you are expected of.

@yawa

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
   margin:0;
   padding:0;
}
table {
   border-collapse:collapse;
   border-spacing:0;
}
fieldset,img {
   border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
   font-style:normal;
   font-weight:normal;
}
ol,ul {
   list-style:none;
}
caption,th {
   text-align:left;
}
h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border:0;
}

I think I will try this YUI and see how effective it will be.

@yawa Looks like I got my browsers mixed up  The box model problem is only found in IE5.5 and below and yeah a div within a div to fix it is a well-known hack and like all hacks should be avoided as much as possible or used only in extreme cases. The problem in IE 6 is when you have a couple of floats. IE6 has an annoying habit of doubling the margin of the starting float - often causing the adjacent float to be pushed down below it. Using {display: inline;} is a common fix for this. Apologies for the confusion .

@webmonk

I assume by the time IE8 rolls out, you will be adding another conditional for that and then for 9, 10, etc? 

I guess my point here is that sooner or later maintenance will become a bitch.  Can you imagine updating the width of one block of CSS code in 5 places?  Not to mention, suppose I get hired by your company and am assigned to do maintenance on jobs you did before I came in, if I don't understand what you did chances are that I might forget to update a file or 2.  Another scenario: What happens when eventually all browsers (I pray this happens some day) become truly w3c compliant?  Those conditionals might throw off stuff on prior sites which could lead to angry clients 

Don't get me wrong, I have used this technique myself but I limit it to IE7 and at the most, it has only 2 or 3 blocks of code.

@Yolu

the box-model exists in ALL browsers, not just < IE5.5.  It is a feature of CSS and not the browser.  With respect to floats, it exists even in FF.  The problem is that (and I am assuming here) you don't quite understand the box-model.  Here is why one of your DIVs floats to the bottom:

Suppose you have this scenario (and I have this in my FREE ebook):

Note the BR tag. I could have used a DIV, but again, I try to avoid DIVITIS (similar to using TABLES, TRs and TDs).  Code for CLEAR would look like so: clear: both.  If you don't do this, in FF and other standards-compliant browsers, content will bleed through your DIVs.

If CONTAINER is width: 100px, and A and B are floated LEFT and RIGHT respectively and have widths of 50px each, no problem. Now, suppose you wanted to add a margin of even 5px to A (all sides).  B will drop to the bottom.  Why? You got it - box-model.  Explanation:  The width of A has changed from 50px to 50px + 5px (left) + 5px (right) = 60px.  Now remember - your CONTAINER is width 100px but both of your floated DIVs have a combined width of 110px.  So how do you solve?  Read on.

You have to reduce the width of A or B by 10px to account for the 10px of margin you added otherwise, B will drop to the bottom.

Don't take my word for it though, copy my code and try it out for yourself.  You might want to take my word though.  Why? I put up my first 99% CSS site using floated DIVs (I have to reserve 1% because I use tables where tabular data is present ) in 2005 and haven't looked back since 

Yeah Omni, it can get a little hairy for the uninitiated.  Perhaps my FREE ebook could help.  Email me for it if you want.  It deals with all the CSS hairy areas in less than 20 pages

It took a lot to come up with it and I should honestly charge for it but for my brothers/sisters, I decided to give it out for free with no strings attached.

@post Guy, dont worry urself too much. Using valid XHTML plus an IDE like aptana (it will tell u the CSS codes that are valid on which browser) plus a few hacks will definitely solve your CSS compatibilty issue, the real thing u need to worry urself over is browser compatibility when it comes to using ajax, its more killing than CSS,

I found Mozzilla Firefox is the best browser even though its a bit slower. Internet explorer has major issues in rendering graphics.
I use this website to test my creations on many platforms at the same time: https://browsershots.org/

I found half of the time, only internet explorer has problems of displaying my site very well

@Yolu
Sorry for the miscommunication.  Having said that, I have never gotten the issue that you point out.  Just do the math well and you shouldn't have it.  I have never had to do special hacks for IE6/7 with respect to floats.  Perhaps a code sample would help?

@IBEX
Problems in IE? Are your surprised? 

@Python
List the issues, or at least a few.  Let's discuss and see how we can help with respect to AJAX

seton

That is what you get when ppl, even if they choose to agree to disagree talk in a civil manner as opposed to a "do you know who i am?" manner.  In the end, we all learn a thing or 2.

send me an email

Browser compatibility is a major issue in web design and should not be taken for granted. When I design my sites, I test with IE (6 and 7) and Firefox.

Simply because these are probably the two most popular browsers out there today (at least for non-technical folk).
For a web designer, testing on IE is non-negotiable, as at least 70% of the site users will access it via IE.

Firefox is also neccesary because it gives you a pretty good idea of what to expect with other browsers like Opera, Netscape, Konqueror, Camino and even Safari.

These two browsers should do most websites. If you are a testing junkie, you could visit browsers.evolt.org. They've got the most comprehensive archive of web browsers I have ever come across on the web to date. Take your pick.

Having said that, compatibility testing is one of the major tests any website designer should perform, and also test your site on different screen resolutions.

Good luck.

@yawa, this is my email setonsenu@gmail.com, please send the material to me thanks.
Folks is been nice hanging out with you.
Together we can make this profession great

compatibility wahala, rigth now I have five different brower for test b4 for upload,

But the people u give it to dont know what u went tru to get them the best.

- IE 6
- IE 7
- Firefox 3
- Netscape
- Chrome

but CSS does me a great relief.

I agree with you yawa. But once I was called into a scenario where a webmaster charged about 80K for a company's website. After the full payment and designs, the owners asked to see the job before it was uploaded to their server. If what I saw was actually what he was paid for, then 20K will be an overdue for the job.

What I'm saying in essence is that, webmasters should upgrade their intellects so as to be able to charge higher pay for their works, else we keep getting peanuts.