Jump to content

Element spacing trouble in a table with a background image

Recommended Posts

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.

post-204724-0-43544100-1486076625_thumb.png 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.


post-204724-0-09449200-1486076608_thumb.png 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.


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



        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;


Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...