0

Please check out this CSS:

body { margin: 50px 0px; padding: 0px; } .one { background: #151515; height: 700px; width: 900px; margin: 0px auto; padding: 0px 0px 0px 0px; } #two { background: #e6e6e6; height: 140px; width: 900px; }

(http://jsfiddle.net/UvvPC/)

I want to use margin-top to move the grey box in the CSS above.

I want the grey box to be in the middle of the black box but I have been told margin-top does not go well with internet explorer.

What do I use instead?

Improve this question
1
  • Why would IE have problems with margin-top? Commented Nov 26, 2011 at 18:31

3 Answers 3

Reset to default
1

Use margin-bottom on the element before it :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Using display: table-cell won't work in IE6-7. If that's a concern for you, you could use the following technique :

.one { background: #151515; height: 700px; width: 900px; margin: 0px auto; padding: 0px 0px 0px 0px; position: relative; } .two { background: #e6e6e6; height: 140px; width: 900px; position: absolute; top: 50%; margin-top: -70px; /* half of the height */ }

http://jsfiddle.net/HYjke/

Improve this answer

3 Comments

take a look at: jsfiddle.net/nHdAp i want it to look like that in internet explorer but in internet explorer the text isn't in the centre of the input its at the top and the shadow doesn't show up. How can this be changed?
As your initial question has been answered, you should mark a post as an answer and open up another question for this other problem. It's going to be easier that way for other people facing the same bug finding an answer later on. I could probably take a look at it.
stackoverflow.com/questions/8280703/…
0

I don't know why do you need to use margin-top to do this task. This may help you:

.one { background: #151515; height: 700px; width: 900px; margin: 0px auto; padding: 0px 0px 0px 0px; display:table-cell; vertical-align:middle; }
Improve this answer

3 Comments

Ah thanks. I see you can make a circle shape using CSS 3 BUT internet explorer doesn't support this. how can i make a circle shape in css that internet explorer will support?
which version of Internet explorer do you use?
i believe its the latest one, but is there no way to make a css circle compatible across all internet explorer browsers?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.