position:absolute

Smoggy

I have a web page that was designed for IE, but now the client is looking for Firefox support as well. The page uses position:absolute, causing the page to be displayed very differently in each browser.

Is there a common way to sort this browser differences without having to redesign alot of the pages ?

Something like :

When IE position:absolute 100
When Firefox position:absolute 10

forbairt

something like this should do the trick for you ...

design for firefox ... redesign for IE ... is my way of thinking ...

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

Smoggy

I'm taking that i'm replacing :

<!--[if IE]> with a piece of JS ?

forbairt

sorry

something like ...

<style type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->
</style>

will check if its IE ... and include the css file of your choice ...
its not javascript ... its something that IE recognises

Smoggy

I get you now .. I did know <!--[if IE]> was an IE command , it;s been a long time doing web dev

For the work i'm doing redesigning for firefox and then realtering for IE is a job that's to big for the time scale I have.

What I have found is :

table.ddm1 {position: absolute;
top: 60px!important; ((What Firefox reads))
top: 42px; ((What IE reads))
left: 0px;
height: 15px;

Using the !important to force Firefox into how I want it to display.

Thank for the reply.

I have the feeling it's going to be a long few days, as the site is a long way from being Firefox friendly, like half the events aren't firing, there are random borders around areas, floating tables using position: absolute :- you name it, It's there.

forbairt

Hmm... not knowing how complicated the site is it that may be the way to go ...


I personally don't like hacks within the main body of css code these days.

Smoggy

I presume you dont like the hack, as if IE implements the !important it will screw up the site viewed with IE ?

edit : is there anyway with js or the likes i can select a style sheet based on the browser, other than the above suggestions ?

something like

<browser check>
if IE
document.write('<link rel="stylesheet" type="text/css" href="ie.css" />')
else
document.write('<link rel="stylesheet" type="text/css" href="firefox.css" />')
end if

Eoin

Smoggy wrote:

I presume you dont like the hack, as if IE implements the !important it will screw up the site viewed with IE ?

edit : is there anyway with js or the likes i can select a style sheet based on the browser, other than the above suggestions ?

something like

<browser check>
if IE
document.write('<link rel="stylesheet" type="text/css" href="ie.css" />')
else
document.write('<link rel="stylesheet" type="text/css" href="firefox.css" />')
end if

You could do something like that, but is there definitely no way that the CSS can be changed to accomodate both browsers?

This JavaScript will pop up the browser info.

<script type="text/JavaScript">
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    alert(browser + " " + b_version);
</script>

I know I will get absolutely flamed for this.... but, if time is an issue, doing a layout in tables may get you there quicker.

daymobrew

Smoggy wrote:

I get you now .. I did know <!--[if IE]> was an IE command , it;s been a long time doing web dev

Look at Targeting IE using conditional comments - basically it redefines parts of the stylesheet for IE because the browser will take the last definition for the element/span/div.

Smoggy

Thanks for the info... I will keep you informed on how I go

ron_darrell

I seem to be the only one asking this so maybe it's pretty obvious but could we have a look at your entire stylesheet and html code? To be honest the only time I've ever had a problem with position:absolute was when it was for a div nested inside multiple other divs with various absolute and relative positionings. And I've never had it do one thing in IE and another in firefox.

What versions of both are you using? The very idea of needing to write one set of positioning CSS for IE and another for firefox goes against the whole point of standardisation. You will only make headaches for yourself further down the road if the code ever needs to be updated/changed. Better to find the problem and fix it (though of course it is much faster to do an if else to fix it for now). For something as routine as position absolute IE and firefox should treat your code the same.

-RD

Smoggy

Position absolute :

Sorted using !important

JS events not firing :

Badly formed JS that IE read and Firefox ignored.

Spacers showing with borders :

Missing images showing with borders in firefox.

In an ideal world it would have been developed using Firefox and next time this is how I will do it making it work in anything other than IE was a real pain.

Thanks for all the info !