No word wrap?

[rocky48]

I have been developing a mobile phone version of my website and have a problem I can't solve.

The code works fine on the PC and iPad version, but when I output the data into a table on the mobile version, it does not wrap the text in the cell.

 

I have tried changing the CSS style using- word-wrap: break-word; but this does not make any difference.

Both the header row and all of the data rows seem all bunched up.

Here is the CSS script:

body

{

margin:0px;

padding:0px;

font-family:Arial, Helvetica, sans-serif;

}


img

{

border:none;

}


ul,li,h1,h2,h3,h4,h5,h6,p,span,td,div

{

margin:0px;

padding:0px;

line-height:0px;

list-style:none;

}


li a,a,a:hover,li a:hover

{

text-decoration:none;

}



input,

textarea,

select {

            font:100% Arial, Helvetica, sans-serif;

            vertical-align:middle;

            color:#000;

            outline:none;

}

form, fieldset {

            margin:0;

            padding:0;

            border-style:none;

}




/*Site Gentral Start*/


#wrapper

{

width:100%;

height:auto;

float:left;

}


#page

{

width:300px;

height:auto;

margin:0px auto;

}



/*header Start*/


.header

{

width:300px;

height:auto;

float:left;

background:#fbfaf9;

}


.logo

{

width:300px;

height:auto;

float:left;

padding:0px 0px 10px 18px;

background:url(../images/border.png) bottom repeat-x;

}


.banner

{

width:300px;

height:auto;

float:left;

padding:0px 0px 0px 18px;

}


.small-logo

{

width:140px;

height:auto;

float:left;

}


.home

{

width:40px;

height:50px;

float:right;

padding-top:30px;

}


/*content Start*/


.content

{

width:300px;

height:auto;

float:left;

padding:0px 0px 0px 18px;

background:#fbfaf9;

}


.content ul

{

margin:12px 0px 0px 0px;

padding:0px;

}


.content ul li

{

background:url(../images/menu-bg.png) no-repeat;

height:25px;

font:bold 12px Arial, Helvetica, sans-serif;

color:#383333;

padding:14px 0px 0px 15px;

margin-bottom:15px;

display:block;

}


.content ul li a,a:hover

{

color:#383333;

}


.content h1

{

font:18px Arial, Helvetica, sans-serif;

color:#8f9294;

padding:5px 0px 5px 0px;

}


.content p

{

font:12px Arial, Helvetica, sans-serif;

color:#8f9294;

line-height:18px;

padding-right:22px;

text-align:justify;

padding-bottom:15px;

}


#dtable {


font-size:small;

color:black;


 }


/*footer Start*/


.footer

{

width:300px;

height:auto;

float:left;

padding:5px 0px 20px 18px;

background:#fbfaf9;

}


.footer-left

{

width:50px;

height:auto;

float:left;

}

.footer-right

{

width:60px;

height:auto;

float:left;

}

.footer-center

{

width:290px;

float:none;

background:url(../images/footer-center.png);

height:28px;

text-align:center;

font:12px Arial, Helvetica, sans-serif;

color:#FFFFFF;

padding-top:12px;

}

Here is the php/html script I am running:

<?php

session_start();


include("cverse_connect.php");

doDB();


//check for required info from the query string



//verify the Event exists

$verify_Event_sql = "SELECT ID, Event_Type FROM Events WHERE ID = '".$_POST["Event_Type"]."'";

$verify_Event_res =  mysqli_query($mysqli, $verify_Event_sql) or die(mysqli_error($mysqli));


if (mysqli_num_rows($verify_Event_res) < 1) {

            //this Event does not exist

            $display_block = "<p><em>You have selected an invalid Event.<br/>

            Please try again.</em></p>";


} else {

//get the Event ID

            while ($Event_info = mysqli_fetch_array($verify_Event_res)) {

                        $Event_ID = stripslashes($Event_info['ID']);

                        $Event_Name = ($Event_info['Event_Type']);

            }


$verify_Mood_sql = "SELECT ID, Event_Sub_Type FROM Event_Sub WHERE ID = '".$_POST["Mood"]."'";

$verify_Mood_res =  mysqli_query($mysqli, $verify_Mood_sql) or die(mysqli_error($mysqli));


if (mysqli_num_rows($verify_Mood_res) < 1) {

            //this Event does not exist

            $display_block = "<p><em>You have selected an invalid Mood.<br/>

            Please try again.</em></p>";

}


            while($Mood_info = mysqli_fetch_array($verify_Mood_res)) {

                        $Mood_ID = ($Mood_info['ID']);

                        $Mood_Name = ($Mood_info['Event_Sub_Type']);

            }

            //gather the Events

            $get_Event_sql  = "SELECT Verses.ID AS versesID, Verses.Verse, Verses.Sub_Type, Verses.Event, Events.ID AS eventsID, Events.Event_Type, Event_Sub.ID AS event_SubID, Event_Sub.Event_Sub_Type

            FROM Verses

            LEFT JOIN Events

            ON Verses.Event = Events.ID

            LEFT JOIN Event_Sub

            ON Verses.Sub_Type = Event_Sub.ID

            WHERE Verses.Event = '".$_POST["Event_Type"]."' And Verses.Sub_Type = '".$_POST["Mood"]."'

            ORDER BY Verses.ID ASC";



            $get_Event_res = mysqli_query($mysqli, $get_Event_sql) or die(mysqli_error($mysqli));


            //create the display string

            $display_block .= "


<table width=\"100%\" cellpadding=\"3\" cellspacing=\"1\" border=\"1\" BGCOLOR=\"white\" >

            <tr>

            <th>ID</th>

            <th>VERSE</th>

            <th>MOOD/SUB TYPE</th>

            <th>CHOOSE</th>

            </tr>"; 


            while ($Verse_info = mysqli_fetch_array($get_Event_res)) {

                        $Verse_id = $Verse_info['versesID'];

                        $Verse_text = nl2br(stripslashes($Verse_info['Verse']));

                        $Mood_info = $Verse_info['Event_Sub_Type'];

                        $VID = $Verse_id;

                        //add to display

$display_block .= "

<tr>

<td width=\"7%\" valign=\"top\">".$Verse_id."</td>

<td width=\"47%\" valign=\"top\">".$Verse_text."</td>

<td width=\"31%\" valign=\"top\">" .$Mood_info."</td>

<td width=\"15%\" valign=\"middle\"

<form METHOD=\"POST\" ACTION=\"mVInput1.php\">

<input type=\"Radio\" name=\"VID\" value=$VID >


</td></tr>";

}


$display_block.="<input type=submit value=Submit>

</form>";



            //free results

            mysqli_free_result($get_Event_res);

            mysqli_free_result($verify_Event_res);  

//close connection to MySQL

            mysqli_close($mysqli);

           

//close up the table

$display_block .="</table>";          

}

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name= "viewport" content="width=360"/>

