Element spacing trouble in a table with a background image

Sandor · February 3, 2017

I've run into an annoying problem with spacing that I can't seem to code myself out of. I have a table with a 400x100 image at its background in a page that is set max-width=400px, intended to be full width on mobile devices. The containers honor this, but somehow the image is being resized.

Note the right edge of the screen, the 400px image is not aligned with the 400px containers.

So i borrowed iPhone5 and I found a different problem.

the far right of the image is clipped, so I dropped the last label and radio button down to the next container for the first set. That is when I noticed the w3-radio button, while bigger that the standard radio, aligns differently on iPhones. When I load the page in FireFox it looks the way I intend.

Link to page: http://scaikeqc.org/sandbox/t6a.php This is a semi-permalink, as I've set aside the current version of the module to show you.

Clearly I need something more flexible, while at the same time doesn't break the careful balance between background image and text positioning and font size. I've fallen back on the old way of using HTML tables for layout because I wasn't getting the results desired with my basic understanding of CSS.

Relevant code below with relevant functions below that. Reason for using a function to post the opening HTML headers is that I use a lot of self-referencing PHP which in turns uses the

header('Location: '.$_SERVER['PHP_SELF']);

method of processing data before kicking back or pressing forward based on validation tests or other calculations in PHP.



        OpenHTML($_SESSION['EName']);



        print "<body style=\"max-width:400px\">\n";



        ShowCaution();



        ShowError();



        print "<form name=\"moarch\" action=\"{$_SERVER['PHP_SELF']}\" method=\"POST\">\n";

        print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n";

        print "<table class=\"w3-table w3-centered\"> \n";

        print "<TR><TD>Mounted Archery -- Single Shot</TD></TR>\n";

        IF (is_null($_SESSION['RiderHonors'])) {

            printf("<TR><TD><H2>%s</H2></TD></TR>\n", $_SESSION['RiderName']);

        } ELSE {

            printf("<TR><TD><H2>%s %s</H2></TD></TR>\n", $_SESSION['RiderHonors'], $_SESSION['RiderName']);

        }

        print "</TABLE>\n";

        print "</DIV>\n";



        print "<div class=\"w3-display-container\">\n";

        print "<img src=\"target_sm.png\" alt=\"Target\">\n";

        print "<div class=\"w3-display-left w3-container\">\n";

        print "<table class=\"w3-table w3-centered w3-xlarge w3-text-shadow\">\n";

        print "<TR class=\"w3-left-align\">\n";

        print "<TD class=\"w3-text-light-green\">$Gold<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"G\"></TD><TD></TD><TD class=\"w3-text-black\">$Red<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"R\"></TD><TD></TD><TD class=\"w3-text-white\">$Blue<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"B\"></TD><TD></TD><TD class=\"w3-text-light-gray\">$Black<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"K\"></TD><TD></TD><TD class=\"w3-text-dark-gray\">$White<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"WK\"></TD><TD></TD>\n";

        print "</TR>\n";

        print "</TABLE>\n";

        print "</div>\n";

        print "</div>\n";

        print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n";

        print "<table class=\"w3-table w3-centered\"> \n";

        print "<TR><TD>First Pass</TD><TD>Miss<input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"M\"></TD></TR>\n";

        print "</TABLE>\n";

        print "</DIV>\n";

function OpenHTML($c) {



    print "<!DOCTYPE html>\n";

    print "<html>\n";

    print "<title>$c</title>\n";

    print "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";

    print "<link rel=\"stylesheet\" href=\"http://www.w3schools.com/lib/w3.css\">\n";



}



function ShowCaution() {



    IF (isset($_SESSION['Caution']) AND !is_null($_SESSION['Caution'])) {



        print "<article class=\"w3-panel w3-yellow\">\n";

        print "<P>Take Note:<BR>\n";

        print "{$_SESSION['Caution']}</P></article>\n";

        $_SESSION['Caution'] = NULL;

    }



}



function ShowError() {



    IF (isset($_SESSION['EntryError']) AND !is_null($_SESSION['EntryError'])) {



        print "<article class=\"w3-panel w3-red\">\n";

        print "<P>You have an error in your input, please try again.<BR>\n";

        print "{$_SESSION['EntryError']}</P></article>\n";

        $_SESSION['EntryError'] = NULL;

    }



}

Ingolme · February 3, 2017

Tables just don't work very well on mobile devices. They're not responsive and refuse to become smaller than the content within them even if you specify a width.

The only real solution is to not use tables, use CSS layout techniques.

Sign In

Element spacing trouble in a table with a background image

Recommended Posts

Sandor

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity