SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mysterious Spacing help.

    HI all i am designing a site and kinda new to css and having a problem with a mysterious space in the page in FireFox..
    (check the attachment)

    here is the css and html source .. if anyone can give this a look .. thank you very much.


    html source:
    Code HTML4Strict:
    <!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>
    <title>Elvis and Laura</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Robots" content="NOINDEX" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" />
    <script type="text/javascript"> lb_path = "http://www.domain.com/wp-content/plugins/lightbox/"; </script>
    <link rel="stylesheet" href="http://www.domain.com/wp-content/plugins/lightbox/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.domain.com/wp-content/plugins/lightbox/prototype.js"></script>
    <script type="text/javascript" src="http://www.domain.com/wp-content/plugins/lightbox/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="http://www.domain.com/wp-content/plugins/lightbox/lightbox.js"></script>
     
    <link rel="stylesheet" type="text/css" href="http://www.domain.com/wp-content/themes/elvis/style.css" />
    <link rel="stylesheet" type="text/css" href="http://www.domain.com/wp-content/themes/elvis/presentation.css" />
    <style type="text/css">
    #c-col{
     
     
    position:relative;
     
    background:#000000;
     
    color: #333333;
     
    width: 769px;
     
    height:auto;
     
     
    margin-left: auto;
     
    margin-right: auto;
     
    border-right-width: medium;
     
    border-bottom-width: 0;
     
    border-left-width: medium;
     
     
    border-right-style: solid;
     
    border-bottom-style: solid;
     
    border-left-style: solid;
     
    border-right-color: #171717;
     
    border-bottom-color: #171717;
     
    border-left-color: #171717;
     
    }
    </style>
     
    </head>
    <body>
    <!-- header div -->
    <!-- center column -->
    <div id="c-block">
    <div id="hdr">
    <div class="navbar">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <u><a href="http://www.domain.com/">Main Page</a></u>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <font color="#FFFFFF">|</font>
     
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <u><a href="http://www.domain.com/about">About Us</a></u>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <font color="#FFFFFF">|</font>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <u><a href="http://www.domain.com/photos">Photo Gallery</a></u>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <font color="#FFFFFF">|</font>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <u><a href="/videos">Video Gallery</a></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <font color="#FFFFFF">|</font>
     
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <u><a href="http://www.domain.com/downloads">Downloads</a></u>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <font color="#FFFFFF">|</font>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <u><a href="http://www.domain.com/other-stuff">Other Stuff</a></u></div></div>
    <div id="c-col">
    <div style="margin-left:10px; margin-right:10px;">
     
     
    		<div>
    				<span class="alignleft">&laquo; <a href="http://www.domain.com/archives/36">morning</a></span>
     
    			<span class="alignright"><a href="http://www.domain.com/archives/38">I miss you!</a> &raquo;</span>
    </div>
    <br />
    		<div class="post" id="post-37">
    			<a href="http://www.domain.com/archives/37" rel="bookmark" title="Permanent Link: our song">our song</a>
     
    			<div class="entry">
    <br />
    				<font color="#FFFFFF"><b>remember this my love?  —&gt; Oh oh, Be my baby, I’ll look after you, Oh oh, Be my baby, Ohhhhh….. So will you be my baby? I need you forever, please say yes…
     
    </b></font>
     
     
    				<p class="postmetadata">
    					<small>
     
    						<a href="http://www.domain.com/wp-admin/post.php?action=edit&amp;post=37" title="Edit post">Edit this entry.</a>					</small>
    <center>
     
    <!-- You can start editing here. -->
     
    	<font size="3pt">2 Responses to “our song”</font>
     
    	<ol class="commentlist">
     
     
    		<li class="alt" id="comment-32">
    			<cite>Elvis</cite> Says:
    						<br />
     
    			<small class="commentmetadata"><a href="#comment-32" title="">March 14th, 2008 at 11:56 am</a> &nbsp;&nbsp;<a href="http://www.domain.com/wp-admin/comment.php?action=editcomment&amp;c=32" title="Edit comment">edit</a></small>
     
    			<font class="commentlist2"><p>Yes! Of course. I want and need you forever and ever too, please say yes too!? MUUUUUUUUUUAH!</p>
    </font>
     
    		</li>
     
     
     
    		<li id="comment-34">
    			<cite>Laura</cite> Says:
    						<br />
     
    			<small class="commentmetadata"><a href="#comment-34" title="">March 14th, 2008 at 8:39 pm</a> &nbsp;&nbsp;<a href="http://www.domain.com/wp-admin/comment.php?action=editcomment&amp;c=34" title="Edit comment">edit</a></small>
     
    			<font class="commentlist2"><p>im already your baby.</p>
    </font>
     
    		</li>
     
     
     
    	</ol>
     
     
     
     
    <font size="3pt">Leave a Reply</font>
     
     
    <form action="http://www.domain.com/wp-comments-post.php" method="post" id="commentform">
     
     
    <p>Logged in as <a href="http://www.domain.com/wp-admin/profile.php">admin</a>. <a href="http://www.domain.com/wp-login.php?action=logout" title="Log out of this account">Logout &raquo;</a></p>
     
     
    <!--<p><small><strong>XHTML:</strong> You can use these tags: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;code&gt; &lt;em&gt; &lt;i&gt; &lt;strike&gt; &lt;strong&gt; </code></small></p>-->
     
    <p><textarea name="comment" id="comment" cols="40" rows="10" tabindex="4"></textarea></p>
     
    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
    <input type="hidden" name="comment_post_ID" value="37" />
    </p>
    <input type="hidden" name="_wp_unfiltered_html_comment" value="b314d10d27" />
    </form>
     
     
    </center>				</p>
     
    			</div>
    		</div>
     
     
     
     
    	</div>
    </div>
     
     
     
     
     
     
     
     
    </div>
     
     
     
     
      <!-- end of center column -->
     
     
     
     
    <!-- end c-block -->
     
     
    <div id="ftr">
     
    <table align="center">
     
    	<tr>
     
    		<td style="width: 100px" align="center"><a href="http://www.domain.com/wp-admin">Login</a></td>
     
    		<td style="width: 100px" align="center"><a href="http://www.domain.com/wp-login.php?action=logout">Logout</a></td>
     
    		<td style="width: 100px" align="center"><a href="http://www.domain.com/upload.php">Upload Photos</a></td>
     
    		<td style="width: 100px" align="center"><a href="http://www.domain.com/photosdel.php">Delete Photos</a></td><b></b>
     
    		<td style="width: 100px" align="center"><a href="http://www.domain.com/">Main Page</a></td>
     
    		<td style="width: 100px" align="center"><a href="#" onclick="window.scrollTo(0,0); return false">Top</a></td>
     
    	</tr>
     
    </table>
     
    </div>
     
    <!-- left column -->
     
    <!-- end of left column -->
     
    <!-- right column -->
     
    <!-- end of right column -->
     
    </body>
     
    </html>
    Style.css
    Code CSS:
    /*  
     
    Theme Name: Elvis and Laura
     
    Theme URI: [url]http://fbaprosolutions.com[/url]
     
    Description: The layout built from scratch for Elvis by William
     
    Version: 1.6
     
    Author: William
     
    Author URI: [url]http://fbaprosolutions.com/[/url]
     
    */
     
    body{
     
     
    margin: 0;
     
    padding:0;
     
    color: #333333;
     
    background-image: url([url]http://www.domain.com/wp-content/themes/elvis/images/back.jpg);[/url]
     
    }   
     
    .navbar{
     
    position:relative;
     
    top:367px;
     
    margin-left: auto;
     
    margin-right: auto;
     
    width:735px;
     
    color: #1eb0ad;
     
    height: 13px;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-style: normal;
     
    font-family: Arial, Helvetica, sans-serif;
     
    text-align: center;
     
    }
     
    #c-block {
     
    position: relative;
     
    width: 769px;
     
    z-index:1;
     
    height:80%;
     
    margin-left: auto;
     
    margin-right: auto;
     
    background-repeat: no-repeat;
     
     
    }
     
    #hdr{
     
    height:397px;
     
    background:#1d1d1d;
     
    color: #333333;
     
    width: 769px;
     
    background-image: url([url]http://www.domain.com/wp-content/themes/elvis/images/header.jpg);[/url]
     
    margin-left: auto;
     
    margin-right: auto;
     
    border-top-width: 0;
     
    border-right-width: medium;
     
    border-left-width: medium;
     
    border-top-style: solid;
     
    border-right-style: solid;
     
     
    border-left-style: solid;
     
    border-top-color: #171717;
     
    border-right-color: #171717;
     
     
    border-left-color: #171717;
     
    }
     
    #c-col{
     
     
    position:relative;
     
    background:#000000;
     
    color: #333333;
     
    width: 769px;
     
    height: 710px;
     
     
    margin-bottom: auto;
     
    margin-left: auto;
     
    margin-right: auto;
     
    border-right-width: medium;
     
    border-bottom-width: 0;
     
    border-left-width: medium;
     
     
    border-right-style: solid;
     
    border-bottom-style: solid;
     
    border-left-style: solid;
     
    border-right-color: #171717;
     
    border-bottom-color: #171717;
     
    border-left-color: #171717;
     
    }
     
     
     
    #ftr a:link, #ftr a:visited, #ftr a:active {
     
    text-decoration: none
     
    }
     
    #ftr {
    	position:relative;
     
    	left:3px;
     
    background:#1d1d1d;
     
    color: #FFFFFF;
     
    width: 769px;
     
    height: auto;
    margin-bottom: 0;
     
    margin-left: auto;
     
    margin-right: auto;
     
    z-index: auto;
     
     
    border-right-width: medium;
     
     
     
    border-left-width: medium;
     
     
     
    border-right-style: solid;
     
     
    border-left-style: solid;
     
    border-right-color: #171717;
     
    border-bottom-color: #171717;
     
    border-left-color: #171717;
     
    }
     
     
     
    body a:active{
    color: #1eb0ad;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-style: normal;
    }
     
    body a:link {
     
    color: #1eb0ad;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-style: normal;
    }
     
    body a:visited {
     
    color: #1eb0ad;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-style: normal;
    }
     
    body a:hover {
     
    color: #FFFFFF;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-size: 11px;
     
    font-style: normal;
    }
     
    .postdiv {
     
    position: absolute;
     
    overflow: hidden;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-size: 11px;
     
    font-style: normal;
     
    color: #CDCDCD;
     
    width: 375px;
     
    height: 90px;
     
    top:0px;
     
    left:110px;
     
    }
     
    .postdiv2 {
     
    position: absolute;
     
    overflow: hidden;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-size: 11px;
     
    font-style: normal;
     
    color: #CDCDCD;
     
    width: 375px;
     
    height: 90px;
     
    top:0px;width: 321px
     
    left:0px;
     
    }
     
    .postspan {
     
    position: relative;
     
    background-color: #1D1D1D;
     
    border: thin solid #1D1D1D;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-size: 11px;
     
    font-weight: bold;
     
    color: #CDCDCD;
     
     
    }
     
    .postimage {
     
    border: thick solid #1D1D1D;
     
    }
     
    .postimage2 {
     
    left:-10px;
    border: thick solid #1D1D1D;
     
    }
     
    .leftcolumn {
     
    position: relative;
     
    top:20px;
     
    left:10px;
     
    float: left;
     
    width: 500px;
     
    height: 341px;
     
    }
     
    .contentdiv {
     
    position: relative;
     
    height: 130px;
     
    width: 500px;
     
    left: 5px;
     
    color: #FFFFFF;
     
    font-style: normal;
     
    font-size: 12px;
     
    font-family: Arial, Helvetica, sans-serif;
     
    }
     
    .sidebar {
     
    position: absolute;
     
    top:10px;
     
    left:500px;
     
    width: 252px; 
     
    height: 625px;
     
    }
     
    .middle {
     
    background-image: url([url]http://www.domain.com/wp-content/themes/elvis/images/line.gif);[/url]
     
    position: absolute;
     
    top:5px;
     
    left:505px;
     
    width: 13px; 
     
    height: 695px;
     
    }
     
    .searchsubmit
     
    {
     
    font-size: 11px;
     
    color: #FFFFFF;
     
    background: #111111;
     
    border: 2px solid #262626;
     
    padding-top:1px
     
    } 
     
    .searchinput
     
    {
     
    font-size: 11px;
     
    color: #FFFFFF;
     
    background: #111111;
     
    border: 2px solid #262626;
     
    } 
     
    .calendar_wrap {
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-size: 11px;
     
    color:#FFFFFF;
     
    width: 230px;
     
    }
     
    .calender_header {
     
    color:#1eb0ad;
     
    text-align:left;
     
    }
     
    .widgettitle {
     
    background-color: #171717;
     
    color: #FFFFFF;
     
    font-style: normal;
     
    font-weight: bold;
     
    font-size: 12px;
     
    font-family: Arial, Helvetica, sans-serif;
     
    }
     
    li {
     
    color: #1eb0ad;
     
    list-style-type: square;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-style: normal;
     
    }
     
    li span {
     
    color:#FFFFFF;
     
    }
     
    .alignleft {
     
    color: #1eb0ad;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-style: normal;
     
    text-align:left;
     
    width: auto;
     
    }
     
    .alignright {
     
    color: #1eb0ad;
     
    font-size: 11px;
     
    font-weight: bold;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-style: normal;
     
    text-align:right;
     
    margin-left:580px;
     
    }
     
    .thumbnail {
    border: thick solid #1D1D1D;
    }
     
    .title {
     
    text-align:center;
     
    color:#FFFFFF;
     
    font-family: Arial, Helvetica, sans-serif;
     
    font-weight: bold;
     
    }
     
    .photoalbum{
    text-align: left;
    }
     
    .header {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    }
     
    .photoalbum .status {
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
     
    a img {
     
    border: none;
     
    }
     
    .postdivbottom {
    position: absolute;
    top:90px;
    left:115px;
     
     
    }
     
    .postdivbottom2 {
    position: absolute;
    top:90px;
    left:0px;
     
     
    }
     
    .phototable {
    position:relative;
    width: 752px;
    height: auto;
    left:20px;
    }
    .albumtable {
    position:relative;
    width: 752px;
    height: auto;
    }
    .headersection{
    position:relative;
    left:25px;
    }
    .test{
    	margin-top: 8px;
    	margin-left: 5px;
    	width:350px;
    }
    .postmetadata{
    	color:#333333;
    }
    .commentlist2{
    color:#FFFFFF;
    }
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •