Need an alternative to this CSS+HTML combo||Web browser is incompatible, can't change it

Question

This is my alternative attempt to try to solve this problem. To the extent of my knowledge, I need a .php page to load on my android device for digital signage. The digital signage app uses its own browser, which isn't opening the page right. What is happening is it looks like this. In my normal browsers, everything aligns correctly, because of the CSS .column property display:inline-table;. I need to make this code work, in an alternative way:

CSS

body{
  font-family:Arial;
  font-size:27px;
}

.block{
    line-height: 2rem;
    display:block;
    padding:0.25rem;
    box-sizing:border-box;
    font-size: 24px;
}
.column{
    width: 49%;
    max-width: 540px; /* or whatever. */
    display:inline-table;
}
.tableContainer{
    max-width: 100%; /* or whatever. */
    min-width: 100%; /* or whatever. */
    width:100%;
    margin:left; //centres it.
}

PHP

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
//-----------------------------------------------------------------------------
//-----------------------------------------------------------------------------
//-----------------------------------------------------------------------------
// 10,000 DONORS

echo "<p><b>$10,000</b></p>";

$sql = "SELECT DisplayName, LastName, FirstName FROM donor WHERE (DonationAmount = 10000 AND Category = '1') or (DonationAmount = 10000 AND Category IS NULL) ORDER BY LastName ASC";
$result = mysqli_query($conn, $sql); // query
if (mysqli_num_rows($result) > 0) { // as long as the query returns something, do the calcs.
    $array = array(); // create a variable to hold the information
    while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ // whule there are results, put them in the array
      $array[] = $row; // add the row in to the results (data) array
    }
    $counter = (count($array)); // find the amount of items in the array
    $divisorCount = ceil($counter/2); // column count
    $forEachCount = 1;

    //loop while there are items in the array
    foreach ($array as $row){
        $forEachCount++; //increment counter

        // naming logic
        if (empty($row['DisplayName'])) { // if there is no DisplayName
            if (empty($row['FirstName'])) { // show lastname
                $block[] = "<div class='block'>".$row['LastName']."</div>\n";
            }

            else { //show first + last if no display name
                $block[] = "<div class='block'>".$row['FirstName']." ".$row['LastName']."</div>\n";
            }

        } else { // show display name
            $block[] = "<div class='block'>".$row['DisplayName']."</div>\n";
        }


        if($forEachCount > $divisorCount){ //insert each record into a "block"
            $forEachCount = 0;
            end($block);
            $key = key($block);
            $block[$key] .= "</div><div class='column'>"; // insert all "blocks" into a css div
        }
    }
    unset($row,$key,$forEachCount,$divisorCount); //cleanup

    //insert the div and populate it with the blocks
    $output = "<div class='tableContainer'>
     <div class='column'>".implode($block)."</div>
     </div>";
     print_r($output); // display all of it!
     unset($array,$block);
}else{echo "<p>There are no donors in this category.</p>";}

EDIT
Here is the output HTML

<html>
    <head>

        <title>Screen3,WOH</title>

        <link rel="stylesheet" type="text/css" href="thecss.css">

    </head>
    <body style="color: white; font-size:25px; background-color: black;">
    </body>
</html>
<p><b>$10,000</b></p><div class='tableContainer'>
     <div class='column'><div class='block'>Dr. Ray and Linda Allen</div>
