A real basic question.. browser compatibility in CSS

okay heres a component in my css.. when i adjust its top:15px; with respect to IE.. Its position is changed in firefox and chrome.. and when adjust it with firefox.. chrome and IE shows it dislocated..

HOW TO MAKE IT ALL BROWSER COMPATIBLE

 

It depends. Showing only a part of the CSS isn't showing anything. Need to see the complete markup or a link and which version of IE you are talking about. All versions of IE work different than each other. Otherwise, it's all a guess.

One thing that is not a guess: do not rely on anything IE does as being correct. It is 10 years behind web standards or wrong in its implementation.

 

Moving things with position: relative is generally a bad idea. However, if you MUST do it, know that you are not moving the box at all-- you are moving the visual representation of the box (so, the box is still in the old place and you just moved the picture of it). Where it goes is in relation to where the box is in the first place. The box may not be in the same place in all browsers to begin with.

A better way to move things is to use margins instead. margin-top, margin-left. Although this works on blocks, and I think #search would be a form which is a block but I dunno without seeing code.

Follow doc's advice-- check in IE, but don't use it as a guide. There are a few rare times where IE is right and everyone else is wrong, but 99% of the time everyone else is right and IE is wrong.

IE does sometimes deal with positioning strangely.

Chrome, remember, is a beta browser. I suggest you download Safari-for-windows for Webkit rendering testing.

 

use absolute position to place it wherever you want

 

While it may have specific uses, in general that is a particularly bad idea.

gary

 

Send me the full files than i will try to help u...