Compatability Issue IE/Firefox

solving compatibility issues with css

[procalx]

I have a website that I did not code but am having to update.

There are two DIV that position different images and their code on the website, i can either get the website viewing properly in Firefox or IE, the problem is that the div position is defined by coordinates "l" & "t", the code that positions correctly in firefox will be out of place in IE and the same if done with IE then Firefox.

Here is the two sections of code:

<div style="position: absolute; width: 294px; height: 176px; z-index: 101; left: 487px; top: 373px">
<a href="javascript:popUp('http://example.com/designer/')"><img src="http://www.example.com/images/products/kit_designer.jpg" alt="Kit Designer" width="294" height="176" align="left" /></a></div>

<div style="position: absolute; width: 733px; height: 64px; z-index: 102; left: 321px; top: 626px">
<a href="products/sublimation/products_sublimation.php"><img src="http://www.example.com/images/product/sublimation-ad2.jpg" alt="GameFace Sublimation" width="780" height="64" /></a></div>

Doctype: DOCTYPE html PUBLIC

The above code seems to view perfectly in IE 7/8 on my vista machine but does not align properly in firefox. This is abit more advanced than i've done myself, can anyone point me in the right direction?

Do I have to write a set of external CSS files to override css depending on browser/os etc? If not how, and if I do how do I do it?

Procalx

[edited by: swa66 at 4:14 pm (utc) on Nov. 2, 2008]
[edit reason] use example.com [/edit]

[swa66]

If you use conditional comments you can target IE with different code.

e.g.:

  <!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="/ie6.css" /> 
  <![endif]--> 
  <!--[if IE 7]> 
    <link rel="stylesheet" type="text/css" href="/ie7.css" /> 
  <![endif]--> 

or

  <!--[if lt IE 8]> 
    <link rel="stylesheet" type="text/css" href="/ie-pre8.css" /> 
  <![endif]-->