Strange positioning problem (IE does it^^…unbelievable)

[luk]

I’m running into some problems with a new project (you reach it at http://devcfm.031.be), you see the big red orb-button there? If you look at it with IE7, the button is in the middle of the textil-base (there are other problems with IE but I didn’t create a IEfix.css yet), if you do the same with any other browser, the button (#webradio-play) is sticked to the upper border of the button containing div (#webradio)…

To the left / right I centered with margin: 0 auto; and I thought adding a margin on top would do the trick, but it didn’t, instead it pushes the #webradio div down (with the button), but I just want to push down the button…IE knows what I mean (not a good sign =D) but all the others don’t…does anybody know the problem or see an error I made?

Here the specific HTML & CSS and some Screenshots (Chrome btw. FF the first / IE7 the second):
[img]http://devcfm.031.be/images/layout/scrn01.jpg[/img]
[img]http://devcfm.031.be/images/layout/scrn02.jpg[/img]

Code:

Right Sidebar

 

Rectangle-Ad (300×250)

Code:

#right-sidebar {
float: left;
color: #333;
background: transparent;
width: 334px;
padding-bottom: 60px;
}

div#right-sidebar div#webradio {
background: transparent url(../images/layout/webradio-bg.png) no-repeat;
height: 300px;
margin-left: 10px;
width: 300px;
text-align: center;
outline: 1px solid black;
}

div#right-sidebar a#webradio-play {
background: transparent url(../images/layout/webradio-play-off.png) no-repeat;
display: block;
height: 173px;
margin: 60px auto 0px auto !important;
text-indent: -9999px;
outline: 1px solid black;
width: 173px;
}

div#right-sidebar a#webradio-play:hover {
background: transparent url(../images/layout/webradio-play-on.png) no-repeat;
}

thx for any help in advance!

LuK

[luk]

OK, I have it, but I’m not very sure that it is a nice solution…

I just positioned the play-button div absolute to the #webradio div (removed also text-align: center; from that –> IE had this instead of margin: 0 auto; for the centering attempt before…)

if somebody knows a better solution, I’m very open to it!

here the changed CSS:

Code:

div#right-sidebar a#webradio-play {
background: transparent url(../images/layout/webradio-play-off.png) no-repeat;
display: block;
height: 173px;
margin: 60px 0px 0px 65px !important;
text-indent: -9999px;
position: absolute;
width: 173px;
}

[Author]

Posts