0

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
4
Views
7 Years
Discussion Span
Last Post by ko ko
0

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

0

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?

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.