SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help Me Remove Spacing in #middle

    Hello,

    I need some help to remove extra space at the bottom of my middle div in Netscape 8.0.

    Can you help?

    Here is my CSS:

    Code:
    /* CSS Document */
    body {
      font-family: Verdana, Tahoma, Helvetica;
      font-size: 62.5%;
      line-height: 160%;
      cursor: default;
      margin: 0;
      padding: 0;
      text-align: center;
      background: url(images/bg.gif);
    }
    img{border:0}
    p {
      margin: 0 0 10px 0;
      font-size: 12px;
      line-height: 175%;
      clear: left;
      text-align: left;
    }
    p.signature {
      font-style: italic;
      margin-left: 270px;
    }
    p.photo {
      text-align: center;
      margin: 30px 0;
    }
    p.photo2 {
      text-align: center;
      margin-top: 30px;
    }
    p.photo img {border:1px solid #000000;}
    p.photo2 img {border:0;}
    a:link, a:active {
      text-decoration: underline;
      color: #CC0053;
    }
    a:visited {color: #CC3366;}
    a:hover {text-decoration: none;}
    ul.sitemap {
      padding: 20px 0 0 40px;
    }
    ul.indented1 {
      padding-left: 20px;
    }
    ul.indented2 {
      padding-left: 30px;
    }
    li.nested {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    h1 {
      font-size: 19px;
      line-height: 150%;
      color: #000;
      text-align: center;
      font-weight: normal;
      margin: 0;
    }
    h1.red {
      color: #CC0033;
      margin: 10px 0 20px 0;
    }
    h2 {
      font-size: 1.7em;
      margin: 0;
      font-weight: normal;
      text-align: left;
    }
    #heading {
      width: 816px;
      height: 82px;
      margin: 0 auto;
      background: url(images/heading.gif);
      position: relative;
    }
    #description {
      width: 487px;
      text-align: center;
      position: absolute;
      top: 46px;
      left: 0;
      font-size: 1.1em;
      font-style: italic;
    }
    #contact {
      position: absolute;
      top: 22px;
      right: 55px;
      text-align: right;
      font-size: 1.1em;
    }
    #contact span.phone {
      font-weight: bold;
    }
    #navbar {
      height: 32px;
      width: 816px;
      margin: 0 auto;
      padding-top: 13px;
      background: url(images/navbar_top.gif) no-repeat;
      position: relative;
      text-align: center;
      font-size: 1.1em;
    }
    * html #navbar {height:48px;he\ight:32px}
    .navbar-links a:link, .navbar-links a:visited, .navbar-links a:active {
      text-decoration: none;
      color: #000;
      margin: 0 5px;
      font-weight: bold;
    }
    .navbar-links a:hover {
      text-decoration: underline;
    } 
    #middle {
      width: 756px;
      margin: 0 auto;  
      padding: 26px 30px 0 30px;
      background: url(images/middle_bg.gif) repeat-y;
      overflow: hidden;
      text-align: left;
    }
    * html #middle {width:816px;w\idth:756px;}
    #left {
      width: 232px;
      text-align: center;
    	position: relative;
    	float: left;
    	background: url(images/sidebar_bg.gif) repeat-y;
    }
    #left-top {
      background: url(images/sidebar_top.gif) no-repeat top;
      width: 232px;
      height: 13px;
    }
    #left-bottom {
      background: url(images/sidebar_bottom.gif) no-repeat bottom;
      width: 232px;
      height: 13px;
    }
    #left ul {
      margin: 10px 15px 0 25px;
      padding: 0;
      text-align: left;
      list-style-type: none;
    }
    #left li {
      margin: 0;
      background: url(images/bullet.gif) no-repeat left center;
      padding: 0;
      
    }
    #left ul a:link, #left ul a:visited, #left ul a:active {
      font-size: 11px;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 20px;
      text-decoration: none;
      font-weight: bold; 
      color: #000000;
      display: block;
    }
    #left ul a:hover {
      font-size: 11px;
      font-weight: bold; 
      color: #990033;
    }
    #left p.comment {
      margin: 0 20px;
      font-size: 1.1em;
      font-style: italic;
    }
    #left p.author {
      margin: 0 20px 20px 20px;
      font-size: 1em;
      text-align: right;
      line-height: 150%;
    }
    #right {
      position: relative;
      float: right;
      width: 488px;
    }
    #main {
      clear: both;
      text-align: center;
      padding: 20px 0;
      position: relative;
    }
    .box1 {
      width: 163px;
      height: 246px;
      position: absolute;
      top: 61px;
      right: 37px;
    }
    .box1 p {
      margin: 0 0 10px;
      font-size: 1.2em;
    }
    .box1 p.details {
      font-size: 1.1em;
      text-align: right;
    }
    #footer {
      width: 816px;
      height: 34px;
      margin: 0 auto;
      padding-top: 18px;
      background: url(images/navbar_bottom.gif) no-repeat;
      position: relative;
      text-align: center;
      font-size: 1.1em;
    }
    * html #footer {height:52px;he\ight:34px}
    #subfooter {
      font-size: 1em;
      margin: 0 auto;
      padding: 10px 0;
      color: #6A6A6A;
      width: 816px;
      text-align: center;
      background: url(images/middle_bg.gif) repeat-y;
    }
    #subfooter a:link, #subfooter a:visited, #subfooter a:active {
      font-size: 1em;
      color: #6A6A6A;
      text-decoration: underline;
    }
    #subfooter a:hover {
      text-decoration: none;
    }
    #lightbox {
    	background-color: #eee;
    	padding: 10px;
    	border-bottom: 2px solid #666;
    	border-right: 2px solid #666;
    }
    #lightboxDetails {
    	font-size: 1.1em;
    	font-weight: bold;
    	padding-top: 0.8em;
    }	
    #lightboxCaption {
      float: left;
    }
    #keyboardMsg {
      float: right;
    }
    #closeButton {
      top: 5px;
      right: 5px;
      font-size: 1em;
    }
    #lightbox img {
      border: none;
      clear: both;
    } 
    #overlay img {
      border: none;
    }
    #overlay { background-image: url(/images/overlay.png); }
    * html #overlay {
    	background-color: #333;
    	back\ground-color: transparent;
    	background-image: url(/images/blank.gif);
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
    }
    Here is my page:

    Code:
    <!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>The Area's Leading Supplier of Outdoor Furniture, Structures, and Accents | Wayside Lawn Structures</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="outdoor patio lawn furniture childrens playsets storage sheds buildings gazebos playground equipment ornaments accents" />
    <meta name="description" content="The leading supplier of outdoor structures and accents in the tri-state area of Ohio, Pennsylvania, and West Virginia" />
    
    <link rel="stylesheet" type="text/css" href="wayside.css" />
    <script type="text/javascript" src="javascript/lightbox.js"></script>
    
    </head>
    
    <body>
    
    <?php include('top.php'); ?>
    
    <div id="middle">
      <div id="left">
        <div id="left-top"></div>
        <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
        <p class="author">Name<br />City, St.</p>
        
        <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
        <p class="author">Name<br />City, St.</p>
        <a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures"><img src="images/lot_ariel.jpg" width="208" height="64" alt="Ariel View of Wayside Lawn Structures Lot" title="Ariel View of Wayside Lawn Structures Lot" /></a>
        <ul>
          <li><a href="/quote-request.php">Free Price Quote</a></li>
          <li><a href="/contact.php">Directions to Our Lot</a></li>
          <li><a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures">Ariel View of Our Lot</a></li>
          <li><a href="/contact.php">Contact Us</a></li>
        </ul>
        <div id="left-bottom"></div>
      </div>  
      <div id="right">
        <h1>Discover the area's biggest supplier of outdoor furniture, structures, and accents</h1>
        <h1 class="red">Where you are treated as a friend, and relationships are more important than money.</h1>
        <p>Through the years, neighbors, friends, and many folks around the community have come to depend on us for <b>superior quality products</b>, such as outdoor furniture, children’s playground equipment, gazebos, and storage sheds.</p>
        <p>We have been servicing the tri-state area of Ohio, Pennsylvania, and West Virginia since the spring of 2002. God has blessed our business, and we’ve grown from a small corner lot into the area's leading supplier of outdoor structures and accents.</p>
        <p><b>Customers come first in our business</b>. We are dedicated to developing and maintaining relationships with neighbors and mail-in customers alike, meeting their needs and desires the best we can.</p>
        <p>Use the links above to browse our products, and see which of our unique items catch your attention! Or come by <a href="contact.php">our lot in Columbiana, Ohio</a>. You will find high-quality playground equipment, lawn furniture and ornaments, gazebos, storage buildings, and much more.</p>
        <p>Don't hesitate to <a href="contact.php">contact us</a> with any questions or comments. <b>We are here to serve you!</b></p>
        <p class="signature">Jason Martin, Manager<br />Wayside Lawn Structures</p>
      </div>
      <div id="main">
        <img src="images/picnic_table_chairs.jpg" alt="Picnic Table With Chairs" title="Picnic Table With Chairs" width="750" height="326" />
        <div class="box1">
          <h2>Oval Picnic Table</h2>
          <p>With Set of 5 Chairs</p>
          <p>The only thing missing from this table is you!</p>
          <p>It's ready for your family and friends to gather around and have a great time of relaxation and fellowship.</p>
          <p class="details"><a href="outdoor-furniture/picnic-tables.php">More details</a></p>
        </div>
      </div>
    </div>
    
    <?php include('bottom.php'); ?>
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LavernGingerich View Post
    Can you help?
    Maybe if you provide a link to the page or at the very least the code as it's output to the browser with all PHP parsed as HTML.

  3. #3
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, here it is.

    Code:
    <!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>The Area's Biggest Supplier of Outdoor Furniture, Structures, and Accents</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="outdoor patio lawn furniture childrens playsets storage sheds buildings gazebos playground equipment ornaments accents" />
    <meta name="description" content="The leading supplier of outdoor structures and accents in the tri-state area of Ohio, Pennsylvania, and West Virginia" />
    
    <link rel="stylesheet" type="text/css" href="wayside.css" />
    <script type="text/javascript" src="javascript/lightbox.js"></script>
    
    </head>
    
    <body>
    
    <div id="heading">
      <div id="description">The leading supplier of outdoor structures and accents in the<br /> tri-state area of Ohio, Pennsylvania, and West Virginia.</div>
      <div id="contact">44781 St. Rt. 14 &bull; Columbiana, OH 44408<br />Hours: 8 am – 5 pm &bull; Monday – Saturday<br /><span class="phone">Toll-Free Phone: 800-846-4940</span></div>
    
    </div>
    <div id="navbar" class="navbar-links">
      <a href="/index.php" title="Wayside Lawn Structures Home">Home</a>
      <a href="/about.php" title="About Us">About Us</a>
      <a href="/contact.php" title="Contact Us">Contact Us</a>
      <a href="/storage-building/index.php" title="Storage Buildings">Storage Buildings</a>
      <a href="/playsets/index.php" title="Outdoor Children's Playsets">Playsets</a>
    
      <a href="/gazebos/index.php" title="Gazebos">Gazebos</a>
      <a href="/lighthouses/index.php" title="Lighthouses">Lighthouses</a>
      <a href="/outdoor-furniture/index.php" title="Outdoor Furniture">Outdoor Furniture</a>
    </div>
    
    <div id="middle">
      <div id="left">
        <div id="left-top"></div>
        <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
    
        <p class="author">Name<br />City, St.</p>
        
        <p class="comment">"This is what one happy person said about a gazebo they bought from Wayside Lawn Structures."</p>
        <p class="author">Name<br />City, St.</p>
        <a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures"><img src="images/lot_ariel.jpg" width="208" height="64" alt="Ariel View of Wayside Lawn Structures Lot" title="Ariel View of Wayside Lawn Structures Lot" /></a>
        <ul>
          <li><a href="/quote-request.php">Free Price Quote</a></li>
    
          <li><a href="/contact.php">Directions to Our Lot</a></li>
          <li><a href="images/wayside-lawn-structures.jpg" rel="lightbox" title="Ariel View of Wayside Lawn Structures">Ariel View of Our Lot</a></li>
          <li><a href="/contact.php">Contact Us</a></li>
        </ul>
        <div id="left-bottom"></div>
      </div>  
      <div id="right">
        <h1>Discover the area's biggest supplier of outdoor furniture, structures, and accents</h1>
    
        <h1 class="red">Where you are treated as a friend, and relationships are more important than money.</h1>
        <p>Through the years, neighbors, friends, and many folks around the community have come to depend on us for <b>superior quality products</b>, such as outdoor furniture, children’s playground equipment, gazebos, and storage sheds.</p>
        <p>We have been servicing the tri-state area of Ohio, Pennsylvania, and West Virginia since the spring of 2002. God has blessed our business, and we’ve grown from a small corner lot into the area's leading supplier of outdoor structures and accents.</p>
        <p><b>Customers come first in our business</b>. We are dedicated to developing and maintaining relationships with neighbors and mail-in customers alike, meeting their needs and desires the best we can.</p>
        <p>Use the links above to browse our products, and see which of our unique items catch your attention! Or come by <a href="contact.php">our lot in Columbiana, Ohio</a>. You will find high-quality playground equipment, lawn furniture and ornaments, gazebos, storage buildings, and much more.</p>
    
        <p>Don't hesitate to <a href="contact.php">contact us</a> with any questions or comments. <b>We are here to serve you!</b></p>
        <p class="signature">Jason Martin, Manager<br />Wayside Lawn Structures</p>
      </div>
      <div id="main">
        <img src="images/picnic_table_chairs.jpg" alt="Picnic Table With Chairs" title="Picnic Table With Chairs" width="750" height="326" />
    
        <div class="box1">
          <h2>Oval Picnic Table</h2>
          <p>With Set of 5 Chairs</p>
          <p>The only thing missing from this table is you!</p>
          <p>It's ready for your family and friends to gather around and have a great time of relaxation and fellowship.</p>
          <p class="details"><a href="outdoor-furniture/picnic-tables.php">More details</a></p>
    
        </div>
      </div>
    </div>
    
    <div id="footer" class="navbar-links">
      <a href="/index.php" title="Wayside Lawn Structures Home">Home</a>
      <a href="/about.php" title="About Us">About Us</a>
      <a href="/contact.php" title="Contact Us">Contact Us</a>
      <a href="/storage-building/index.php" title="Storage Buildings">Storage Buildings</a>
    
      <a href="/playsets/index.php" title="Outdoor Children's Playsets">Playsets</a>
      <a href="/gazebos/index.php" title="Gazebos">Gazebos</a>
      <a href="/lighthouses/index.php" title="Lighthouses">Lighthouses</a>
      <a href="/outdoor-furniture/index.php" title="Outdoor Furniture">Outdoor Furniture</a>
    </div>
    <div id="subfooter">Copyright &copy;2007 Wayside Lawn Structures. Design by <a class="credits" href="http://www.newcdesigns.com" title="Web Site and Graphic Design Services">New Creation Designs</a>.</div>
    
    </body>
    </html>
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  4. #4
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, it has decided to stop showing that space, so I guess we won't worry about it.

    For some reason, though, it is pushing #right away from the right side and it turn it forces #right below #left instead of showing them side-by-side. It looks good in all my other browsers, even in Netscape Navigator 9, but in 8, it's messing up.

    It appears to be the hack I am using on #middle. Do you have any thoughts?

    Here is my CSS for #middle, #left, and #right.

    Code:
    #middle {
      width: 756px;
      margin: 0 auto;  
      padding: 26px 30px 0 30px;
      background: url(images/middle_bg.gif) repeat-y;
      overflow: hidden;
      text-align: left;
    }
    * html #middle {width:816px;w\idth:756px;}
    #left {
      width: 232px;
      text-align: center;
    	position: relative;
    	float: left;
    	background: url(images/sidebar_bg.gif) repeat-y;
    }
    #left-top {
      background: url(images/sidebar_top.gif) no-repeat top;
      width: 232px;
      height: 13px;
    }
    #left-bottom {
      background: url(images/sidebar_bottom.gif) no-repeat bottom;
      width: 232px;
      height: 13px;
      clear: both;
    }
    #left ul {
      margin: 10px 15px 0 25px;
      padding: 0;
      text-align: left;
      list-style-type: none;
    }
    #left ul li {
      margin: 0;
      background: url(images/bullet.gif) no-repeat left center;
      padding: 0;
      float: left;
      clear: left;
      width: 180px;
      
    }
    #left ul a:link, #left ul a:visited, #left ul a:active {
      font-size: 11px;
      padding: 6px 0 6px 20px;
      text-decoration: none;
      font-weight: bold; 
      color: #000;
      display: inline-block;
    }
    #left ul a:link, #left ul a:visited, #left ul a:active {
      display: block;
    }
    #left ul a:hover {
      font-size: 11px;
      font-weight: bold; 
      color: #990033;
    }
    #left p.comment {
      margin: 0 20px;
      font-size: 1.1em;
      font-style: italic;
    }
    #left p.author {
      margin: 0 20px 20px 20px;
      font-size: 1em;
      text-align: right;
      line-height: 150&#37;;
    }
    #right {
      position: relative;
      float: right;
      width: 494px;
    }
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.


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
  •