Hi everyone, i'm currently having an annoying problem with a site i'm working on, i've got it looking and working just fine in Firefox, Safari and Opera, but when i viewed it in Internet Explorer it clearly isn't displaying as i need it.

 

The problem starts with the header, i have a div class holding a simple .gif at the top of the page and what i want is the next div, holding the pages header, to display directly below it, but it is appearing with a massive gap between the two, the same problem carries on down through the page, it is very annoying.

 

Here is a screengrab of the problem:

 

Here is a link to the site: sushikids.co.uk

 

I have checked and validated all the HTML and CSS through the W3C website and it said it's just fine so i don't really know what it is i'm doing wrong.

 

Before i could easily check any site i was working on with my housemates PC, and through trial and error eventually get the problem solved, but he has moved out since then, so now i have to cycle into the city center and view the site on the PC's in the central library, it's not easy going back and forth trying to guess whats wrong but it's keeping me fit!!

 

I thought it might be something to do with the div margins but nothing i do seems to affect it, i've tried creating a special IE.CSS file but again, no luck, i'm not sure what to try next.

 

#header {
	height: 70px;
	padding: 0px;
	}

#header_accross {
	width: 700px;
	height: 100%;
	margin: 0;
	}

/* Site Navigation */
#navigation {
	width: 100%;
	height: 30px;
	}

.site_nav ul {
	font-weight: bold;
	margin: 0;
	padding: 0;
	}

.site_nav ul li {
	float: left;
	list-style-type: none;
	}

.site_nav a {
	display: block;
	background: url(images/navigation-button2.gif) no-repeat top left;
	padding: 0px;
	padding-top: 5px;
	width: 140px;
	height: 30px;
	text-align: center;
	}

.site_nav a:hover {
	background-position: -140px 0px;
	}

.site_nav a.active {
	background-position: -280px 0px;
	}

.site_nav a.active2 {
	color: #f0a2d0;
	}



/* Main Content Boxes */
.cont_700 {width: 700px;}
.cont_700_top {width:700px; height: auto; padding: 10px 0 0 0;}
.cont_700_top_bkg {background: url(images/rounded-top.gif) top no-repeat;}

.cont_700_mid {width: 700px; background:url(images/container-mid.png) repeat-y #f0a2d0;}

.cont_700_bot {width: 700px; height: 10px;}
.cont_700_bot_bkg {background: url(images/rounded-bottom.gif);}

 

Part of the IE.css

#header {
	margin-top: 0px;
	margin-bottom: 0px;
	}

.cont_700 {margin: 0;}
.cont_700_top {margin: 0;}
.cont_700_top_bkg {margin: 0;}

.cont_700_bot {margin: 0;}
.cont_700_bot_bkg {margin: 0;}

 

<!-- ///////////////// START OF HEADER SECTION ////////////////////////// -->
   <div class="cont_700">
   	<div class="cont_700_top cont_700_top_bkg">
       </div><!-- cont_700_top end div -->
   </div><!-- cont_700 end div --><!-- This cont_700 div is used to give the header a rounded top, recycle yo -->

   <div id="header">
   	<div><a href="index.html"><img src="index/images/header02.jpg" alt="sushi love dot co dot uk" /></a></div>
       <div id="navigation">
       	<div class="site_nav">
           	<ul>
           		<li><a href="index.html" class="active active2" title="Home">Home</a></li>
               	<li><a href="#" title="History">History</a></li>
               	<li><a href="#" title="Sushi Types">Sushi Types</a></li>
               	<li><a href="#" title="Making Sushi">Making Sushi</a></li>
               	<li><a href="#" title="Links">Links</a></li>
               </ul>
           </div><!-- site_nav end div -->
       </div><!-- navigation end div -->
   </div><!-- header end div -->
   <!-- ///////////////// END OF HEADER SECTION ////////////////////////// -->

 

 

Cheers for any help.

.cont_700_top is inheriting a font-size of 18px which is causing part of the problem, but you can get around this by specifying height:10px;

 

And you also have some padding on the div. Try changing it to padding:0;

 

There is also a break in the maini body of the page which you can lose by making the image sushi-san.jpg display:block;

Hey thanks for your reply, it really helped me.

 

I figured out why i could not see the navigation bar after some trial and error, i'd set the height of the header to 70px, it's now at 135px and looks so much better for it.

 

I do have a question, how did you figure out the .cont_700_top is inheriting a font-size of 18px? i would like to know so i can make sure i don't make a mistake like this again.

 

I cycled back and forth from the library a few times today, my legs are killing me! but i did manage to get a lot done, and think the site is looking a lot better for it, i changed a couple more things since i returned home but i won't be able to check them till tomorrow, as far as i'm aware though i only need to sort out the footer section.

 

Thanks again, i owe you a beer.

The header's looking good, but there's still a problem in the content section and the footer in IE. Both have similar causes to the header problem, so it shouldn't be too hard for you to track them down.

 

Google 'Firebug' - it's an add-on for Firefox that lets you view/edit the code on any page as you're viewing it. It also displays the CSS inheritance.

 

There's a similar extension for IE, but not as good - search for 'IE Developer Toolbar'.

 

You might also look at the 'Web Developer' add-on for Firefox.

 

All useful tools to check out why things aren't how you expected them to be.

Right, think i've finally got the main content looking as it should, the footer is still giving me a little grief but i figure if i mess around with the margins or the padding (or just create a new class for the ie.css stylesheet) i should be alright.

 

Cheers for the heads up about Firebug, i already use the Web Developer add on for Firefox, but editing pages on the fly? that sounds fantastic!

 

I can't install any software on the library computers sadly, so i won't be able to try out the IE Developer Toolbar, but i am thinking of picking up a copy of Code Weavers Crossover for mac, it will let me run windows programs without the need for an expensive Windows OS license, hopefully then i won't be making multiple trips into city just to test my damn site! haha

 

Cheers again.