<title>Welcome</title>

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

</head>


<body>



<div id="wrapper"><!--Wrapper start-->

<div id="page"><!--Page start-->


<div class="header"><!--Header start-->

<div class="logo"><a href="#"><img src="images/logo.png" alt="" /></a></div>

<div class="small-logo"><a href="#"><img src="images/Site_small.png" alt="" /></a></div>

<div class="home"><a href="index.html"><img src="images/home.png" alt="" /><p>Home</p></a><br></div>

</div><!--Header End-->


<!--content start-->

<div class="content">


<div id="dtable">

<?php echo $display_block; ?></div>


</div><!-- end #content -->



<!--content End-->


<!--Footer start-->

<div class="footer">


<div class="footer-center">© 1066Cards4U</div>


</div>

<!--Footer End-->


</div>

</div>

<!--Wrapper End-->


</body>



</html>

Why is this happening?

Can anybody help?

[Psycho]

This would not be a PHP or MySQL problem. It would be a problem in the HTML/CSS. Posting the server-side code only complicates our ability to help you. Please provide the output that is causing the problem. If you provide a link to a page with the problem, it would be helpful to work with the CSS code to debug.

 

But, right off the bat I see invalid HTML code. On line 133 there is no closing greater than symbol for the TD tag. Also, the value for the input on line 137 should be enclosed in quotes.

 

Also, why all the lines of code to clear the mysql results before you close the table? It's not invalid, just not logical in my opinion.

[rocky48]

Hi Pyscho

Thank you for looking at this code.

I have corrected the code, but it made no difference!

Here is a link to the form that runs the code: http://www.1066cards4u.co.uk/Mobile/mAlt_inputform1.html?

I hope this makes it easier to debug.

Many thanks!

[Psycho]

I believe this is your problem:

 

ol,ul,li,h1,h2,h3,h4,h5,h6,p,span,td,div
{
margin:0px;
padding:0px;
line-height:0px;  <== REMOVE THIS
list-style:none;
}

 

It makes no sense to my why you would globally apply those style properties to all those elements anyway. For example, what does list_style have to do with header tags?

[rocky48]

Hi Psycho

 

Thanks that did the trick!

 

Having solved that another problem has arisen.

 

When the Submit button is clicked absolutly nothing happens.

No error, it just stays on the page.

Again extactly the same code works on PC and iPad versions.

Regarding you comments about lines 133 & 137, they are all one line and the </td> is on line 140.

I am guessing that it must be in the stylesheet, but I can see anything that I know of that would influence the Submit button.

 

Do you think that this problem should be a new thread, if so I will re-post?

[Psycho]

Regarding you comments about lines 133 & 137, they are all one line and the </td> is on line 140.

 

You misinterpreted my comment. I didn't say there was no closing TD tag. I said there was no closing bracket for the opening tag.

 

Line 133 above is this:

 

 

<td width=\"15%\" valign=\"middle\"

 

It should be this:

 

<td width=\"15%\" valign=\"middle\">

 

As for your new problem, I doubt it is a CSS issue. It is likely an HTML. When I ran your page through an HTML validator, there were plenty of errors. I recall there was one or more about the FORM tags.

Edited July 24, 2015 by Psycho

[Psycho]

Yep, I was right. The HTML is invalid. On every row in your results you have an opening FORM tag and a a radio button input. But, you don't close the form! instead there is a single closing form tag after all the records (and multiple opening forms) are created.

 

However, something else is wrong as well. Even on a page with just one record (where there would only be one FORM opening tag, it still doesn't work. But, there are so many other problems it's not worth my time to try and troubleshoot. The HTML output is a mess. Many problems should not have any functional implications, but it all adds up.

 

Here's one tip for you:

 

In the code to produce each row of verses, you are defining the width for each column in the TD element. It would be much simpler to just define the width ONE TIME when creating the header row. Less code to clutter the logic and less output to send to the browser.

[rocky48]

Ran a validation and found the errors!

 

I did not realise how helpful a validation can be.

 

Thanks for your help!