pictures not positioning properly in IE

webdiv · 12-17-2006, 12:43 PM

Hi,

Guess what, another positioning problem in IE

Could anyone suggest how I can get my banner to display properly in IE ? It is displaying as it should in Firefox but if you look at it in IE it is positioning off to the right.

you can see this at: http://www.raysloan.com/pipemaking.html

Thanks for any help.

webdiv

code follows:

Code:

 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;
}

markup:

Code:

<!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>

Arbitrator · 12-17-2006, 02:51 PM

When you report a browser‐specific problem, you should also give the version of the browser that’s causing the problem. In other words, do you refer to Internet Explorer 6, 7, some other version, or all of them? I chose to view your document only in the latest version.

Concerning your problem, it hardly looks right to me in Firefox 2 either. I’m inferring that because the banner images are overlapping the text. On further review, this is because my resolution is 1280×1024 but you’ve designed the document to only display properly in one resolution: 1024×768.

As for a solution, I would probably simply change the method used to display those banner images. I would nest the #banner element inside the #top element and set those presentational banner images as CSS backgrounds of the #banner element. Of course, each element can only have one background image assigned to it, so you would need to nest an additional div for each background image unless you combined them all into one image with transparency. To position those background images to the desired locations, you would simply use the background-position property.

Also, your XHTML contains errors. Header elements cannot contain paragraph elements. Additionally, all elements must be closed in XHTML; there’s an unclosed paragraph element.

webdiv · 12-17-2006, 03:15 PM

Hi Arbitrator,

Thank you very much for your advice.

The validation errors I can take care off, a bit of sloppiness on my part.

I am curious about the screen resolution issue, this is something it seems I am missing. I have not consciously designed the document for any specific resolution. Do you have any advice on what 'normal' practice would be for this, and how do you know what screen resolution my page is designed for, how do I design for something different - I don't know where or how to control this aspect of my design ??

IE I have is 6 and I am not sure of the Firefox version. I will try your suggestions for a different approach.

I appreciate your advice.

Thanks

webdiv

Arbitrator · 12-17-2006, 04:08 PM

Quote:

Originally Posted by webdiv

I am curious about the screen resolution issue, this is something it seems I am missing. I have not consciously designed the document for any specific resolution. Do you have any advice on what 'normal' practice would be for this, and how do you know what screen resolution my page is designed for, how do I design for something different - I don't know where or how to control this aspect of my design ??

The issue is caused by your use of absolute positioning on the #banner element. Because it is absolutely positioned, it will always remain the same distance from the top and left of the viewport, no matter what the resolution or size of the window. I can tell what resolution you designed for because it only lines up correctly with the panoramic image below it at that resolution. I can tell that I’m looking at an exactly 1024×768 resolution by using Firefox’s Web Developer Extension or Internet Explorer’s Developer Toolbar to resize my browser windows to exactly that resolution.

As for controlling that aspect of your design, it becomes a non‐issue if you follow my suggestion of nesting #banner inside #top and shifting those images from an img element to the CSS background-image property. In that case, you no longer require absolute positioning and you have the bonus of using code that’s more semantically accurate.

webdiv · 12-18-2006, 11:33 AM

Hi Arbitrator,

Thanks again for your advice.

I followed your advice and tried a couple of things. It is now rendering fine in both IE and FF. I actually took out the #banner div completely so incorporating the banner images in #top and it all lines up fine now.

http://www.raysloan.com/pipemaking.html

thanks again.

webdiv

ahallicks · 12-18-2006, 02:18 PM

Just had a look and noticed that you have set a percentage as your width for the content section of the page, but have a set width for the header. Now at my resolution the content section is a lot longer than the header and it looks a bit odd. If I were you I'd set a specific width for your content section that is the same as that of your header, just to line everything up in all resolutions