- This topic is empty.
-
AuthorPosts
-
July 26, 2009 at 12:09 am #25564
luk
MemberI’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 {
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
July 26, 2009 at 1:39 am #61125luk
MemberOK, 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;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.