After designing your website, in about how many browsers do you test them before announcing it to the public? I was playing around, creating web pages as I liked just for fun when I stumbled upon this. Some browsers will give your pages a very nice look while some will alter so many things. Have you noticed this too?

Let me hear your opinion on this.

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

I think I understood something some minutes after opening this thread. Some 24 hours ago, I was trying to get used to some new standards of HTML 5. There I discovered some new things. Instead of making use of some deprecated tags we made use of, though depending on browsers, I made changes and some of the experienced errors got corrected.


I think this is boring down to browsers and the version of HTML they validate.

CSS is a problem on IE and FF.

Most users here however use IE6.

Uhmmmm, CSS isn't a problem.  It is THE solution

The problem is that most people don't understand it.  What gets people the most about CSS is the box-model.  If you can't grasp this, you won't get 90% of CSS.

Another problem is that some are not aware of the reset.css technique as set for by the YUI (Yahoo User Interface) group.  This is where (and they provide this code for you free of charge) EVERYTHING is set to zero (margins, paragraphs, lists, etc).  This will make all browsers behave alike.  At that point, what you then do is, via IDs or CLASSES, you redefine your margins, which will at that point behave the same on ALL browsers.  Check out the YUI reset.css or make one of your own.  At the very least, you should have * { margin: 0; padding: 0; } as the first line of your code.

Yet another problem is setting heights in CSS. In Firefox, content in blocks with a set height overflow whereas in IE, the blocks automatically adjust.  Yet another tricky issue is floats.  If you don't clear your floats, you get the same problem.  I wrote a whole FREE ebook on this available on request.  The last time I advertised it, I got maybe 5 responses at the most.  Tomorrow you say all yawa does is cause trouble 

Testing-wise, as you have said, test for IE6/7 and Firefox.  You have pretty much covered I would say 80% of the population.  Then do a quick spot check on Safari.  If you code to web standards though, covering the first three pretty much takes care of itself.  I speak from experience.

So remember folks, CSS isn't the problem - it's the solution.

Frankly im surprised this is an issue

I beg your pardon? You are surprised browser compatibility is an issue? What then should be the issue?

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

I also test in Safari ---  sometimes ----  when I can be bothered and only since I started using a mac 

I couldn't agree more about the css style reset. That should always be the first line of code in your stylesheet - it's like wiping the slate clean. Apart from heights and floats and such, another huge problem with IE6 is the way it treats margins and padding. If left unchecked it can seriously mess with your layout. The trick with is to either use margin OR padding attributes and not both at the same time. Alternatively you could use a div within a div - one could be allocated padding and the other the margin. There are a host of other little work-arounds out there to deal with IE6 quirks that are also standards-compliant.


@yawa - it's good of you to have written on the subject. However, I've observed (from here and elsewhere) that not many people like to read 

@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.

@gamine
Yes, this is a VERY BIG ISSUE. Most of the crap we see out there today is because of a lack of understanding of CSS and it's power.

@yolu
I would steer clear of divs within divs. That is a serious disease called divitis. Yes, you can use padding and margin at the same time. If you remember what I said earlier about box-model, it can get very tricky. Just remember the order from "box" or content in question: P(adding), B(order), M(argin). In other words, padding is the distance b/w the block and its content, border is what it is, a border and margin is the space b/w a block and blocks surrounding it. An example:

I will use inline styles for this which isn't advisable. Plug this into a browser:

<div style="margin: 10px 10px; padding: 10px 10px; background-color: #000; border: 1px solid #00f;">Content for Block 1</div>
<div style="margin: 10px 10px; padding: 10px 10px; background-color: #f00; border: 1px solid #ff0;">Content for Block 2</div>

@omni
Before implementing anything given by the YUI, make sure you check their "Graded Browswer Support" section. This lists what they have tested their code on. I would stick with the A+ and A grade browsers. I bring this up because this block of code may not work on IE6 and/or 7 and/or 8. I stand corrected though:

q:before,q:after {
content:'';
}

@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 .

I test all my sites on FF, IE7 and IE6, especially in that order. For benefit of the thread you can use HTML Conditionals to select a stylesheet based on what browser the surfer is using. This is perhaps the only thing that prevents me from stabbing the IE Developement Team.

<!--[if IE 6]><link href="<style-internet6.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="style-internet7.css" rel="stylesheet" type="text/css" /><![endif]-->
<![if !IE]><link href="style-other.css" rel="stylesheet" type="text/css" /><![endif]>

"<![if !IE]>" is for browsers other than Internet Explorer.

Or, rather than using complete seperate stylesheets, you use the import command with the IE conditional statement (Say you want to import styles for only IE6 for an IE6 Browser).

EG:

<!--[if IE 6]>
<style type="text/css" media="screen">
<!--
@import url("ie6-hack.css";
-->
</style>
<![endif]-->

the @import url("ie6-hack.css"; string must be written in this syntax to target IE version 6 and lower

For Testing Multiple IE versions at a time (WIN XP Only), you could use Multiple IE.

Hope this helps.

PS: For those who want to take it one crazy step further, head to BrowserShots. If you submit a URL they'll generate screenshots for your website in over 50 Browsers spanning Linux, Windows, Mac and BSD.

@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):

<div id="container">
    <div id="a">blah left</div>
    <div id="b">blah right</div>
    <br class="clear" />
</div>

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 

I think I'm going back to my css tutorials to do some upgrades. Don't want to get confused jumping from one aspect to the order. I believe in orderliness.

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.

I don't need to ask for your mail addy cos I got it before. You'll hear from me soonest if not now.

@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 ur 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,

@yawa there seems to be some sort of miscommunication here lol! By box model problem I was referring to the bug in IE5.5 and below that caused it to treat the model differently from other browsers i.e. subtracting margins/padding (can't remember which of them) and border widths from the content width instead of adding. If the box model itself was a bug we'd all be in trouble 

This bug was fixed in IE6 but another bug was discovered with the floats as I mentioned above (apparently some people have also noticed it in IE5). A second float dropping down in Firefox for example is not a big deal - just a simple math issue as you pointed out. But if you fix the 'issue' in Firefox and still have it in IE6 chances are the IE bug has doubled the margin and/or padding of the float(s). So in your example that 60px width will actually be 70px in IE6. So even if you reduce the width of A or B by 10px, the problem may be fixed in Firefox but not in IE6 because it'll be 60px and that's where the inline fix becomes useful. Thank you for the quick lesson though - interesting use of the br tag for clearing.

With regards to a 99% css site (this site also happened to have tabular data) - I guess I'm behind you there - did my first one in 2006

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

I just discovered something like that now from WOA website. I think that is the more reason we should draw closer to that web. It makes sense cos some nice stuffs are there to harness.

@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

hi folks, i do use templates for designing my websites, someday i will think about design it in Html, about testing i have not gotten any problems so far, but i know i'll surely get as soon as i hit a very big contract.
Folks your post has been encouraging.
thanks to you all.
any way yawa tide, can you please send that your ebook to please.
thanks once again

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

@Yawa-ti-de, pls I will also like you to send your material to me.
Thanks

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.

[b]Firefox [/b]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.

here here pie1.

I personally foresee a day when a whole new business in Nigeria springs out the need to test. We need it big time.

In the US, some testers get paid major bucks.

@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

send me a personal email seton - u can find it in my profile

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.

quadrillo,

That is why you compensate for this in the estimate that you give them. If you charge for 10 hours worth of work but it took you 20, who's the sucker (not you personally but you get my point, hopefully)?

We need to stop charging peanuts and if the client complains, we need to do a better job of justifying why we charge a certain amount of money. I like to use the "craftmanship vs Mass produced vs Do-It-Yourself" argument with them. When I have time, I might write about it.

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.