<div class='block'>Dr. Ed & Susan Anderson</div>
<div class='block'>Rev. Terry & Sue Anderson</div>
<div class='block'>Vernon & LaVonne Anderson</div>
<div class='block'>Chuck and Marlene Axtman</div>
<div class='block'>Terry & Jolene Baltrusch</div>
<div class='block'>Audrey Barnes</div>
<div class='block'>Bernabucci Family</div>
<div class='block'>Bossardt Corporation</div>
<div class='block'>Paul Broten</div>
<div class='block'>Cable Services, Inc./Microage Computer Centers</div>
<div class='block'>Kim N. Carter</div>
<div class='block'>Dakota Central Telecommunications Cooperative</div>
<div class='block'>Dakota Medical Foundation</div>
<div class='block'>Davis Real Estate Services Group, LLC</div>
<div class='block'>Hazell DeGroot</div>
<div class='block'>Charlie & Jan Skeel & Employees of Decorating by Charlie</div>
<div class='block'>Arthur A. and Tillie Dewald</div>
<div class='block'>Elks Club</div>
<div class='block'>Alfonso Cleveland Findley, M.D.</div>
<div class='block'>Ken Frigen</div>
<div class='block'>Michael W. & Marlys J. Gallagher</div>
<div class='block'>Curt and Darlene Goehner</div>
<div class='block'>Don & Cindy Gohner</div>
<div class='block'>Vincent Gregor</div>
<div class='block'>Beatrice Hagert</div>
<div class='block'>Lona Hall</div>
<div class='block'>Vernon & Cleo Harr</div>
<div class='block'>Hillerud Construction, Inc.</div>
<div class='block'>Nina Hintz</div>
<div class='block'>Rev. Lyle Hoxtell</div>
<div class='block'>Hugo’s Family Market</div>
<div class='block'>IRET - Jamestown Medical Building, LLC</div>
<div class='block'>Jamestown Community Foundation</div>
<div class='block'>Jamestown Eagles Club</div>
<div class='block'>Jamestown H.O.G. Chapter</div>
<div class='block'>KSJB / MIX 93.3 Radio</div>
<div class='block'>Sam and Doris Kaufman</div>
<div class='block'>Knights of Columbus</div>
</div><div class='column'><div class='block'>Archie & Silvia Koenig</div>
<div class='block'>Raymond & Lillian Larson</div>
<div class='block'>Corinne Lere Estate </div>
<div class='block'>Reuben Liechty & Co./GMAC</div>
<div class='block'>Gertrude McKenzie-Lind</div>
<div class='block'>Jim & Sue Lunde</div>
<div class='block'>Jim & Sue Matthiesen</div>
<div class='block'>John Mayer</div>
<div class='block'>Paul & Bertha Mayer Family</div>
<div class='block'>Metropolitan Federal Bank</div>
<div class='block'>Chris & Barb Mikkelson</div>
<div class='block'>Robert L. & Myra A. Nagel</div>
<div class='block'>National Medical Resources</div>
<div class='block'>Lynn & Terry Nieland</div>
<div class='block'>Northern Plains Electric Cooperative</div>
<div class='block'>Tim & Joanne Ottmar</div>
<div class='block'>Pathology Consultants, PC</div>
<div class='block'>Ralph K. Peterson</div>
<div class='block'>Sand Family</div>
<div class='block'>Sadie Sargent</div>
<div class='block'>E.D. “Jack” Schlecht</div>
<div class='block'>Si & Martha Liechty Mobile Homes</div>
<div class='block'>Dorothy L. Simenson</div>
<div class='block'>Wes & Marlys Smith</div>
<div class='block'>Mike & Marilyn Smyth</div>
<div class='block'>Dr. and Mrs. Joseph Sorkness</div>
<div class='block'>Stutsman County Abstract and Guarantee Co. Harold and Marie Bensch</div>
<div class='block'>Dr. Ray & Maria Tan</div>
<div class='block'>James & Luella Traiser</div>
<div class='block'>Two Rivers Printing</div>
<div class='block'>U.S. West</div>
<div class='block'>WIPFLi LLP CPAs & Consultants</div>
<div class='block'>Dr. and Mrs. James W. Wahe</div>
<div class='block'>Fred & Ida Wanner</div>
<div class='block'>Tracy & Naomi Wanzek</div>
<div class='block'>Jim & Karen Wieland</div>
<div class='block'>Jack & Mildred Wilkinson</div>
<div class='block'>Women of St. John’s Lutheran Church</div>
</div>
     </div><p style=font-size:20px;>In Loving Memory Of</p><div class='tableContainer'>
     <div class='column'><div class='block'>Russell & Eldora Christianson</div>
<div class='block'>John & Eva Fiechtner</div>
<div class='block'>R.F. & M.G. Kauphusman</div>
</div><div class='column'><div class='block'>J.M. & F.A. Thielge</div>
<div class='block'>Hattie Weight</div>
</div>
     </div><p><b>$5,000</b></p><div class='tableContainer'>
     <div class='column'><div class='block'>Ruth Allen</div>
