css - Firefox div object height -
i have following html:
<div id="wrapper"> <div id="radioplayer"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="467" height="26"> <param name="movie" value="http://www.museter.com/ffmp3-config.swf" /> <param name="flashvars" value="url=http://stream.../;&lang=nl&codec=mp3&volume=65&introurl=&autoplay=false&traking=true&jsevents=false&buffering=5&skin=http://www.museter.com/skins/eastanbul/ffmp3-eastanbul.xml&title=zottebeatjes&welcome=welkom" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="scale" value="noscale" /> <embed src="http://www.museter.com/ffmp3-config.swf" flashvars="url=http://stream.../;&lang=nl&codec=mp3&volume=65&introurl=&autoplay=false&traking=true&jsevents=false&buffering=5&skin=http://www.museter.com/skins/eastanbul/ffmp3-eastanbul.xml&title=zottebeatjes&welcome=welkom" width="467" scale="noscale" height="26" wmode="transparent" allowscriptaccess="always" type="application/x-shockwave-flash" /> </object> </div> <div id="streaminfobar"> *some info* </div> </div>
and css stylesheet:
#wrapper { min-height:100%; width: 100%; position:relative; display: table; } * {margin:0;padding:0;height:100%;} #radioplayer { width: 100%; height:26px; background-color: #222222; text-align:center; display: table-row; } #streaminfobar { width:100%; height:auto; margin-top:0; background-color: #333333; color: #5e5e5e; display: table-row; }
example: http://jsfiddle.net/cxbee/
the problem radioplayer div has have height 26 px, specified in css block. in google chrome indeed 26 px, in firefox , in internet explorer it's lot's more 26 px.
in firefox it's this:
but should (in chrome):
how can fix this?
change *{margin:0;padding:0;height:100%;}
body, html{margin:0;padding:0;height:100%;}
.
want 2 100% high, not every element in code.
Comments
Post a Comment