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?

halfer
  • 19,824
  • 17
  • 99
  • 186
James
  • 1,895
  • 6
  • 27
  • 34

3 Answers3

1

Use margin-bottom on the element before it :)

Tom van der Woerdt
  • 29,532
  • 7
  • 72
  • 105
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/

Leo
  • 5,069
  • 2
  • 20
  • 27
  • take a look at: http://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? – James Nov 26 '11 at 18:41
  • 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. – Leo Nov 26 '11 at 18:47
  • http://stackoverflow.com/questions/8280703/why-does-the-input-text-have-a-different-position-and-input-shadow-not-show-in-i – James Nov 26 '11 at 18:48
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;
}
Ariful Islam
  • 7,639
  • 7
  • 36
  • 54
  • 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? – James Nov 26 '11 at 17:34
  • which version of Internet explorer do you use? – Ariful Islam Nov 26 '11 at 17:37
  • i believe its the latest one, but is there no way to make a css circle compatible across all internet explorer browsers? – James Nov 26 '11 at 18:00