HTML - Please - Need Some Help Getting Header Positioned

Hi,

I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc).

Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck.

CSS code:

Code:

/*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/

body
{
	background: #000000;
	color: white;
}	
	
div#site
{
	display: block;
	color: #000000;
	margin-top: -10px;

}

/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */

#header
{
	background: url(images/header2.gif);
	width: 865px;
	height: 143px;
	
}	

/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/

#header .text
{
	position:relative;
	top:42px;
	left:322px;
	
	word-spacing: 24px;
	font-size: large;
}

/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/

div#navbar2 {

    width: 70%;

    border-top: solid #000 0px;

    border-bottom: solid #000 0px;

	background-image: url(images/button.gif);
}

div#navbar2 ul {

   margin: 0px;

   padding: 0px;

   font-family: Arial, Helvetica, sans-serif;

   font-size: 12px;

   color: #FFFFFF;

   line-height: 30px;

   white-space: nowrap;

}

div#navbar2 li {

   list-style-type: none;

   display: inline;

}

/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/

div#navbar2 li a {

   text-decoration: none;

   margin: 20px;
   
   padding: 7px 15px;

   color: #FFFFFF;

}



div#navbar2 li a:visited {

   color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/

}

div#navbar2 li a:hover {

   font-weight: bold;
   
   color: #FFFFFF;

   background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/

}

/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/