<div class='block'>Brian   DeAnn Ament</div>
<div class='block'>Earl & Nelda Amundson</div>
<div class='block'>Atonement Lutheran Church</div>
<div class='block'>Ave Maria Village</div>
<div class='block'>Clair & Marcella Baker</div>
<div class='block'>Ardina & Elmo Bentz</div>
<div class='block'>Border States Paving, Inc.</div>
<div class='block'>Timothy & Christine Burchill</div>
<div class='block'>Dorothy Chouinard</div>
<div class='block'>Edward D. & Clara Christ</div>
<div class='block'>Randy Christianson</div>
<div class='block'>Community MRI Services</div>
<div class='block'>Dakota Clinic, Ltd Jamestown</div>
<div class='block'>Dakota Eye Institute, P.C.</div>
<div class='block'>Boyd & Coralynn Dallmann</div>
<div class='block'>Dickey County Abstract</div>
<div class='block'>El Zagal Jamestown Clowns</div>
<div class='block'>Tom & Joan Enderle</div>
<div class='block'>Douglas & Kathryn Ernie</div>
<div class='block'>Dr. Craig and Carol Fabel</div>
<div class='block'>Arnie & Deb Falk</div>
<div class='block'>Karen M. Finck</div>
<div class='block'>Frank and Marvel Fischer</div>
<div class='block'>Dr. Vernon and Kay Fitchett</div>
<div class='block'>Teresa Formo</div>
<div class='block'>Mary Ellen and Charles Frey</div>
<div class='block'>Lorraine Gallagher</div>
<div class='block'>Grace Episcopal Church</div>
<div class='block'>Grain Inspection, Inc.</div>
<div class='block'>Oliver and Donna Mae Graves</div>
<div class='block'>Bill & Donna Gullickson</div>
<div class='block'>Fay & Selma Heasley from Helen, Pearl & Paul</div>
<div class='block'>Robert Heil & Doris Heil</div>
<div class='block'>Dwaine and Joyce Heinrich</div>
<div class='block'>Heritage Centre of Jamestown</div>
<div class='block'>Hi-Acres Manor</div>
<div class='block'>Jim & Delaine Hildebrand</div>
<div class='block'>Linda Hoxtell</div>
<div class='block'>James River Eagles Auxiliary #2337</div>
<div class='block'>Jamestown Comfort Inn</div>
<div class='block'>Jamestown Implement, Inc.</div>
<div class='block'>Jamestown Sertoma Club</div>
<div class='block'>Jim River Drift Skippers</div>
<div class='block'>Alice M. Johansen</div>
<div class='block'>Tracy L. Johnk</div>
<div class='block'>Marlowe & Darlene Johnson</div>
<div class='block'>KSJB</div>
<div class='block'>Carol (Goldade) Kaiser</div>
<div class='block'>Mike & Sharlene Kendrick</div>
<div class='block'>Arlyce Klein</div>
<div class='block'>Delno & Phyllis Kleinknecht</div>
<div class='block'>John & Cynthia Kleven</div>
</div><div class='column'><div class='block'>Jones Lang LaSalle</div>
<div class='block'>Emmett & Debra Lampert</div>
<div class='block'>Dr. Raymond and LoRita Larsen</div>
<div class='block'>Reuben & Clarice Liechty</div>
<div class='block'>Curt & Rachel Liechty</div>
<div class='block'>Daniel R. Lies Family</div>
<div class='block'>Alan & Genny Lindberg</div>
<div class='block'>Marco Diversified, Inc.</div>
<div class='block'>Masonic Bodies</div>
<div class='block'>John Mayer</div>
<div class='block'>Mortenson Construction</div>
<div class='block'>Cindy Nelms</div>
<div class='block'>Noridian</div>
<div class='block'>Cindy Tag Nygord</div>
<div class='block'>Dr. Corey and Betty Nyhus</div>
<div class='block'>Orthopaedic Associates</div>
<div class='block'>Alan & Mary Jane O’Neil</div>
<div class='block'>Arvin Peterson</div>
<div class='block'>Gary & Marit Petrek</div>
<div class='block'>Gary & Jill Riffe</div>
<div class='block'>Arthur & Inez Roe</div>
<div class='block'>Robert & Dawn Rose</div>
<div class='block'>Rural Hospital Relief Fund</div>
<div class='block'>Russ Davis Wholesale, Inc.</div>
<div class='block'>Ann and Buell Schubert</div>
<div class='block'>Schubert’s Sales, Inc.</div>
<div class='block'>Julie Schulz</div>
<div class='block'>John & Sheri Schweitze</div>
<div class='block'>Bob and Angela Seitz</div>
<div class='block'>Dr. Arnold & Sally Siefken</div>
<div class='block'>Francis & Delores Simmers</div>
<div class='block'>Dave and Dr. Mandy Sorlie</div>
<div class='block'>South Central Human Service Center</div>
<div class='block'>Diane Luiken-Spangler</div>
<div class='block'>Spiritwood Community Betterment Club</div>
<div class='block'>Ross & Janet Stark</div>
<div class='block'>The Romsdal Family & Central Sales, Inc.</div>
<div class='block'>Palmer and Velma Thielges</div>
<div class='block'>Eleanor Thompson Estate</div>
<div class='block'>Timco Construction, Inc</div>
<div class='block'>Robert & Linda Todd</div>
<div class='block'>Shanda Schulz Traiser</div>
<div class='block'>Tom & Jane Trautman</div>
<div class='block'>Terry & Larry Ukestad</div>
<div class='block'>Grace & Alden Vannett</div>
<div class='block'>Ron & Kathy Venjohn</div>
<div class='block'>David & JoAnn Vining</div>
<div class='block'>Donald and Arlys J. Walicski</div>
<div class='block'>Patrick & Marla Walter</div>
<div class='block'>Ruben   Grace Walz</div>
<div class='block'>Dr. Robert   Shirla Wells</div>
<div class='block'>Stella Wheeler</div>
<div class='block'>Paul & Lynnette Witthauer</div>
</div>
     </div><p style=font-size:20px;>In Loving Memory Of</p><div class='tableContainer'>
     <div class='column'><div class='block'>Billye Dahlstrom</div>
