Click to See Complete Forum and Search --> : banner will not position properly in IE


smoker
12-17-2006, 07:50 AM
I have a banner that displays out of line in IE. It is fine in Firefox. Could anyone suggest how I can get it to display properly in both ?

you can see the page in question at http://www.raysloan.com/pipemaking.html

the relevant divs are #top and #banner

Thanks for any help.

smoker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="3oTIDRi+9HXOeVvEYcMebPecXm38rUlY03Tzq0fMxos=" />
<meta name="Description" content="MAKER of Irish,UILLEANN Pipes,Scottish Smallpipes" />
<meta name="Keywords" content="Uilleann Pipes,Scottish Smallpipes,IRISH PIPES,SMALLPIPES,Sound Samples of Irish UILLEANN Pipes" />
<meta name="author" content="Ray Sloan" />
<title>Pipemaking Holidays in France</title>
<link href="pipemaking.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="return"><a href="index.html">Return to Main Menu</a></div>
<div id="banner"><img src="img/Image2.jpg" alt="picture of Sauveterre de Bearn - France"/><img src="img/Image3.jpg" alt="picture of canoeing on the Gave D'Oloron Sauveterre de Bearn - France" /><img src="img/Image1.jpg" alt="picture of Gave D'Oloron Sauveterre de Bearn - France" /><img src="img/christeve.jpg" alt="picture of pipemaking" class="helpers" /></div>
<div id="top">
<h1>Pipemaking Holidays in the SW of France</h1><h2>Enjoy a week in the beautiful 'Bearn des Garves' in the SW of France,
in sight of the Pyrenees and making your own set of pipes!
<p>Personal Tuition by Ray Sloan.</p></h2>
</div>
<div id="content"><img src="img/ray.jpg" alt="Picture of Ray Sloan playing Irish Uilleann Pipes"/>
Spend a wonderful week here in the South West of France in sight of the Pyreness,
the Pays Basque and surrounded by the mountain streams of this region called
the 'Bearn Des Garves'.
<p>You will leave here with a fully playing practice set of Uilleann pipes which
would not have cost you very much more than a purchased set. In addition you
will enjoy the fulfillment of having made them yourself under my expert guidance,
you will not have had to wait for the usual 1 year delivery, and into the
bargain you will have had a wonderful weeks holiday here in France!</p>
<p>If you are interested in the Uilleann Pipes and do not want to make a practice
set perhaps you would prefer to make a couple of flat set chanters and do
reedmaking? If you have something you would like to do I can tailor a course
to suit you. If it is Scottish Smallpipes that you are interested in then
you will leave with a fully playing set of Smallpipes in your preferred pitch.</p>
<p>We are easy to get to and I will pick you up from the Airport. We are mid-way
between the two Airports of PAU and BIARRITZ both of which are serviced by
Ryanair</p>
<p>For full details please contact me either by telephone: 0033(0)559386816
or email:
<p><a href="mailto:ray.sloan@wanadoo.fr">Contact me for more information</a></p>
</div>
</body>
</html>


CSS

body {
background:#D5D0BA;
font-family: Arial, Helvetica, sans-serif;
}

#return {
margin-top:50px;
text-align: center;
}
#return a{
text-decoration: none;
color: maroon;
}

#return a:hover{
background-color: #D5CCA3;
border: solid 1px;
padding: 5px;
}

#top {
margin-top: 30px;
background-image: url("img/terrain5.jpg");
background-repeat: no-repeat;
width: 800px;
height: 540px;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
border: solid 1px;
color:green;
}

#banner {
position: absolute;
margin-left: 115px;
margin-top: 50px;
}

#banner .helpers{
margin-left: 678px;
}

#top h1 {
margin-top: 130px;
font-size: 1.5em;
margin-left: 190px;
padding: 0px;
}

#top h2 {
font-size: 0.7em;
color: #656F43;
width: 460px;
margin-left: 190px;
}

#content {
Position: relative;
font-size: 0.9em;
color:#A57E5F;
margin-left: 90px;
margin-right: 90px;
padding-top: 10px;
}


#content img{
float:left;
margin-right: 20px;
padding-right: 20px;
border-right: solid 1px;
}

Fang
12-17-2006, 08:12 AM
Did not display correctly in either browser???
#top {
position:relative;
.
.

#banner {
position:absolute;
top:0;
right:0;
}

<div id="top">
<div id="banner"><img src="pipemaking_files/Image2.jpg" alt="picture of Sauveterre de Bearn - France"><img src="pipemaking_files/Image3.jpg" alt="picture of canoeing on the Gave D'Oloron Sauveterre de Bearn - France"><img src="img/Image1.jpg" alt="picture of Gave D'Oloron Sauveterre de Bearn - France"><img src="img/christeve.jpg" alt="picture of pipemaking" class="helpers"></div>
<h1>Pipemaking Holidays in the SW of France</h1><h2>Enjoy a week in the beautiful 'Bearn des Garves' in the SW of France,
in sight of the Pyrenees and making your own set of pipes!
<p>Personal Tuition by Ray Sloan.</p></h2>
</div>

smoker
12-17-2006, 10:18 AM
Hi Fang,

Thanks for your reply.

I am not usre of what version FF I have but it displays as it should there. What version FF did you use ?

smoker

Fang
12-17-2006, 10:21 AM
1.5