Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts

    pictures not positioning properly in IE

    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>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by webdiv View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •