user6333114 user6333114 - 1 year ago 46
CSS Question

Divs wont stay inline chrome extension

Its not just divs. Lists also wont stay inline. I've already tried many things and cant get it to work. (display: inline on everything and making the wrapper width 100%) Is this something normal for chrome extensions? Here's my html, i hope you can help. Thanks!

<!--
<!doctype html>
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Minds radio</title>
<style>
html, body {
margin:0;
padding:0;
overflow-y: hidden;
width: 900;
height: 1100;
display: inline;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
background-color: white;
width: 900;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
}
p{
visibility:visible;
}

a {
color: #5882C4;
}
.footer {
display: inline !important;
width: 100%;
}
.bloc {
padding: 20;
display: inline;
background-color: black;
}
</style>

<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
</head>
<body>
<div id="status">
<center>
<img width="260" height="170" src="http://themindspanel.com/wp-content/uploads/2016/06/mindsradio3-1200x500.jpg" alt="mindsradio3" /></a>
<center><iframe src="https://mindsradio.airtime.pro/embed/player?stream=auto&amp;title=Minds Radio" width="280" height="216" frameborder="0"></iframe></center>
</center>
<div class="footer" style="display: inline !important; width: 100%;">
<div><a href="index.html" class="bloc">Radio</a></div>
<div><a href="schedule.html" class="bloc">Schedule</a></div>
<div><a href="donate.html" class="bloc">Donate</a></div>
<div><a href="mindsPanel.html" class="bloc">M-P</a></div>
</div>

</body>
</html>

Answer Source

Add min-width:

<!--
<!doctype html>
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Minds radio</title>
    <style>
html, body {
margin:0;
padding:0;
overflow-y: hidden;
width: 900px;
height: 1100;
display: inline-block;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
background-color: white;
}
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
      }
    p{
            visibility:visible;
    }

a {
color: #5882C4;
}
.footer {
display: inline-block !important;
width: 100%;
}
.bloc {
padding: 20;
display: inline-block;
background-color: black;
min-width:200px
}
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
  </head>
  <body>
    <div id="status">
<img width="260" height="170" src="http://themindspanel.com/wp-content/uploads/2016/06/mindsradio3-1200x500.jpg"  alt="mindsradio3" /></a>
<center><iframe src="https://mindsradio.airtime.pro/embed/player?stream=auto&amp;title=Minds Radio" width="280" height="216" frameborder="0"></iframe></center>
</center>  
<div class="footer" width: 100%;">
  <span><a href="index.html" class="bloc">Radio</a></span>
  <span><a href="schedule.html" class="bloc">Schedule</a></span>
  <span><a href="donate.html" class="bloc">Donate</a></span>
  <span><a href="mindsPanel.html" class="bloc">M-P</a></span>
</div>

</body>
</html>