Hi,
i have a quite trivial problem which i simply can’t figure out. I just need a DIV on my xPage which would have “height:100%” and “width:100%” (whole page).
However if I assign these styles to the div then it does work in IE but not in Firefox. The reason is that Firefox needs that the tags “Body” and “HTML” also get the “height:100%”. Even that I set in my only CSS “html,body {height:100%}” it does not help.
It seems that the automatically included CSS of the xPage override these settings.
Any idea how to solve this ?
Or is there a better way ?
Thank you in advance
Lars
Subject: Have you thought about using context.getUserAgent()?
This will detect the browser your using and then you can apply specific styles for your app for that browser type.
Subject: Solution !
Hi Paul,
thanks again for the tip.
However I have solved it in an other way which works for me. I will post it here i case that someone other needs it:
In Firefox if you want a DIV to have the height of the “full page” you need to set not only its height to 100% but also the height of the “html” and “body” tag as well.
In a xPage if you insert this into your stylesheet “html,body,form {height:100%;}” then it will not help, because the automatically added css file (domino\java\xsp\theme\webstandard\xsp.css) contains the following style:
html,body,form{width:inherit !important;height:inherit !important;overflow:inherit !important;}
which overrides your setting becaus of the “!important” parameter.
The easiest solution which works for me is therefore to add the same parameter in my own CSS like this:
html,body,form {height:100% !important;}
Then it works.
Don’t know if this is the best solution, but it works fine for me.
Bye
Lars