#content
{
	background: url(images/content.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

#content_nobars
{
	background: url(images/content_nobars.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/

#content .title
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:215px;
	width:500px;
    height:18px;
	overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
					 /*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}

#content .text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 255px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title2
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:375px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text2
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 415px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title3
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:541px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text3
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 580px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .read_more
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 168px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more2
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 318px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more3
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 468px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content_nobars .about_us_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 425px;
	width:550px;
	height:250px;	
	overflow:auto;
}

#content_nobars .other_title
{
	color: #000000;
	font-size:24px;
	text-decoration:underline;
	position:absolute;
    text-align:center;
	left:510px;
	top:200px;
	width:500px;
    height:30px;
	overflow:hidden; 	
}

#content_nobars .other_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 250px;
	width:550px;
	height:432px;	
	overflow:auto;
}

#content_nobars .about_us_picture
{
	background: url(images/1.jpg);
	width: 290px;
	height: 175px;
	position:relative;
	left:130px;
	top:50px;
}

/*The footer code defines the location of the footer image, and the size of it.*/

#footer
{
	background: url(images/footer.gif);
	width: 870px;
	height: 105px;
}

/*These 2 commands keep URL links coloured black, before and after they have been visited.*/

a:link { color:black }
a:visited { color:black }

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file
which will be used to create the layout and look of the website.-->

<head>

<title>Pampered Pooches Grooming</title>

<link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css">

</head>

<!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.-->

<body>

<div id="site">

	<div id="header">
	
	</div>
	
	<div id="navbar2">
		
	<ul>

<!--This code creates a list of the navigational links to other pages of the website-->	
	
	<li><a href="index.html">Home</a></li>

	<li><a href="aboutus.html ">About Us</a></li>

	<li><a href="services.html ">Services</a></li>
	
	<li><a href="theparlour.html ">The Parlour</a></li>
	
	<li><a href="dogofthemonth.html ">Dog of the Month</a></li>
	
	<li><a href="contactus.html ">Contact Us</a></li>

	</ul>
	
	</div>
	
	<div id="content">


<!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.-->
	
	<div id="footer">
	</div>
	

	

</div>

</body>

</html>

Thanks for any help.

Thanks guys for your help with earlier problem. I have another site, with another problem that if you could help me with I will be so happy!

http://www.debmehrtens.site90.com/

For some reason, I can not seem to reposition the menu drop down boxes to sit under the menu bar. I've tried all sorts of things and they just don't seem to move.

The code I have used is -
<div class="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="active">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">CLUB INFO</a>
<ul>
<li><a href="#">Membership</a></li>
<li><a href="#">Officers</a></li>
<li><a href="history.html" title="MSLSC History">History</a></li>
<li><a href="#">Life Members</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">LIFESAVING</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Patrol Times</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Roster</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Training Calendar</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">NIPPERS</a>
<ul>
<li><a href="#">General Info</a></li>
<li><a href="#">Child Protection</a></li>
<li><a href="#">Contact Details</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Handbook</a></li>
<li><a href="#">Nipper Calendar</a></li>
<li><a href="#">Carnival Calendar</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">SURFSPORTS</a>
<ul>
<li><a href="#">Carnival Calendar</a></li>
</ul>
</li>
<li><a href="#">FORMS</a></li>
<li><a href="MARCOOLA SURF LIFE SAVING GALLERY/index.html">GALLERY</a></li>
<li><a href="contact.html" title="Contact Us">CONTACT US</a></li>
</ul>
</div>
<div class="clr"></div>
<div class="clr"></div>
</div>

I don't intend to leave the background transparent, was just trying something different, but if anyone can help get the positioning right for the drop downs, that would be fantastic! Thanks

I have a painting company and just recently took on the task of learning a little web design in order to try creating my own site. I initially thought I could just learn a little html and be off and working. After months and months of free time I'm still having trouble with something that to me should be basic... it probably is... the positioning of my elements.

I've completed the home page and have trouble with the position of nearly all my elements changing when the browser window is resized. The function of my page is dependent on these elements staying put. There are a couple elements that do stay put when the window is resized, which really throws me for a loop because as far as I can tell they are all positioned the same (css absolute). I designed the site using mozilla firefox, and this positioning problem seems so particular that even when another tab is opened the position of elements change (certain images). I don't see this happening in any other sites similar to mine, and is really nerve racking.

Feel free to take a look at the code. To see the problem just resize the window to anything other than maximized. Making it even smaller will accentuate the problematic effects. Any suggestions are welcome, not on just the said problem, but anything about the site in general. The link is jduffpainting.com

Thanks, and I hope this isn't something for the css forum!

Hi!
On a page I'm trying to accomplish the following:

A border with a static width surrounding positioned elements (divs).
Each element can vary in height and holds text, tables, images, etc.

Problem:
Is there any way to dynamically adjust the border height to the content?
I don't want to use scripting.

I have tried using a div with auto height, but it does not adjust to inner divs.
I have tried using a table cell containing divs, breaks as soon as divs are positioned.

Please help!

See simplified example below.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HTML</title>
<style>
.borderdiv{
position:relative;
width:628px;
margin-left: auto;
margin-right: auto;
background-color:white;
height:300px;
border-color:#CA3182;
border-style:solid;
border-width:1px;
background-color:#EDFBFD;
}

.pinkdiv{
position:absolute;
width:628px;
height:64px;
border:none;
background-color:#F8D7DA;
}

.div1{
position:absolute;
width:292px;
height:29px;
top:24px;
left:10px;
border-width: 1px;
border-style: solid;
}

.div2{
position:absolute;
width:200px;
height:49px;
top:10px;
right:11px;
text-align:right;
border-width: 1px;
border-style: solid;
}

.div3{
position:absolute;
width:193px;
height:200px;
top:175px;
right:23px;
background-color:#EDFBFD;
border-width: 1px;
border-style: solid;
}

</style>
</head>

<body>
<div class="borderdiv">
<div class="pinkdiv"></div>
<div class="div1">div1</div>
<div class="div2">div2</div>

<div class="div3">
<table border="1">
<tr>
<td><strong>Table</strong></td>
<td><b>Dynamic text.</b><br>Amount of text may change here.<br><br>Pink outer border (borderdiv) should adjust to the content in this table!!!</td>
</tr>
</table>
div3
</div>

</div>
</body>
</html>

Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same.

the address is www.themonsterbox.com

thanks in advance for any help.