how to overcome positioning problems in different browsers?

[Jan]

Hello

I'm having problems positioning elements in the website. It seems that different browsers interprete position values differently.
Could somebody give me a hint on how to solve this issue please?
How can I write comments in html or css documents in order to make the content available in all browsers (I examine my site with Opera, Firefox and IE8)?

Many thanks!

 

[smoovo]

Few steps for cross browsing:
- Reset your CSS code.
- Build CSS code for old IE. (use this page)
- Check your script with W3C Validator.

- Enjoy.

 

[bcee]

If you write mark up that is well composed and valid you shouldn't have a problem with most modern browsers. It's mostly IE6 and 7 that are trouble. You can try numerous solutions like browsershots.org or run a VM using IE6 or 7.

Also CSS hacking is not the correct approach. Learn about IE's conditional tags if you want to target IE.

 

[PixelPusher]

Few steps for cross browsing:
- Reset your CSS code.
- Build CSS code for old IE. (use this page)
- Check your script with W3C Validator.

- Enjoy.

Yes, if need be, and always.

If you write mark up that is well composed and valid you shouldn't have a problem with most modern browsers. It's mostly IE6 and 7 that are trouble. You can try numerous solutions like browsershots.org or run a VM using IE6 or 7.

Also CSS hacking is not the correct approach. Learn about IE's conditional tags if you want to target IE.

Well said Brad. I use positioning, and I rarely find inconsistencies. Like Brad said the more important part is to write clean markup. Of course, there may be a few situations where you might need a specific IE stylesheet. If this is the case, like stated above, use correct conditional statements.

Quirksmode has a prime example of IE conditional comments/statements

Another decent tool (that's free) for checking/debugging IE versions is IETester

If you would like us to look at your site, please provide a link.

 

[Jan]

Thanks to all for providing useful information.
I will probably be back with a link to my site in the near future.
Jan

 

[PixelPusher]

Just in case you are not sure how to create a CSS reset, one method can be done like so:

* {
margin:0;
padding:0;
}

That will set the padding and margins for all elements to zero, allowing you to then set you own for certain situations.