Member Avatar for san_fran_crisko

Hi folks,

I'm currently designing a website for myself. It's been going OK so far but there's been one, quite annoying problem holding things up. I've found so many people with this problem and a lot of solutions but none have worked for me (and about 60-70% of people who started threads on these forums usually find the suggestions don't work for them either).

The issue is white space between DIVs. Firefox is fine, but IE8 is placing a white space between my "header" and "topmenu" DIVs. The ultimate plan is to have a consistent background image with no breaks between these two DIVs, then place some nice web 2.0-style buttons on the "topmenu" DIV with mouseover changes etc...

Here's the main index.html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<HEAD>
	<script type="text/javascript" src="jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<!--[if lt IE 8]>
  	<link rel="stylesheet" type="text/css" href="css/IE8.css" />
	<![endif]-->

</HEAD>
<TITLE>My website</TITLE>
<BODY>

<!--Header DIV-->

    <script type="text/javascript">

    if(jQuery){
		jQuery("body").addClass("header_script_true");
	}; 
	
	$(document).ready(function(){
  		$(".header").fadeIn(1500, topmenu_SlideDown)
	});
		
	</script>
	
	<div class="header">
		<table>
  			<tr>
			<img src="images/header.jpg">
  			</tr>
		</table>
	</div>
	
<!--Top Menu DIV-->

	<script type="text/javascript">

    if(jQuery){
		jQuery("body").addClass("topmenu_script_true");
	}; 
	
	function topmenu_SlideDown(){
  		$(".topmenu").slideDown(500)
	};
	 
		
	</script>
	
	<div class="topmenu">
		<table>
			<tr> 
			<img src="images/header.jpg">
			</tr>
		</table>
	</div>
	
<!--Main Content DIV-->

<div id="main">
	<table>
		<tr> 
			<td>
			Testing, testing - hello world!</br>
			Testing, testing - hello world!</br>
			Testing, testing - hello world!</br>
			</td>
		</tr>
	</table>
</div>

</BODY>
</HTML>

...and here's the IE8 CSS code. As you can see, I've tried many things such as stating padding, margin and border to "0" in both the DIVs and main body. I've even tried using -10px these too but to no avail. I've also tried putting in "display: block" and this does not work either.

body {
background-image:url('images/background.png') no-repeat; 
text-align:center; 
padding: 0 0 0 0; 
border: 0 0 0 0; 
margin: 0 auto;
}

.header {
width: 960px; 
height: 220px; 
overflow: hidden; 
border: 0 0 0 0; 
display: inline; 
line-height: 0 0 0 0; 
padding: 0 0 0 0; 
margin: 0 auto;}

.header_script_true .header{
display:none;
}

.topmenu {
width: 960px; 
height: 220px; 
overflow: hidden; 
border: 0 0 0 0; 
display: inline; 
line-height: 0 0 0 0; 
padding: 0 0 0 0; 
margin: 0 auto;
}

.topmenu_script_true .topmenu {
display:none;
}

#main {
width: 960px; 
margin: 0 auto; 
text-align: left;
}

Any help would be greatly appreciated!

Thanks in advance,

Crisko.

  • 2 Contributors
  • 3 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for ko ko

If you want to appear 'header' and 'topmenu' next to each, you can use 'float' to each. 'display:inline' was not good to use.

Member Avatar for san_fran_crisko

If you want to appear 'header' and 'topmenu' next to each, you can use 'float' to each. 'display:inline' was not good to use.

Float only allows "left", "right" or "none" - neither of which resolves the issue. Is there anything I'm missing?

Member Avatar for ko ko

Did you want to appear these two divs next to each(line by line)? I thought that because you used 'display:inline' property to both divs. Float can get these effect too. Sorry that I maybe misunderstood your question.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.