help with XHTML/css and divs

aburrows182 · #1 (**permalink**) 04-05-07, 11:31 AM

Hi I did my first part of the design in photoshop and sliced it all up.

Then started to code the whole site use css and div tags.

It went ok and then I noticed in IE and firefox one of the divs is not in its correct position at all.

I normally use PSPAD but opted for dreamweaver so i could see as I changed stuff.

The website is at http://www.mvyv.co.uk/beta/index.html

the code for it is:

HTML Code:

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

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <title>Mole Valley Youth Voice</title>
    <style type="text/css" media="screen">
@import "style.css";
@import "main_nav.css";
</style>
  </head>
<body>
<!-- HEADER -->
<div id="header_container">
		<div id="date"><div id="date_header">Todays Date:<br />
		  Junior Youth Voice Website</div>
		</div>
		<div id="head_pt1"></div>
	<div id="head_pt2"></div>
	<div id="next_event">2165195191</div>
	<div id="head_pt3"></div>
	<div id="navcontainer">
	<ul>
	<li><a href="">Home</a></li>
	<li><a href="">About</a></li>
	<li><a href="">Meetings</a></li>
	<li><a href="">Events</a></li>
	<li><a href="">Media</a></li>
	<li><a href="">Funding</a></li>
	<li><a href="">Forum</a></li>
	<li><a href="">Contact</a></li>
	</ul>

	</div>	
	<div id="end_corner"></div>
	<div id="main_body"></div>
	
</div>
<!-- HEADER END -->
</body>
</html>

the main css is

css Code:

body{margin:0; background-image: url(bg.jpg); }
 
/*HEADER LEFT SIDE */
 
#header_container
{
margin: 0;
padding: 0;
}
#head_pt1
{
margin: 0;
background-image:url(images/header_01.jpg);
background-repeat:no-repeat;
height: 44px;
width: 677px;
}
 
#head_pt2
{
margin: 0;
background-image: url(images/header_04.jpg);
width: 677px;
height: 79px;
}
#head_pt3
{
margin: 0;
background-image: url(images/header_07.jpg);
width: 500px;
height: 4px;
}
#end_corner
{
margin: 0;
float:left;
background-image:url(images/nav_end_11.jpg);
width: 64px;
height: 29px;
}
/* RIGHT SIDE */
 
#date
{
float: right;
position: static;
width: 183px;
height: 44px;
background-image:url(images/header_03.jpg);
background-repeat: no-repeat;
}
#date_header
{
margin:0;
font-family: tahoma;
font-size: .6em;
text-align: right;
padding-right: 2px;
}
#next_event
{
 
float: right;
width: 155px;
height: 112px;
background-image:url(images/header_06.jpg);
background-repeat: no-repeat;
}
/* MAIN BODY */
#main_body
{
margin: 0;
}

if any one can help its the #next_event id thats playing up and #end_corner

. If anyone could help me with this, that would be great as I'm trying to learn this new style compared to other methods.

best regards

alex