CSS Style does not work in IE, but in Chrome ONLY

Question

Hello,

I wonder why does this style not work in IE and FF, but in Chrome ONLY

#show{top:10%; position:relative; margin: 0px auto; width:100%;}

[Edit]

If I want to make the same work in IE and FF, what do I have to do

Thanks Jean

Answer 1

Can you provide the relevant HTML markup too? And which version of IE you are using.

One problem could be additional CSS styling that the element with ID 'show' inherits.

Answer 2

To separate styles between IE and FF, Chrome, etc use Conditional Comments.

<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

This will tell IE to use a different stylesheet than IE, FF and other browsers.

IE is a beast that won't work without some trial and error, so set up that stylesheet and play with it til it does what you want.

To separate styles within your stylesheet, use this; it's a great resource and has helped me a great deal! CSS browser selectors. It's a Javascript plugin that will read any styles that start with .webkit, .ie, etc and apply those styles only to that browser.

Answer 3

Are you trying to position your #show div 10% down from the top of it's containing div? If so try this:

html:

<div id=#your_container>
  <div id=#show>
    Content
  </div>
</div>

css:

#your_container {height: 200px; position: relative}
#show {top: 10%; position: absolute}

Answer 4

top:10%; position:relative;

10% of what? For a relative-positioned element, percentage dimensions are measured relative to the parent element's size. Does the parent element have a height: applied? If it doesn't, that's why you're getting no movement: you're saying “move the top by 10% of ‘auto’, which is an indeterminate amount”.

If you want 10% of the browser viewport height, you must tell every element between the root html and the element you're positioning to use the full height of its parent. ie.:

html, body { height: 100%; }