SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast mr.dutch's Avatar
    Join Date
    Oct 2004
    Location
    Kobe, Japan
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Float bug? where is it?

    Okay, I have been searching for a while on the internet, but I can't find it... So I hope (think) you guys can give me a hand.

    I am redesigning my website, and get this in Firefox and Opera:



    Looks pretty normal... but when I view it in IE, I am getting a big gap between the logo and the content:



    What can I do about this?

    Thanks in advance!

    Here is the Html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>KobeCityInfo.com - Home -</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="kobecss.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    <div id="container"> 
      <div id="mainheader"> 
        <div class="blank2"></div>
        <!-- for decoration only -->
      </div>
      <div id="header"> 
      <img alt="home" src="kobe1.jpg" />
      </div>
      <div id="mainnav"> 
    <div id="tabs">
      <ul>
        <li><a href="kobehome.html" title="kobehome"><span>Home</span></a></li>
        <li><a href="sightseeing.html" title="Sightseeing"><span>Sightseeing</span></a></li>
        <li><a href="stayingandgoingout.html" title="Staying and Going out"><span>Staying and going out</span></a></li>
        <li><a href="practical.html" title="Practical"><span>Practical</span></a></li>
        <li><a href="extra.html" title="Extra"><span>Extra</span></a></li>
        <li><a href="photos.html" title="Photos"><span>Photos</span></a></li>
    	<li><a href="about.html" title="About"><span>About</span></a></li>
      </ul>
    
    
    </div>
      </div>
      <div id="sidebar"> 
        <p>Welcome to Kobe CityInfo, on this website you can find basic information about the city of Kobe; from hotels to restaurants, and from getting around to history, etc. 
    
    For all comments, complains and/or ideas about Kobe CityInfo you can fill in the contact form.I Hope that you enjoy this website!
    
    Greets
    Dave</p>
      </div>
      <div id="content"> 
        <p>Kobe, the capital of Hyogo prefecture which lays next to the ocean on its southern side, is a major Japanese city with a population of more then 1.5 million people. It is located on Japanís main and largest island, Honshu. It is famed in Japanís business world for having one of the busiest harbours for maritime trade, being ranked 3rd in size in the country, as well as one of the largest in the world.</p>
    
    <p>In recent years Kobe has been recovered from the Great Hanshin-awaji Earthquake that took place on January 15, 1995. Killing approximately 6,000 people and leaving more than 300,000 homeless, it ranks as one of Japanís biggest earthquakes in its modern history. </p>
    
    <p>Despite the earthquake and because of the positive attitude of its citizens which rebuilt it with energy and enthusiasm, Kobe has emerged as a modern city with international allure. In Kobe you will find many things to keep you occupied and enjoying your stay, such sightseeing , visiting huge shopping halls. And donít forget to see the World Longest suspension bridge while you are there. Its impressive sight could set the mood to get you on your way that night to enjoying Kobe's famed mouth-watering Kobe Beef; of course to be washed down with some after dinner sake at any numerous karaoke houses you are sure to be able to find for a wonderful night out with friends creating memories for a lifetime. </p>
    
    <p>Many foreigners reside in Kobe making it easy not only to make friends, but to get those important business connections as well from those who have already eased themselves into the community before your arrival. You will also find picturesque mountains to the north allowing for natural get-always for weekend adventures calling out to you to come and enjoy what they have to offer -- peace and relaxation.</p>
    
    <p>Whether its work or play, the transportation infrastructure is one of the best in the worlds. A great road system along with Japanís punctual trains always on schedule allows one to engage in play or business activities with ease anytime. If the trains canít meet your needs, then the buses and ferries will do so making all places easily accessible. </p>
    
    <p>Close to Kobe you will find other great and interesting cities beckoning you to come for business and adventure.Osaka, Himeji, Kyoto, and Nara are all places one will find rich in culture and people who look forward to making friends and doing business with those who visit their cities.</p>
    
    <p>Some of the major companies and corporations in the Kobe, Osaka, and Kyoto region are: Daiei , Kawasaki Heavy Industries, Kiss/FM KOBE, Kobe Electric Railway, Kobe New Transit, and Kobe Rapid Railway whose HQ is located in Kobe city.</p>
    
    <p>Make Kobe your choice when coming to Japan. Your future memories of good times and success await you in Kobe.</p>
     
    
    
    </div>
      <div id="clearfooter"></div>
      <!-- to clear footer -->
      <div id="footer"> 
        <div class="divider1"></div>
        <div class="blank"></div>
        <!-- for decoration only -->
        <p>Copyright © 2005Ė2007 by <a href="#" title="Link 1">D.F. Stokhof</a>.All Rights Reserved.</p>
    
      </div>
    </div>
    </body>
    </html>
    and here the CSS:

    Code:
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html,body {
    		margin: 0;
    		padding: 0;
    }
    body {		
    		font: x-small verdana, "Bitstream Vera Sans", arial, hevetica, sans-serif;
    		text-align: center;
    		color: #505367;
    		background-color: #e0e0e0;
    }
    		
    #container {
    		margin-left:auto;
    		margin-right:auto;
    		width: 730px; 
    		min-height:100%;
    		text-align: left;
    		background: #ffffff url(sidebarbg.jpg) repeat-y right top;
    		border-left: 1px solid #a1a1a1;
    		border-right: 1px solid #a1a1a1;
            position:relative;
    		}
    /* commented backslash hack v2 \*/ 
    * html #container {height:100%;}		
    * html #container {width:732px;w\idth:730px;}
    * html body{font-size:xx-small;f\ont-size:x-small}
    /* end hack */ 
    
    #mainheader {
    		position:absolute;
    		left:0;top:0;
    		height: 160px;
    		width:100%;
    		background-color: #fff;
    		border-bottom: 1px solid #ccff99;
    		z-index:1;
    }
    #header {
    		height: 125px;
    		width:100%;
    		background-color: #ccff99;
    		margin: 0px 0px 5px 0px;
    		border-top: 1px solid #ccff99;
    		border-bottom: 1px solid #fff;
    		position:relative;
    		z-index:2;
    		overflow:hidden;
    }
    
    * html #mainheader {height:161px;he\ight:160px}
    * html #header {height:127px;he\ight:127px}
    
    
    #mainnav {
    		width:100%;
    		height: 20px;
    		background-color: #ccff99;
    		border-top: 1px solid #fff;
    		border-bottom: 1px solid #ccff99;
    		position:relative;
    		z-index:2;
    }
    * html #mainnav{height:22px;he\ight:20px}		
    #sidebar {      
    		float: right;
    		width: 170px;
    		padding: 0px;
    		padding: 1em;
    }
    #content {	
    		width: 553px;
    		margin-right: 210px;
    		padding: 10px 5px 10px 5px; font-size: 120%;
    		}
    #content p, #sidebar p, #mainnav p, #header p,#footer p  {margin:5px 5px 5px 5px}	
    
    	
    #footer	{
    		position:absolute;
    		bottom:0;
    		width:100%;
    		height: 30px;
    		
    		background-color: #ccff99;
    		border-top: 1px solid #ccff99;
    }
    #footer p {margin:0;padding:0px 10px 0px 120px;}
    * html #footer {height:25px;he\ight:24px;}
    
    .divider1 {
    	width:100%;
    	height:5px;
    	overflow:hidden;
    	background:#fff;
    	position:relative;
    	border-bottom: 1px solid #ccff99;
    }
    
    #clearfooter {height:27px;width:100%;clear:both}
    .blank , .blank2 {
    	position:absolute;
    	left:547px;
    	width:7px;
    	height:0px;
    	overflow:hidden;
    	border-top:	1px solid #fff;
    }
    .blank {top:-1px;}
    .blank2 {bottom:-1px;border-top:1px solid #fff;
    }
    
    /*- Menu Tabs C--------------------------- */
    
        #tabs {
          float:left;
          width:100%;
          background:#fff;
          font-size:120%;
          line-height:normal;
          }
        #tabs ul {
    	margin:0;
    	padding: 3px 1px 2px 35px;
    	list-style:none;
          }
        #tabs li {
          display:inline;
          margin:0;
          padding:0;
          }
        #tabs a {
          float:left;
          background:url("tableftC.gif") no-repeat left top;
          margin:0;
          padding:0 0 0 4px;
          text-decoration:none;
          }
        #tabs a span {
          float:left;
          display:block;
          background:url("tabrightC.gif") no-repeat right top;
          padding:5px 17px 4px 12px;
          color:#464E42;
          }
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
        #tabs a span {float:none;}
        /* End IE5-Mac hack */
        #tabs a:hover span {
          color:#FFF;
          }
        #tabs a:hover {
          background-position:0% -42px;
          }
        #tabs a:hover span {
          background-position:100% -42px;
          }  
    
    /*- Side Navigation C--------------------------- */

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a simple two column layout. What are all the needless hacks for?

  3. #3
    SitePoint Enthusiast mr.dutch's Avatar
    Join Date
    Oct 2004
    Location
    Kobe, Japan
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    You have a simple two column layout. What are all the needless hacks for?
    They were already on it when I copied the CSS layout from the net, and when I added some new stuff I wasn't thinking of moving them from the layout.

    Is this the problem?

    I actually have had the same problem before, and would really like to know why...

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    sorry, I got home really late last night, didn't even realize what time it was when I hit some of the other sites I frequent - I'll take a look at this when I wake up, ok?

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    My guess is that it is because in IE the margin/padding is different it makes the whole width bigger, when two floats don't fit next to each other one will be pushed below the other like what you are seeing.

    Try replacing
    Code:
    html,body {
      margin: 0;
      padding: 0;
    } 
    
    with
    
    * { margin: 0; padding: 0; }
    And add inner divs to your main sections
    Code:
    <div id="content">
      <div>
        <!-- Content goes here -->
      </div>
    </div>
    <div id="sidebar">
      <div>
        <!-- Sidebar content goes here -->
      </div>
    </div>
    Then you can set any padding to that inner div without effecting the width of the parent.
    Code:
    #sidebar div {
      padding: 1em;
    }

  6. #6
    SitePoint Enthusiast mr.dutch's Avatar
    Join Date
    Oct 2004
    Location
    Kobe, Japan
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That sure helped me out a lot MarkBrown, I can finally continue on re-designing my site!

    Thanks Dan Schulz for thinking about this thread.


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
  •