user6333114 user6333114 - 5 months ago 9
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

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>
Comments