Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

problems with layers...

Options
  • 08-08-2006 12:38pm
    #1
    Registered Users Posts: 1,985 ✭✭✭


    im doing a website at the moment and at the top of the page i have a table with the main image as the background and then text over the image. underneath the main image i then have two layers, one on the the left and one on the right. In dreamweaver I have to have these two layers overlapped on the main image to get them to be underneath in Opera and Firefox. But in IE it shows up as overlapped, just as it does in dreamweaver.

    if i line them up so they look "correct" in dreamweaver, they display perfect in IE but in Opera and Firefox there is a gap between the main top image and the two layers underneath.

    any ideas what im doing wrong??

    cheers
    moe


Comments

  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    Screenshot? Code?

    Bit hard to solve a problem when we cant see it


  • Registered Users Posts: 68,317 ✭✭✭✭seamus


    Probably just IE being a bitch. You may have to use CSS for layout instead of tables.

    Can you link us to the problem bit to get a proper look?


  • Registered Users Posts: 1,985 ✭✭✭big_moe


    here is the code for the page and three screenshots: one from dreamweaver, firefox and IE.

    cheers
    moe
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Alliance Electric</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <style type="text/css">
    <!--
    a:link {
    	color: #000000;
    }
    a:visited {
    	color: #000000;
    }
    a:hover {
    	color: #EEEEEE;
    }
    .style1 {
    	font-size: 14px;
    	color: #000000;
    	font-family: "Century Gothic";
    	font-weight: normal;
    }
    .style1bold {
    	font-size: 14px;
    	color: #000000;
    	font-family: "Century Gothic";
    	font-weight: bold;
    }
    -->
    </style></head>
    
    <body>
    <div id="Layer1" style="position:absolute; left:10px; top:90px; width:150px; height:405px; z-index:1; background-image:  url(images/left_bar.gif); layer-background-image:  url(images/left_bar.gif); border: 1px none #000000;">
      <p class="style1bold"><a href="tv.htm">+ TELEVISION</a></p>
      <p class="style1bold"><a href="camcorder.htm">+ CAMCORDER</a></p>
      <p class="style1bold"><a href="digi_cam.htm">+ DIGITAL CAMERA</a></p>
      <p class="style1bold"><a href="dvd.htm">+ DVD</a></p>
      <p class="style1bold"><a href="home_cinema.htm">+ HOME CINEMA</a></p>
      <p class="style1bold"><a href="audio.htm">+ AUDIO</a></p>
      <p class="style1bold"><a href="preowned.htm">+ PRE-OWNED</a></p>
      <p class="style1bold"><a href="specials.htm">+ SPECIALS</a></p>
      <p class="style1"><span class="style1bold"><a href="accessories.htm">+ ACCESSORIES</a> </span> </p>
    </div>
    <div id="Layer2" style="position:absolute; left:14px; top:19px; width:153px; height:14px; z-index:2; font-family: Verdana; font-size: 10px; color: #000000;"><a href="index.htm">HOME</a> | <a href="about.htm">ABOUT</a> | <a href="contact.htm">CONTACT</a></div>
    <div id="Layer3" style="position:absolute; left:590px; top:21px; width:215px; height:31px; z-index:3">
      <form name="form2" method="get" action="search.htm">
        <input name="textfield" type="text">
        <input type="submit" name="Search" value="Search">
      </form>
    </div>
    <div id="Layer4" style="position:absolute; left:167px; top:91px; width:645px; height:404px; z-index:4; font-family: "Century Gothic";" class="style1">
      <div align="justify">Welcome to alliance electric.ie. We stock the full range of consumer and professional products from brands such as Panasonic, Pioneer, Sony, JVC, Canon and many more. If you cannot find what you are looking for on our website, you can contact us by <a href="mailto:shop@allianceelectric.ie">email here</a> or by telephone on 01-4755755. On this part of the website you can find our full range of consumer products. For our professional products please <a href="pro_home.htm" target="_blank">click here.</a></div>
    </div>
    <table width="802" border="0">
      <tr>
        <td width="796" height="80" nowrap background="images/top_bar.gif">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    


  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    1. Why are you using absolute positioning?

    2. Why are you drawing the navigation first - it would be easier if you coded the header in first, then the navigation and then the content area


  • Registered Users Posts: 1,985 ✭✭✭big_moe


    the website is a favour for somebody, so im a bit of a newbie at this..
    1. absolute positioning, cos dreamweaver did it like that.. ok i have changed it to relative positioning, and in dreamweaver i have them looking perfect, but yet again in firefox there is a gap between the top and the nav bar/content box

    2. but i did start with the header, i put that in first then the nav bar at the left and then the content area.


  • Advertisement
  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    without sounding harsh, you really need to sit down and educate yourself about css and divs

    http://www.cssbasics.com/
    http://www.cssbeauty.com/
    http://www.cssplay.co.uk/
    http://www.alistapart.com
    http://www.cssremix.com/
    http://cssvault.com/
    http://www.csszengarden.com/


    In the mean time, post up the images you are using and I will construct a more usuable template - plus stop relying so heavily on Dreamweaver :)


  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    try adding this to your stylesheet

    form {margin:0; padding:0px;}


  • Registered Users Posts: 1,985 ✭✭✭big_moe


    Ph3n0m,

    i added "form {margin:0; padding:0px;} "and that made no noticable difference. here are the two images, a template would be much appreciated!

    as i said, im winging it on this one.. its a favour for somebody! last time i offer to do something!

    cheers for the help everybody
    moe

    ps.. that doesnt sound harsh Ph3n0m, i know i have to learn css and divs! i have started reading through those css tutorials, hopefully i'll get the hang of it someday!


  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    pm sent


  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    let me know if thats worked for you


  • Advertisement
Advertisement