...

View Full Version : CSS banner DIV and images display error in IE 6



Crowds
05-18-2005, 07:40 PM
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

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

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

MattyUK
05-18-2005, 10:31 PM
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.

Crowds
05-19-2005, 04:35 PM
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/

MattyUK
05-19-2005, 05:40 PM
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??


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

Crowds
05-19-2005, 06:46 PM
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

MattyUK
05-19-2005, 07:21 PM
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

MattyUK
05-19-2005, 07:23 PM
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.

Bill Posters
05-19-2005, 08:43 PM
Small note…



<?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. :)

MattyUK
05-19-2005, 09:14 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum