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 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS banner DIV and images display error in IE 6

    Hi,
    Ive started using CSS and im trying to implement it into a new site im building.
    I'm having a problem with image alignment in IE 6 but it appears fine in firefox 1.0.4.
    Im using dreamweaver and i have created a CSS that i attach to my pages. Within this CSS i have a banner div and i have set the background image to be a slice of the main banner image in order that it flows all the way to the right of my page. The main banner image i have placed in a layer over the top of the banner div. Deep down i know that this is probably the wrong way to go about things but i cant see how i can get more than one image inside this div without starting to create layout cells within in.
    Here is the CSS
    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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />	<style type="text/css">
    		#container {
    			width: 760px;
    			\width: 780px;
    			w\idth: 760px;
    			border: 1px solid gray;
    			margin: 10px;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 10px;
    		}
    
    		#banner {
    	padding: 0px;
    	margin-bottom: 5px;
    	margin-top: 0px;
    	background-color: rgb(213, 219, 225);
    	background-image: url(titlespacer.jpg);
    	background-repeat: repeat-x;
    	background-position: top;
    	height: 90px;
    	float: top;
    	margin: 0;
    	margin-right: 0px;
    	margin-left: 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	position: static;
    	z-index: auto;
    	overflow: auto;
    		}
    
    		#content {
    	padding: 5px;
    	margin-left: 215px;
    	margin-right: 215px;
    	background-color: rgb(213, 219, 225);
    	background-image: url(../images/midtopleft.jpg);
    	background-repeat: no-repeat;
    		}
    
    		#topimage {
    			padding: 5px;
    			margin-left: 215px;
    			margin-right: 215px;
    			background-color: rgb(213, 219, 225);
    		}
    		#sidebar-a {
    			float: left;
    			width: 200px;
    			\width: 210px;
    			w\idth: 200px;
    			margin: 0;
    			margin-right: 5px;
    			padding: 5px;
    			background-color: #FFFFFF;
    		}
    
    		#sidebar-b {
    			float: right;
    			width: 200px;
    			\width: 210px;
    			w\idth: 200px;
    			margin: 0;
    			margin-left: 5px;
    			padding: 5px;
    			background-color: rgb(235, 235, 235);
    		}
    
    		#footer {
    			clear: both;
    			padding: 5px;
    			margin-top: 5px;
    			
    			background-color: rgb(213, 219, 225);
    		}
    #H1  { color: #5e89ae; font-size: x-large; font-weight: bold }
    And the Html code
    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=iso-8859-1" />
    <title>Welcome to surviving Chesterfield</title>
    <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);
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_nbGroup(event, grpName) { //v6.0
      var i,img,nbArr,args=MM_nbGroup.arguments;
      if (event == "init" && args.length > 2) {
        if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
          img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
          if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
          nbArr[nbArr.length] = img;
          for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = img.MM_dn = args[i+1];
            nbArr[nbArr.length] = img;
        } }
      } else if (event == "over") {
        document.MM_nbOver = nbArr = new Array();
        for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
          nbArr[nbArr.length] = img;
        }
      } else if (event == "out" ) {
        for (i=0; i < document.MM_nbOver.length; i++) {
          img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
      } else if (event == "down") {
        nbArr = document[grpName];
        if (nbArr)
          for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
        document[grpName] = nbArr = new Array();
        for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
          nbArr[nbArr.length] = img;
      } }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    @import url("3cl.css");
    .head1 {text-align: top;}
    .style1 {font-size: 12px}
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    -->
    </style>
    </head>
    
    
    <body onload="MM_preloadImages('../images/fw/leftnav_r2_c2_f3.gif','../images/fw/leftnav_r2_c2_f2.gif','../images/fw/leftnav_r2_c2_f4.gif','../images/fw/leftnav_r4_c2_f3.gif','../images/fw/leftnav_r4_c2_f2.gif','../images/fw/leftnav_r4_c2_f4.gif','../images/fw/leftnav_r6_c3_f3.gif','../images/fw/leftnav_r6_c3_f2.gif','../images/fw/leftnav_r6_c3_f4.gif','../images/fw/leftnav_r8_c3_f3.gif','../images/fw/leftnav_r8_c3_f2.gif','../images/fw/leftnav_r8_c3_f4.gif')">
    <div id="Layer2" style="position:absolute; left:-13px; top:1px; width:612px; height:70px; z-index:2"><img src="sc3tit.jpg" width="750" height="90" /></div>
    <div id="container">
    		<div id="banner">&nbsp;</div>
    
    		<div id="sidebar-a">
    		  <table border="0" cellpadding="0" cellspacing="0" width="200">
                <!-- fwtable fwsrc="leftnav.png" fwbase="leftnav.gif" fwstyle="Dreamweaver" fwdocid = "1826883226" fwnested="0" -->
                <tr>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="44" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="42" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="37" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="22" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="53" height="1" border="0" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
                </tr>
                <tr>
                  <td colspan="7"><img name="leftnav_r1_c1" src="../images/fw/leftnav_r1_c1.gif" width="200" height="84" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="84" border="0" /></td>
                </tr>
                <tr>
                  <td rowspan="8"><img name="leftnav_r2_c1" src="../images/fw/leftnav_r2_c1.gif" width="44" height="296" border="0" alt="" /></td>
                  <td colspan="5"><a href="../about.htm" target="_top" onclick="MM_nbGroup('down','navbar1','leftnav_r2_c2','../images/fw/leftnav_r2_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','leftnav_r2_c2','../images/fw/leftnav_r2_c2_f2.gif','../images/fw/leftnav_r2_c2_f4.gif',1)" onmouseout="MM_nbGroup('out');"><img name="leftnav_r2_c2" src="../images/fw/leftnav_r2_c2.gif" width="103" height="12" border="0" alt="About this site " /></a></td>
                  <td rowspan="8"><img name="leftnav_r2_c7" src="../images/fw/leftnav_r2_c7.gif" width="53" height="296" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="12" border="0" /></td>
                </tr>
                <tr>
                  <td colspan="5"><img name="leftnav_r3_c2" src="../images/fw/leftnav_r3_c2.gif" width="103" height="29" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="29" border="0" /></td>
                </tr>
                <tr>
                  <td colspan="4"><a href="../ta.htm" target="_top" onclick="MM_nbGroup('down','navbar1','leftnav_r4_c2','../images/fw/leftnav_r4_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','leftnav_r4_c2','../images/fw/leftnav_r4_c2_f2.gif','../images/fw/leftnav_r4_c2_f4.gif',1)" onmouseout="MM_nbGroup('out');"><img name="leftnav_r4_c2" src="../images/fw/leftnav_r4_c2.gif" width="81" height="11" border="0" alt="tourist area" /></a></td>
                  <td rowspan="6"><img name="leftnav_r4_c6" src="../images/fw/leftnav_r4_c6.gif" width="22" height="255" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="11" border="0" /></td>
                </tr>
                <tr>
                  <td colspan="4"><img name="leftnav_r5_c2" src="../images/fw/leftnav_r5_c2.gif" width="81" height="29" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="29" border="0" /></td>
                </tr>
                <tr>
                  <td rowspan="4"><img name="leftnav_r6_c2" src="../images/fw/leftnav_r6_c2.gif" width="1" height="215" border="0" alt="" /></td>
                  <td colspan="2"><a href="../ia.htm" target="_top" onclick="MM_nbGroup('down','navbar1','leftnav_r6_c3','../images/fw/leftnav_r6_c3_f3.gif',1)" onmouseover="MM_nbGroup('over','leftnav_r6_c3','../images/fw/leftnav_r6_c3_f2.gif','../images/fw/leftnav_r6_c3_f4.gif',1)" onmouseout="MM_nbGroup('out');"><img name="leftnav_r6_c3" src="../images/fw/leftnav_r6_c3.gif" width="79" height="11" border="0" alt="Inmate area" /></a></td>
                  <td rowspan="4"><img name="leftnav_r6_c5" src="../images/fw/leftnav_r6_c5.gif" width="1" height="215" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="11" border="0" /></td>
                </tr>
                <tr>
                  <td colspan="2"><img name="leftnav_r7_c3" src="../images/fw/leftnav_r7_c3.gif" width="79" height="29" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="29" border="0" /></td>
                </tr>
                <tr>
                  <td><a href="../forum/index.php" target="_top" onclick="MM_nbGroup('down','navbar1','leftnav_r8_c3','../images/fw/leftnav_r8_c3_f3.gif',1)" onmouseover="MM_nbGroup('over','leftnav_r8_c3','../images/fw/leftnav_r8_c3_f2.gif','../images/fw/leftnav_r8_c3_f4.gif',1)" onmouseout="MM_nbGroup('out');"><img name="leftnav_r8_c3" src="../images/fw/leftnav_r8_c3.gif" width="42" height="11" border="0" alt="Forum" /></a></td>
                  <td rowspan="2"><img name="leftnav_r8_c4" src="../images/fw/leftnav_r8_c4.gif" width="37" height="175" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="11" border="0" /></td>
                </tr>
                <tr>
                  <td><img name="leftnav_r9_c3" src="../images/fw/leftnav_r9_c3.gif" width="42" height="164" border="0" alt="" /></td>
                  <td><img src="../images/fw/spacer.gif" alt="" name="undefined_2" width="1" height="164" border="0" /></td>
                </tr>
              </table>
    </div>
    
    		<div id="sidebar-b">&nbsp;&nbsp;<img src="../images/rightnav1.png" width="200" height="300" /></div>
    
    <div id="content">
      <h1 align="left">Welcome to Surviving Chesterfield</h1>
      <p align="justify">The alternative tourist guide to Chesterfield is about to arrive. We aim to provide the average tourist the necessary knowledge needed for surviving chesterfield. Maybe you will be heading out in and around Derbyshire's beautiful peak district... maybe you will decide to view Chesterfields crowning glory. The oddest of beacons, seen from miles away and guiding you into the heart of Chesterfield. The <em>&quot;infamous&quot;</em> Crooked Spire. Truly the most apt' and accurate symbol ever, this listing spire is nothing more than a testament to bad workmanship. The more fey would tell tales of the purist bride that ever lived and the weight of a curious Devil, compelled to spectate on her wedding day; twisting the spire to better see the event from his perch. Those of us with a keener sense of survival or perhaps an eye for woodwork would exclaim &quot;Honey, that doesn't look safe. Lets get the kids clear of the area and cancel our reservations at the B&amp;B&quot;</p>
      <p align="justify">This site isn't just for the hapless traveller or unfortunate caravan enthusiast (unfortunate and caravan are often found in the same sentence but it is not my intent to demean something that ultimately has the ability to facilitate your escape from Chesterfield. And on this note i should advise all caravan owners leaving the veil of Chesterfield to check for stow away's) This site is also for those of us that through either a past wrong or the cruelty of fate, find ourselves doomed to exist here. Like characters from some Greek tragedy...were already dead, we just haven't noticed the sharp temperature rise or the carrion fat crows. </p>
      <p align="justify">&nbsp;</p>
    </div>
    
    		<div class="style1" id="footer">
    		  <div align="center"><a href="mailto:admin@surviving-chesterfield.co.uk">Email Webmaster </a></div>
    		</div>
    </div>
    
    </body>
    </html>
    Cheers
    Crowds

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Can we see the page rather than have to recreate it. A link would be pretty helpful to get a instant "gist" of the problem. At least for those lazy ones like me. If thats ok.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doh, sorry MattyUK i meant to include a link. I got home last night and thought did i didn't i. And i didnt ! double Doh !
    Here it is
    http://www.surviving-chesterfield.co.uk/test/

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    I think I charged off down the wrong track.

    but i cant see how i can get more than one image inside this div
    Check http://www.realworldweb.co.uk/crowds.htm for guide/help on this. Code pasted below.

    I didn't notice this:
    without starting to create layout cells within in.
    So I guess the question is. Why not??

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    	margin: 0px;
    	padding: 0px;
    }
    a img {
    	border: none;
    }
    .banner {
    	background-image: url(http://www.surviving-chesterfield.co.uk/test/titlespacer.jpg);
    	background-repeat: repeat-x;
    	background-position: left top;
    	margin: 0px;
    	padding: 0px;
    	position: relative;
    	height: 90px;
    	width: 100%;
    	left: 0px;
    	top: 0px;
    }
    .banner img {
    }
    .banner a {
    	background-attachment: fixed;
    	background-image: url(http://www.surviving-chesterfield.co.uk/test/sc3tit.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    	position: relative;
    	height: 90px;
    	width: 750px;
    	left: 0px;
    	top: 0px;
    	text-decoration: none;
    }
    -->
    </style>
    </head>
    <body>
    <div class="banner"><img src="http://www.surviving-chesterfield.co.uk/test/sc3tit.jpg" alt=""></div><br />
    <br />
    <div class="banner"><a href="http://www.surviving-chesterfield.co.uk" target="_self">&nbsp;</a></div><br />
    <br />
    
    <div class="banner"><a href="http://www.surviving-chesterfield.co.uk" target="_self">And a third image tag could go here</a></div><br />
    <br />
    
    <div class="banner">you could nest other divs or spans/other tags here and set the background in the same way as above.</a></div>
    </body>
    </html>
    MattyUK

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks MattyUK, I havent had chance to go over it in full yet but with a quick play it seems to be working just fine. I will go over it in full when i get chance so that i understand what is being done in full (it appears as though one div is sitting above the other, something to do with the left: 0px; top: 0px; you put there am i right?)
    Thanks again
    Crowds

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Nope.

    I authored multiple examples of different ways to approach the problem.

    1st one uses a CSS background on the div banner then an standard image tag within it.

    2nd one uses a CSS background on the div banner then a standard A tag acting as a link to your site containing nothing but a singe white space. The image is loaded as its background and it is sized to be the same size as the image.

    3rd one is to illustrate that the a tag could contain more elements such as another image tag.

    and so on.

    Should be evident once you look at the code.

    I haven't positioned the elements other than on the line they are on, and simply used BRs to space them. You can position the one you select to use as you see fit.

    There is also a sample selector in there to show how you can play with the image within the div without class or id markup. and some sensible selector to remove borders of images within an A tag.

    You can see how it is easily possible to have multiple images overlayed on each other 2, 3, 4, 5 images sitting on top of each other within a single div. You only need 2 but the gist is the same.

    i.e. div has background that image is layered bottom, element in the div has background that is rendered as on top of the div background, standard image tag provides another image layered on top of the previous two and so on.

    Hope that helps.

    MattyUK

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    the left: 0px and top: 0px can be ignored. I was going to use absolute position just as you had before I chose to do a few examples. hence using a class and relative position. left: 0px and top: 0px was just left in by mistake. In the nature of this example there is no need for it.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Small note…

    Quote Originally Posted by MattyUK
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    You can/should probably avoid using the xml prologue (highlighted above in red) as it doesn't serve any real use unless you're serving your xhtml markup as application/xhtml+xml mime-type and dealing with xml. (Unless you specify otherwise, your markup will be served as the usual text/html by default.)

    Aside from doing no good, it will actually cause MSIE6/Win to revert to 'quirks mode' which means it will misbehave, mainly by misinterpreting your css in the same way that MSIE5/Win does.

    Just a heads up.
    Last edited by Bill Posters; 05-19-2005 at 09:47 PM.

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    I had a lot of trouble determining the doctype and xml declaration originally to get the right render mode on FF. I thought I had a good reason for using the xml declaration but can't recall it now. I'll re-investigate now that you mention.

    thanks.


  •  

    Posting Permissions

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