2013-10-31 39 views
1

我遇到格式問題。該代碼在我的瀏覽器和我的谷歌瀏覽器上正常工作,但在某些文本不包含。谷歌瀏覽器上的表格格式化問題

我認爲它與表設置有關。

以下是鏈接到頁面:http://timstaples.com/?p=blog&id=91 我的猜測是,你會更直接地從這個鏈接看到代碼,因爲我使用PHP來加載其他內容。我只是不想在下面發佈我的所有代碼。

這是一些有人看到的屏幕截圖的圖像。但是,這不是我的電腦。 enter image description here

我希望它的表或表寬度簡單。

下面是代碼:

<style type="text/css"> 
.blogImage { 
    position: absolute; 
    left: 21px; 
    top: 23px; 
    width: 133px; 
    height: 133px; 
    text-align: center; 
    vertical-align: middle; 
    display: block; 
    overflow: hidden; 
} 
.blogDate { 
    position: absolute; 
    left: 2px; 
    width: 376px; 
    height: 31px; 
    text-align: left; 
    overflow: hidden; 
    background-image: url(images/blogDateBar.png); 
    padding-left: 15px; 
    font-size: 12px; 
    color: #0469CE; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    display: block; 
    top: -25px; 
    padding-top: 14px; 
} 
.readMore { 
    position: absolute; 
    left: 548px; 
    top: 146px; 
    width: 142px; 
    height: 32px; 
    text-align: center; 
    vertical-align: middle; 
    display: block; 
    overflow: hidden; 
    background-repeat: no-repeat; 
    background-position: center top; 
} 
#blogHolder { 
    position: relative; 
} 
.blogTitle { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    color: #000; 
    padding-right: 15px; 
    padding-left: 15px; 
    background-image: url(images/blogTitleGrayLight.png); 
    background-repeat: repeat-x; 
    background-position: 0px 5px; 
    line-height: 17px; 
    height: 52px; 
    font-weight: bolder; 
} 
.blogTitlePrint { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 22px; 
    color: #666; 
    padding-right: 15px; 
    background-repeat: repeat-x; 
    background-position: 0px 5px; 
    line-height: 20px; 
    height: 52px; 
    font-weight: bold; 
} 
.blogContent { 
    text-indent: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    line-height: 16px; 
    display: block; 
    padding-left: 15px; 
    padding-right: 20px; 
    padding-top: 10px; 
} 
#sFont { 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #5383BA; 
} 
#sTable { 
    display: block; 
    padding: 10px; 
    background-color: #F2F2F2; 
} 
.blogContentPrint { 
    text-indent: 0; 
    padding-left: 15px; 
    padding-right: 20px; 
} 

b, 
strong { 
    font-weight: bold; 
} 
</style> 
<link href="wordpress/wp-content/themes/twentythirteen/style.css" rel="stylesheet" type="text/css" /> 
<link href="blueWood.css" rel="stylesheet" type="text/css" /> 
<?php 
require('wordpress/wp-blog-header.php'); 
?> 

<? 
if(!$_GET[id]) 
{ 


if($_GET[p]!="blog") 
{ 
    $posts = get_posts(); 
} 

foreach ($posts as $post) : start_wp(); ?> 
<script type="text/javascript"> 
function MM_validateForm() { //v4.0 
    if (document.getElementById){ 
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; 
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]); 
     if (val) { nm=val.name; if ((val=val.value)!="") { 
     if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); 
      if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; 
     } else if (test!='R') { num = parseFloat(val); 
      if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; 
      if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); 
      min=test.substring(8,p); max=test.substring(p+1); 
      if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; 
     } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; } 
    } if (errors) alert('The following error(s) occurred:\n'+errors); 
    document.MM_returnValue = (errors == ''); 
} } 
</script> 
<br /> 

<table width="100%" cellpadding="0" cellspacing="0" id="blogHolder" > 
    <tr> 
    <td width="21%" rowspan="2" align="center" valign="middle"> 


    <div class="blogImage"><a href="?p=blog&amp;id=<? echo get_the_ID(); ?>"><? echo get_the_post_thumbnail($recent["ID"], array(133,133)); ?></a></div> 

    <div class="blogDate"> 
    <table width="217" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="76"><? echo the_date();?></td> 

    </tr> 
</table> 


    </div>  



    <img src="images/blogImageBox.png" width="177" height="177" /></td> 
    <td width="79%" height="27" valign="middle" class="blogTitle"><? echo the_title(); ?></td> 
    </tr> 
    <tr> 
    <td valign="top" background="images/blogBG2.png"><div class="blogContent"> 
     <? echo the_excerpt(); ?> 

    <div class="readMore"><a href="?p=blog&amp;id=<? echo get_the_ID(); ?>"><img src="images/readMore.png" width="142" height="32" alt="Read More" /></a> </div> 

    </div></td> 
    </tr> 
    <tr> 

    </tr> 
