s_avinash_s Posted October 5, 2018 Share Posted October 5, 2018 Hi I am trying to make two equal boxes in my code but there is some mismatch happening between both as shown in attached image. Am using span and p in my code.Please suggest <style> span { background-color: lightgrey; width: 800px; border-style: solid; border-color: #92a8d1; display: inline-block; } p.modify { display: inline-block; } </style> Link to comment Share on other sites More sharing options...
Ingolme Posted October 5, 2018 Share Posted October 5, 2018 Without the HTML structure it's hard to tell what's going on there, I can only make guesses. The <span> element cannot contain a <p> element, use <div> instead of <span>. Try setting the margin of the <p> element to zero. Link to comment Share on other sites More sharing options...
s_avinash_s Posted October 5, 2018 Author Share Posted October 5, 2018 Hi When i try to change to div, it changes everything which becomes more unusual. So i only made p element margin as 0 , then first row becomes proper.now other part becomes uneven. I have attached a the uneven part of boxes. <div id="flowvalues" class="tabcontent"> <style> span { background-color: lightgrey; width: 800px; border-style: solid; border-color: #92a8d1; display: inline-block; } p.modify { display: inline-block; margin-top: 0; margin-bottom: 0; margin-right: 0; margin-left: 0; } </style> </head> <body> <span> <strong><font size="5">Mass Flow Rate</strong></font>    :                 <p class = "modify" id="demo2"></p> <script> var currentUsedFont; function massflow_val() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo2").value = this.responseText; document.getElementById("mass_func").value = this.responseText; } }; xhttp.open("GET", "massflow_val.txt", true); xhttp.send(); } setInterval(massflow_val, 1000); </script> <input type="text" id="mass_func" size ="7" style="border: 2px solid black;font-size:35pt;"> <p class = "modify" id="demo3"></p> <script> function massunit() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo3").innerHTML = this.responseText; } }; xhttp.open("GET", "massunit.txt", true); xhttp.send(); } setInterval(massunit(), 1000); </script> <br> <br> <strong><font size="5">Volume Flow Rate</strong></font>   :                 <p class = "modify" id="demo5"></p> <script> function volumeflow_val() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo5").value = this.responseText; document.getElementById("vol_func").value = this.responseText; } }; xhttp.open("GET", "volumeflow_val.txt", true); xhttp.send(); } setInterval(volumeflow_val(), 1000); </script> <input type="text" id="vol_func" size ="7" style="border: 2px solid black;font-size:35pt;"> <p class = "modify" id="demo6"></p> <script> function volumeflowunit() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo6").innerHTML = this.responseText; } }; xhttp.open("GET", "volumeflowunit.txt", true); xhttp.send(); } setInterval(volumeflowunit(), 1000); </script> <br> <br> <strong><font size="5">Density</strong></font>           :                 <p class = "modify" id="demo8"></p> <script> function densityflow_val() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo8").value = this.responseText; document.getElementById("den_func").value = this.responseText; } }; xhttp.open("GET", "densityflow_val.txt", true); xhttp.send(); } setInterval("densityflow_val()", 1000); </script> <input type="text" id="den_func" size ="7" style="border: 2px solid black;font-size:35pt;"> <p class = "modify" id="demo9"></p> <script> function densityflowunit() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo9").innerHTML = this.responseText; } }; xhttp.open("GET", "densityflowunit.txt", true); xhttp.send(); } setInterval("densityflowunit()", 1000); </script> <br><br> </span> <span > <strong><font size="5">Totaliser 1</strong></font>    :                 <p class = "modify" id="totaliser1"></p> <script> function totaliser1_val() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("totaliser1").value = this.responseText; document.getElementById("totaliser1_func").value = this.responseText; } }; xhttp.open("GET", "totaliser1_val.txt", true); xhttp.send(); } setInterval(totaliser1_val(), 1000); </script> <input type="text" id="totaliser1_func" size ="7" style="border: 2px solid black;font-size:35pt;"> <p class = "modify" id="totaliser1unit"></p> <script> function totaliser1_unit() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo9").innerHTML = this.responseText; } }; xhttp.open("GET", "totaliser1_unit.txt", true); xhttp.send(); } setInterval(totaliser1_unit(), 1000); </script> hhhh <br> <br> <strong><font size="5">Totaliser 2</strong></font>    :                 <p class = "modify" id="totaliser2"></p> <script> function totaliser2_val() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("totaliser2").value = this.responseText; document.getElementById("totaliser2_func").value = this.responseText; } }; xhttp.open("GET", "totaliser2_val.txt", true); xhttp.send(); } setInterval(totaliser2_val(), 1000); </script> <input type="text" id="totaliser2_func" size ="7" style="border: 2px solid black;font-size:35pt;"> <p class = "modify" id="totaliser2unit"></p> <script> function totaliser2_unit() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("totaliser2unit").innerHTML = this.responseText; } }; xhttp.open("GET", "totaliser2_unit.txt", true); xhttp.send(); } setInterval(totaliser2_unit(), 1000); </script> gggg <br> <br> <strong><font size="5">Temperature</strong></font>   :                 <p class = "modify" id="demo11"></p> <script> function temp_val() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo11").value = this.responseText; document.getElementById("temp_func").value = this.responseText; } }; xhttp.open("GET", "temp_val.txt", true); xhttp.send(); } setInterval(temp_val(), 1000); </script> <input type="text" id="temp_func" size ="7" style="border: 2px solid black;font-size:35pt;"> <p class = "modify" id="demo12"></p> <script> function tempunit() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo12").innerHTML = this.responseText; } }; xhttp.open("GET", "tempunit.txt", true); xhttp.send(); } setInterval("tempunit()", 1000); </script> <br> <br> </span> <span> <style> input[type=range] { -webkit-appearance: none; width: 55%; border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #92a8d1; margin-top: 0; margin-bottom: 0; margin-right: 0; margin-left: 0; } </style> <br><br> <strong><font size="5">Current O/P 1:   </strong></font> <form> <div> 4<input id="currentoutput1" type="range" min="4" max="20" step="0.01" oninput="recieved_current_output_1.value=currentoutput1.value" >20 <input id="recieved_current_output_1" type="number" value="100" min="0" max="200" oninput="rangeInput.value=recieved_current_output_1.value" > </div> </form> <br> <br> <br> <strong><font size="5">Frequency O/P 1:  </strong></font> 0 Hz<input type="range" id="frequencyoutput1" min="0" max="10000" step="0.01">10000 Hz <p id="frequency_output_val_1"></p> <script> function frequency_output_1() { var x = document.getElementById("frequencyoutput1").value; document.getElementById("frequency_output_val_1").innerHTML = x; } setInterval(frequency_output_1,1000); </script> <br> <br> </span> <span> <br><br> <strong><font size="5">Current O/P 2:   </strong></font> 4 mA<input type="range" id="currentoutput2" min="4" max="20" step="0.01" >20 mA <p id="current_output_val_2"></p> <script> function current_output_2() { var x = document.getElementById("currentoutput2").value; document.getElementById("current_output_val_2").innerHTML = x; } setInterval(current_output_2,1000); </script> <br> <br> <br> <strong><font size="5">Frequency O/P 2:  </strong></font> 0 Hz<input type="range" id="frequencyoutput2" min="0" max="10000" step="0.01" >10000 Hz <p id="frequency_output_val_2"></p> <script> function frequency_output_2() { var x = document.getElementById("frequencyoutput2").value; document.getElementById("frequency_output_val_2").innerHTML = x; } setInterval(frequency_output_2,1000); </script> <br> <br> </span> <br> <style> #rcorners3 { border-radius: 25px; border: 4px solid #92a8d1; padding: 20px; width: 755px; height: 150px; } </style> <span id="rcorners3" > <strong><font size="5">Alerts / Errors</strong></font> </span> <span id="rcorners3" > <strong><font size="5">IO Connections</strong></font> </span> </div> Please suggest Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now