谷歌浏览器上的表格格式化问题

时间：2013-10-31 23:34:32

标签： css google-chrome layout formatting

我遇到格式问题。代码在我的浏览器和我的谷歌浏览器中工作正常，但在某些文本中不包含。

我认为它与表格设置有关。

以下是该页面的链接：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 个答案:

答案 0 :(得分：1)

为left padding样式和一些其他样式添加<p>，例如<td>和自定义标题类。 

p {
    padding-left: 10px;
}

您可能希望尽力避免使用表格。这是旧的编码方式，我看到你当前代码的几个问题。现在，有更简单的方法可以将内容与CSS3与flexbox和box-sizing属性对齐。

CSS样式不应放在<div id="Content">内。 <Style>标记属于文档的head部分，或者放在外部css文件中。

相关问题
最新问题