Grow your CSS skills. Land your dream job.

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

  • luk
    # July 26, 2009 at 12:09 am

    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:

    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
    # July 26, 2009 at 1:39 am

    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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".