SitePoint.com

mr.dutch · Nov 28, 2006, 06:00

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--------------------------- */

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode