How do you guys make web design compatible with every browser?

Hi everybody,

I would like to know how do you make your website look the same across browser. I got a tone of headache about this.

Many thanks in advance,

 

You test it on every browser then tweek your CSS accordingly.

 

The problem is if it works as I intended in one browser it looks bad in the others, especially between IE and Firefox.

 

What effect are you trying to do? If it's rounded corners, shading or anything else with CSS3, you're going to have problems. IE8 doesn't support it. If you're trying to use HTML attributes to layout your design... no one does that anymore. Today everything is done with DIVs and controlled with CSS. What CSS is supported in which browser? All of them support CSS2, but IE6 & IE7 have some glitches here and there. There are work arounds for those within the CSS. BTW IE6 does not support transparent PNGs either.

 

Load a different style sheet for different browsers. Usually it is anough wit ha special stylesheet for internet explorer. The browser giving the worst headache is IE6 - and it is so old that you can block it with a small script right avay to save you the trouble.

Another approach to writing css for different browsers is to use this: http://www.conditional-css.com/
It works really good.
And for IE7, you need to remember source order if you want to float things to the right. This is a bug that is really annoying, if you float left and right on the same "row" so to speak, you need to have the right floated element higher in the source code than the left floated one.

 

I use Wordpress for all of my websites, and either Thesis or Catalyst Themes. In my experience, using a platform like Wordpress or Joomla and a good theme reduces your need to worry about compatibility.

Of course Wordpress isn't the end-all, be-all for all development scenarios. You can still tweak yourself into an ugly corner, as I have done a few times.

Just my 2 cents.

-Greg

 

Thanks guys, for your suggestions. I've problems with pixel count, image or textlinks positions, as well as round corners, which I tried to achieve and failed. I used DIVs all over the layout. No table.

 

If you're trying rounded corners with CSS3, it won't work except on the very latest browsers.

If you've having problems regarding transparency, check out some solutions here. IE6 doesn't fully support transparency, so you can try one of the methods listed in the link.

Remember though, there will always be a few browsers which won't render your site properly. If all people upgraded their browsers regularly, we wouldn't have this problem...

 

It is a headache for all of us, not just you.

 

Simple html works with every browsers or you can have two pages with same content and use a browser redirect script.

 

well, it's xhtml + css. But you might want to use a css framework.

 

making cross browser compatible HTML/CSS is not difficult task , You have to develop your knowledge and collect some information related to some basic issue .This can not be learned in 2 or 3 days , It will take several months to get families with these issues. You will find lot of issues when you make html for IE6 , It is worst browser version

 

You have to improve your xhtml/css skills, it's not an easy way but worth trying. There are plenty of tricks, you need to practise a lot and get experienced on these issues. Learn W3C standards.