No replies
gxkendall
Offline
newbie
University of Nottingham
Last seen: 9 years 25 weeks ago
University of Nottingham
Joined: 2009-08-25
Posts: 1
Points: 0

Hi

Fairly new to CSS. Have looked at the forum - but can't find the answer. I have also checked my CSS on the W3C CSS Validation service (no errors).

I have the CSS/HTML shown at the end of this post.

You can also see it at

http://www.researchandpractise.com/eg1.html

when I render this in IE7, it does what I want (i.e. I get two "blocks" with what will be a menu holder underneath it).

If I use Firefox (vers 3.01), I get a right mess :blushing:.The two blocks are separated by "white space" and the "menu bar" is at the top of the screen (and on top of the two blocks).

I played around with moving the "menu bar" with a "top" - it does move it, but on both browsers, which is not what I want.

Any ideas?

Cheers

G

/* CSS */
/* === */
 
 
/* Outline Container */
 
#container {
	width:        800px;
	/*border:       5px solid #fff;*/
	margin-left:  auto;
	margin-right: auto;
	/*padding:      10px;*/
	color:        #666;
	background:   #CCCCCC;
}
 
/* Two top banners */ 
#headimage {
	float:         left;
	width:         310px;
	height:        160px;
	padding:       0;
	/*margin-bottom: 15px;*/
	color:         #666;
	background:    inherit;
}
#headtext {
	float:      right;
	width:      400px;
	height:     160px;
	padding:    0;
	/*margin-bottom: 15px;*/
	color:      #666;
	background: inherit;
}
 
/* Horizontial Menu Bar */
#menu_container{
	position:relative;
	width: 800px;
	height: 32px;
	background:#336699 url(../images/menubar.gif) top repeat-x;
}
 
 
/*Classes */
 
.companyname {
	font-size:  180%;
	margin:     0 0 10px 0;
	color:#663333;
	background: inherit;
}
 
.clear{
	clear:both;
	height:1px;
	overflow:hidden;
}
 
 
/* HTML */
/* ==== */
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<title>Research and Practise: Everything in one place</title>
    <link rel="address bar icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon"/>
 
	<meta name="Description" content="Research and Practise is a web site that aims to brings all the information for researchers and practioners in one place. The we site will concentrate on different domains, aiming to provide as complete coverage as possible." />
	<meta name="Keywords" content="Research, Practise, Vehicle Routing" />
	<meta name="Distribution" content="Global" />
	<meta name="Author" content="Wenday Kendall" />
	<meta name="Robots" content="index,follow" />
 
	<!-- <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css" /> -->
	<link rel="stylesheet" href="css/style1.css" media="screen" type="text/css" />
	<!-- <link rel="stylesheet" href="../css/print.css" media="print" type="text/css" /> -->
 
</head>
 
 
<body>
 
<div id = "container">
 
	<div id="headimage">
	</div> <!-- headimage -->
 
	<div id="headtext">
	</div> <!-- headtext -->
 
<div id="menu_container">
</div> <!-- /menu_container -->
 
 
 
 
 
 
</div> <!-- container -->
 
</body>
</html>