We’ve built out code on the page as such:
<style>
.player{
position:relative;
border:solid 1px silver;
}
#twitch_streamlist{
position:relative;
border: solid 2px red;
list-style-type: none;
width:40%;
float:left;
}
</style>
<div style="width:100%;display:block;clear:both;">
[plumwd_twitch_stream channel="stratics" width="100%" height="500px"][plumwd_twitch_chat channel="stratics" width="100%" height="335px"]
</div>
<div style="display:block;clear:both;width:100%;position:relative;">
<div style="width:30%;">
WoWStratics<br />
[plumwd_twitch_streamlist channel="StraticsWoW" videonum="1"]
</div>
<div style="width:30%;">
Kirthag<br />
[plumwd_twitch_streamlist channel="Kirthag" videonum="1"]
</div>
</div>
But when rendered by a browser (Chrone & FF) it comes out like this:
<div class="entry-content">
<ul id="twitch_streamlist" class="vertical">
<li ><a href="https://www.twitch.tv/straticswow/c/5057229">
<img src="https://static-cdn.jtvnw.net/jtv.thumbs/archive-562496514-320x240.jpg" alt="Metro - Classic Now - CM LATER! - Amazon Book Giveaway[480pHD]" title="Metro - Classic Now - CM LATER! - Amazon Book Giveaway[480pHD]"/></a></li>
</ul>
<ul id="twitch_streamlist" class="vertical">
<li ><a href="https://www.twitch.tv/kirthag/c/4546035">
<img src="https://static-cdn.jtvnw.net/jtv.thumbs/archive-542124444-320x240.jpg" alt="SotA PA-R7 - Test of Ghost Logging" title="SotA PA-R7 - Test of Ghost Logging"/></a></li>
</ul>
<style>
.player{
position:relative;
border:solid 1px silver;
}
#twitch_streamlist{
position:relative;
border: solid 2px red;
list-style-type: none;
width:40%;
float:left;
}
</style>
<div style="width:100%;display:block;clear:both;">
<script type="text/javascript" src="https://stratics.com/wp-content/plugins/twitch-tv-embed-suite/scripts/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.flashvars = "hostname=www.twitch.tv&channel=stratics&auto_play=true&start_volume=25";
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.bgcolor = "#ffffff";
params.scale = "showAll";
params.wmode = "window";
var attributes = {};
attributes.id = "live_embed_player_flash";
swfobject.embedSWF("https://www.twitch.tv/widgets/live_embed_player.swf", "myAlternativeContent", "100%", "500px", "9.0.0", "https://stratics.com/wp-content/plugins/twitch-tv-embed-suite/scripts/expressInstall.swf", flashvars, params, attributes);
</script>
<div class="player">
<div id="myAlternativeContent"><a href="https://www.twitchtv.com/plumwd"><img class="alignnone size-full wp-image-10" alt="no-flash" src="https://stratics.com/wp-content/plugins/twitch-tv-embed-suite/images/618x376.gif" /></a></div>
</div> <div id="chat">
<iframe frameborder="0" scrolling="no" class="chat_embed" src="https://twitch.tv/chat/embed?channel=stratics&popout_chat=true" height="335px" width="100%"></iframe>
</div>
<br />
<center><br />
<!-- Ad Unit [1870] https://stratics.com-728x90-7 --></p>
<div id="switch_placeholder_7e827afdcf60d6b47916d4ee3b009122" class="switch_placeholder"></div>
<p> <script type="text/javascript" src="//delivery.us.myswitchads.com/adserver/sat.js"></script><br />
<script type="text/javascript"> __switch_obj.addInstance({"z":1870,"targetId":"switch_placeholder_7e827afdcf60d6b47916d4ee3b009122","width":"728","height":"90"}); </script><br />
</center>
</div>
<div style="display:block;clear:both;width:100%;position:relative;">
<div style="width:30%;">
WoWStratics<br />
</div>
<div style="width:30%;">
Kirthag<br />
</div>
</div>
</div><!-- .entry-content -->
Always forcing the ul for the streamlist to break out of any containing divs and/or hardcoded css.
Please advise.