#1
  1. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0

    Firefox gives weird white-space after menu, and IE doesn't extend container.


    Hey everyone,

    I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code:
    html4strict Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <title></title>
      <style type="text/css">/* <![CDATA[ */
      * { padding: 0;
    	  margin: 0;
    	}
      body {
       background-color: #6AB2DA;
       color: #000000;
       text-align: center;
       font-size: 13px;
       font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */
      }
      a {
       color: #6AB2DA;
      }
      a:focus {
       outline: 0 none;
      }
      #container {
       margin: 0 auto;
       text-align: justify;
       width: 50%;
      }
      #page {
       background-color: #FFFFFF;
      }
      #header {
       background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg );
       background-position: bottom left;
       height: 120px;
       width: 100%;
      }
      #header span {
       padding-left: 150px;
       padding-top: 50px;
       font-size: 21px;
       font-weight: bold;
       letter-spacing: -0.1em;
       color: #666666;
       display: block;
      }
      #menu {
       background-color: #6DC3DE;
       width: 100%;
      }
      #menu li {
       float: left;
       padding-top: 10px;
       padding-bottom: 11px;
       list-style-type: none;
      }
      #menu a {
       background-color: #6DC3DE;
       padding: 10px 20px;
       boreder: 2px solid transparent;
       color: #000000;
      }
      #news {
       clear: both;
       margin-top: 34px;
       overflow: auto;
       padding: 15px;
       height: 100px;
       border-bottom: 1px solid #0AA;
      }
      #news h1 {
       color: #6DC3DE;
       font-size: 21px;
      }
      #content {
       margin-top: 15px;
       padding: 15px;
      }
      #content h2 {
       padding-top: 10px;
       float: left;
       color: #6DC3DE;
       padding-right: 25px;
       font-size: 31px;
       border-right: 3px solid #6DC3DE;
      }
      #content .info {
       padding-top: 10px;
       padding-left: 25px;
       float: left;
       font-size: 11px;
       height: 31px;
      }
      #content p {
       text-indent: 45px;
       clear: both;
       border-bottom: 1px dotted #6DC3DE;
       padding-top: 10px;
       padding-bottom: 10px;
      }
      #bottom {
       border-top: 1px solid #6DC3DE;
       margin-top: 10px;
       padding: 5px;
      }
      #bottom ul#one {
       float: left;
      }
      #bottom ul#two {
       float: right;
      }
      #bottom li {
       padding-top: 10px;
       padding-bottom: 11px;
       list-style-type: none;
       display: block;
      }
      #bottom a {
       background-color: #6DC3DE;
       padding: 10px 20px;
       boreder: 2px solid transparent;
       color: #000000;
       display: block;
       width: 250px;
      }
      .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
       }
      .clearfix {display: inline-block;}
      /* Hides from IE-mac \*/
      * html .clearfix {height: 1%;}
      .clearfix {display: block;}
      /* End hide from IE-mac */
      /* ]]> */ </style>
     </head>
     <body>
      <div id="container">
       <div id="page">
        <div id="header"><span>i.love.summer</span></div>
    	<div id="menu">
    	 <ul>
    	  <li><a href="">asdfasf</a><li>
    	  <li><a href="">asdfasf</a><li>
    	  <li><a href="">asdfasf</a><li>
    	  <li><a href="">asdfasf</a><li>
    	  <li><a href="">asdfasf</a><li>
    	  <li><a href="">asdfasf</a><li>
    	  <li><a href="">asdfasf</a><li>
    	 </ul>
    	</div>
    	 <div id="news">
    	  <h1>welcome</h1>
    	 Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. 
    	 Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. 
    	 </div>
    	 <div id="content">
    	  <h2>I rock</h2>
    	  <div class="info">
    	  author: BlackNine<br />
    	  date: Today<br />
    	  cat: eventually, right now I want a horse
    	  </div>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet.
     
    Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p>
    	  <h2>I rock</h2>
    	  <div class="info">
    	  author: BlackNine<br />
    	  date: Today<br />
    	  cat: eventually, right now I want a horse
    	  </div>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet.
     
    Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p>
    	 </div>
    	 <div id="bottom">
    	  <ul id="one">
    	  <li><a href="">asf</a></li>
    	  <li><a href="">asf</a></li>
    	  <li><a href="">asf</a></li>
    	  <li><a href="">asf</a></li>
    	 </ul>
    	  <ul id="two">
    	  <li><a href="">asf</a></li>
    	  <li><a href="">asf</a></li>
    	  <li><a href="">asf</a></li>
    	  <li><a href="">asf</a></li>
    	 </ul>
    	 </div>
    	 <div class="clearfix"></div>
    	 </div>
      </div>
     </body>
    </html>


    Any suggestions would be great.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2006
    Posts
    160
    Rep Power
    38
    Replace boreder by border in #menu a
    Add min-height:1%; in #page
    overflow:hidden; in #menu
    and use closing tags in your #menu list

    Comments on this post

    • ryon420 agrees : Thanks!
    Last edited by Dan_A; December 2nd, 2007 at 11:25 AM.

IMN logo majestic logo threadwatch logo seochat tools logo