treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

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

  • luk
    Permalink to comment #
    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):
    http://devcfm.031.be/images/layout/scrn01.jpg
    http://devcfm.031.be/images/layout/scrn02.jpg



    <div id=\"right-sidebar\">
    	<p>Right Sidebar</p>
    	<div id=\"webradio\"><a href=\"#\" id=\"webradio-play\">&nbsp;</a></div>
    	<div id=\"rectangle-ad\">Rectangle-Ad (300x250)</div>
    </div>




    #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
    Permalink to comment #
    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:

    	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;
    	}
Add a Comment