<div class='block'>Joshua A. Marsolek</div>
</div><div class='column'><div class='block'>Elder Scherbenske</div>
</div>
     </div>

Your PHP page is generating HTML output. Without a connection to the database, I can not use your PHP to replicate the generated HTML. If you visit `index.php` for example, you do not see the PHP code. You instead will see rendered HTML. I'd like to see the source of the rendered HTML. — hopkins-matt, Jul 19 '16 at 16:11
If you view that exact HTML & CSS on your device, does it replicate the issue you show in the Imgur image? — hopkins-matt, Jul 19 '16 at 16:47
@hopkins-matt Yes, it does. I've messed with the resolution of the device, but no matter what the columns are always lopsided relative eachother — Dakota Wagner, Jul 19 '16 at 16:48
Hmm.. I think the browser on that device may be applying default styles. Try adding `margin: 0; padding: 0;` to `.column` and possibly `margin: 0; padding: 0.25rem 0;` to `.block` — hopkins-matt, Jul 19 '16 at 17:21
It'd be a lot easier if I had a Minix Neo X7. lol I'll let you know if I come up with any other ideas. It's just hard to fix something that can not be replicated. — hopkins-matt, Jul 19 '16 at 17:42
@hopkins-matt id like to note, if i use chrome on the device, it works fine — Dakota Wagner, Jul 19 '16 at 18:23
Would this be a potential solution? I'm not skilled enough in CSS to know.http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css — Dakota Wagner, Jul 19 '16 at 19:30

score 0 · Accepted Answer · answered Jul 19 '16 at 19:47

I found the correct settings.

.column{
    margin:0;
    padding:0;
    width: 49%;
    max-width: 540px; /* or whatever. */
    display:inline-table;
    float:inherit;

}
.tableContainer{
    max-width: 100%; /* or whatever. */
    min-width: 100%; /* or whatever. */
    width:100%;
    float:left;
}

THE SOLUTION:

the container needed to be float:left;, and the child .column, needed to inherit the settings from tableContainer with float:inherit;.

Need an alternative to this CSS+HTML combo||Web browser is incompatible, can't change it

1 Answers1