</table> 
     <p> 



    <?php 
    endforeach; 

    } 

    if($_GET[id]) 
    { 
     $posts = get_posts('p=' . $_GET[id] .''); 

     foreach ($posts as $post) : start_wp(); ?> 
    <table width="90" border="0" align="center" cellpadding="0" cellspacing="0" > 
       <tr> 
       <td align="right"><?php the_date(); ?></td> 
       </tr> 
       <tr> 
       <td valign="middle" class="blogTitlePrint"><br /> 
        <?php the_title(); ?> 
        <hr /></td> 
       </tr> 
       <tr> 
       <td><?php the_content(); ?> 
       <hr/> 
       <img src="images/TalkAboutIt.png" width="653" height="155" alt="Talk About It!" /> <br /> 

       <?php $comments = get_comments('number=6&status=approve&post_id=' . $_GET[id] . ''); 
     foreach($comments as $comm) : 
     { ?> 
    <hr/> 
       <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
        <td width="7%" valign="top" id="sFont">Name:</td> 
        <td width="60%" valign="top"><b><? echo $comm->comment_author; ?></b></td> 
        <td width="33%"><div align="right" id="sFont">Date:<? $daDate = $comm->comment_date; 

        $daDate = explode("-", $daDate); 
        $gone = explode(" ", $daDate[2]); 
        echo $daDate[1]."-".$gone[0]."-".$daDate[0]; 
        echo " || "; 
        $contractDateBegin = date("g:i a", strtotime($gone[1])) ; 
        echo " " . $contractDateBegin; 

        ?></div></td> 
        </tr> 
        <tr> 
        <td colspan="3" id="sFont">Comments:</td> 
        </tr> 
        <tr> 
        <td colspan="3"> 

        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" id="sTable""> 
         <tr> 
         <td><? echo html_entity_decode($comm->comment_content); ?></td> 
         </tr> 
        </table> 

        </td> 
        </tr> 
       </table> 
       <p> 
        <? } 
       endforeach; 
       ?> 
       <hr/> </p> 
       <img src="images/CommentBox.png" width="653" height="65" alt="Comment Box" /> 
       <form action="?p=comments" method="post" name="form1" id="form1" onsubmit="MM_validateForm('Name','','R','Email','','RisEmail','Comments','','R');return document.MM_returnValue"> 

       <table width="100%" border="0" cellspacing="3" cellpadding="0"> 
        <tr> 
        <td width="8%">Name:     </td> 
        <td width="17%"><input type="text" name="Name" id="Name" /></td> 
        <td width="46%"><label for="Name"></label></td> 
        <td width="29%">&nbsp;</td> 
        </tr> 
        <tr> 
        <td>Email:     </td> 
        <td><input type="text" name="Email" id="Email" /></td> 
        <td nowrap="nowrap"> *Emails will not be displayed on this blog.</td> 
        <td>&nbsp;</td> 
        </tr> 
        <tr> 
        <td colspan="4">Comments: 
         <label for="Comments"></label></td> 
        </tr> 
        <tr> 
        <td colspan="4"><textarea name="Comments" cols="75" rows="7" id="Comments"></textarea> 
         <br /> 
        <input name="button" type="submit" id="button" onclick="MM_validateForm('Name','','R','Email','','R','Comments','','R');return document.MM_returnValue" value="Submit" /> 
        <input name="blogID" type="hidden" id="blogID" value="<? echo $_GET[id]; ?>" /></td> 
        </tr> 
       </table> 
       </form> 
       <p>&nbsp; </p> 

       </td> 
       </tr> 


    </table> 

       <?php 
     endforeach; 



    /////// 






    } 
    ?> 
    <?php 
    // The Query 
    $month = "month"; 

    function getMonthTotal($i) 
     { 
     query_posts('monthnum=' . $i .''); 
     while (have_posts()) : the_post(); 
      $month[] = "."; 
     endwhile; 
     return $month; 
    } 

    $Jan = getMonthTotal(1); 
    $Feb = getMonthTotal(2); 
    $Mar = getMonthTotal(3); 
    $Apr = getMonthTotal(4); 
    $May = getMonthTotal(5); 
    $Jun = getMonthTotal(6); 
    $Jul = getMonthTotal(7); 
    $Aug = getMonthTotal(8); 
    $Sep = getMonthTotal(9); 
    $Oct = getMonthTotal(10); 
    $Nov = getMonthTotal(11); 
    $Dec = getMonthTotal(12); 

    //echo count($Jul); 
    //echo count(month8); 
    // Reset Query 
    wp_reset_query(); 
    ?> 

回答

1

添加left padding<p>風格和你的一些其他的風格,如<td>和自定義標題類。

p { 
    padding-left: 10px; 
} 

您可能想盡力避免使用表格。這是舊的編碼方式,我看到您當前的代碼有幾個問題。現在有更簡單的方法將內容與CSS3對齊flexboxbox-sizing屬性。

CSS樣式不應放在<div id="Content">的內部。 <Style>標籤屬於文檔的head部分或放置在外部css文件中。