CODEWITHSUNDEEP
cssinternet-explorerhtmlinternet-explorer-7positioning
simple-coder
simple-coder

Reputation: 33

positioning works in ff,chrome but not in ie7

I have some divs which i positioned with

position:absolute;
width:100px;
margin:-20px 420px;

same like this another one also... the problem is it is looking fine in chrome and firefox ,but in ie7 those divs are being moved away. how to set it to look perfect in all browsers??thanks edited:

.button {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/portfolio.gif) no-repeat 0 -49px;
  margin:-50px 420px;
}
.button a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/portfolio.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button a:hover {
  background-position: 0 50px;
}


.button1 {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/design-brief.gif) no-repeat 0 -49px;
  margin:-20px 420px;
}
.button1 a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/design-brief.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button1 a:hover {
  background-position: 0 50px;
}

these two buttons,button and button1 are inside this div along with some text

.cont
{
position:relative;
width:1400px;
height:500px;

}

Upvotes: 0

Views: 717

Answers (3)

Mahima
Mahima

Reputation: 509

Agree with Matt Asbury... If u r using positions then there is no use of margins. and one more thing, u r using position absolute for buttons. in that case don't use position for its child unless and until u want to position its child as well. If u can provide html then it will be easy to understand the code and help.

Upvotes: 0

Matt Asbury
Matt Asbury

Reputation: 5662

Don't use margin to position your buttons. If you have made it position:absolute; use top: 0px; left: 0px; (obviously setting them to the desired position). As you have set the parent div .cont as position:relative; the buttons will be set within this div as long as they are there in the DOM. So if you were to set them top: 0px; left: 0px; the buttons would sit in the top left hand corner of the div.

Much more reliable than playing with negative margins.

Upvotes: 0

Floern
Floern

Reputation: 33904

I guess you have to set a top:0px and a left:0px. You can not use position:absolute without setting a real position.

Or: You can try position:static or position:relative, I'm not sure what you want to do.

Upvotes: 0

Related Questions