problems with layers...

big_moe · 08-08-2006 11:38am #1

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

Ph3n0m · 08-08-2006 12:02pm

Screenshot? Code?

Bit hard to solve a problem when we cant see it

seamus · 08-08-2006 12:02pm

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?

big_moe · 08-08-2006 2:39pm

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>

Ph3n0m · 08-08-2006 2:48pm

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

big_moe · 08-08-2006 3:15pm

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.

Ph3n0m · 08-08-2006 3:34pm

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

Ph3n0m · 08-08-2006 3:39pm

try adding this to your stylesheet

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

big_moe · 09-08-2006 8:39pm

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!

Ph3n0m · 10-08-2006 9:05am

pm sent

Ph3n0m · 11-08-2006 9:21am

let me know if thats worked for you

problems with layers...

Comments