PDA

View Full Version : Trouble with bullets displaying in IE6


laddie 1997
03-09-2006, 08:44 AM
I have created coloured bullets on a DW page by introducing standard mono bullets in DW and creatin a CSS bulletstyle that sucks in a coloured gif bullets and replaces the black ones. This displays fine in DW with the bottom of the coloured bullet positioned in line with the bottom of the text. But viewed in IE6 the bullet moves to the top of the line a bit like superscript. Does anyone have any ideas about how I could bring the bullet down?

Many thanks

davidj
03-09-2006, 10:06 AM
please post a link to the site or a screen print
please post code

laddie 1997
03-10-2006, 08:35 AM
Many thanks for responding. I have posted the following:

index-black.jpg: Screen capture from IE6 showing the standard DW black bullets displaying as I want them, on the base line.

index-blueDW.jpg: Screen capture of page from DW showing blue bullets displaying correctly.

index-blue.jpg: The same page in IE6 showing the how the bullets have moved to the top of the text line. I would like them to display at the bottom or centre of the line.

I'll be very grateful if you, or anyone else, has any suggestions.

Dave Allen

Here is the code for index-black.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("/stylesheet.css");
-->
</style>
</head><link rel="stylesheet" href="sheet1.css">
<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;
} }
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x ; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style15 {font-size: 18pt;
color: #1255A3;
font-weight: bold;
}
.style2 {font-family: Arial, Helvetica, sans-serif}
.style17 {
color: #1255A3;
font-size: 14pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>

<body onLoad="MM_preloadImages('homeY-gif.gif','How_we_operateY-gif.gif','other_servicesY-gif.gif','about_usY-gif.gif','contact_usY-gif.gif')">


</p>


</p>
<div id="Layer1" style="position:absolute; width:758px; height:101px; z-index:1; left: 8px; top: 13px;">Logobak2use2b-gif.gif</div>


</p>
<div id="Layer2" style="position:absolute; width:758px; height:43px; z-index:2; top: 113px; left: 8px;">homeW-gif.gif (http://www.valuepr.co.uk/home2.htm)How_we_operateW-gif.gif (how_we_operate.htm)other_servicesW-gif.gif (other_services.htm)about_usW-gif.gif (about_us.htm)contact_usW-gif.gif (contact_us.htm)</div>


</p>
<div id="Layer3" style="position:absolute; width:712px; height:35px; z-index:3; left: 8px; top: 156px;">Banner1c-gif.gif</div>


</p>
<div id="Layer1" style="position:absolute; width:706px; height:330px; z-index:1; left: 35px; top: 218px;">
<p align="center" class="style2"><span class="style15">Pay only for results</span> </p>
<p class="verdana10pt15">Value PR is different. We offer a budget priced, modular News Service - and you only pay for results.</p>
<ul>
<li class="verdana10pt15">Got a new product, service or success story you want to tell your customers about?
<li class="verdana10pt15">Don't know how to go about it?
<li class="verdana10pt15">Put off by stories of expensive PR campaigns that achieve nothing?
<li class="verdana10pt15">Think you can't afford PR anyway?
[/list]
<p class="verdana10pt15">Think again!

We'll charge &pound;250 to turn your announcement into a news story, and send it with a photograph to an agreed list of trade and local publications. We then telephone the journalists to persuade them to publish, and when we are successful, you pay us &pound;50 for each publication that actually carries the story. How's that for honest PR, and guaranteed value for money?</p>
<p align="center" class="verdana10pt15">info@ValuePR.co.uk (mailto:info@ValuePR.co.uk)</p>
</p>
</div>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>
<h2></h2>


</p>
</body>
</html>


This is the code for index-blue.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("/stylesheet.css");
-->
</style>
<link href="BlueBullet9pt.css" rel="stylesheet" type="text/css">
</head><link rel="stylesheet" href="sheet1.css">
<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;
} }
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x ; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style15 {font-size: 18pt;
color: #1255A3;
font-weight: bold;
}
.style2 {font-family: Arial, Helvetica, sans-serif}
.style17 {
color: #1255A3;
font-size: 14pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>

<body onLoad="MM_preloadImages('homeY-gif.gif','How_we_operateY-gif.gif','other_servicesY-gif.gif','about_usY-gif.gif','contact_usY-gif.gif')">


</p>


</p>
<div id="Layer1" style="position:absolute; width:758px; height:101px; z-index:1; left: 8px; top: 13px;" class="BlueBullet9pt">Logobak2use2b-gif.gif</div>


</p>
<div id="Layer2" style="position:absolute; width:758px; height:43px; z-index:2; top: 113px; left: 8px;">homeW-gif.gif (http://www.valuepr.co.uk/home2.htm)How_we_operateW-gif.gif (how_we_operate.htm)other_servicesW-gif.gif (other_services.htm)about_usW-gif.gif (about_us.htm)contact_usW-gif.gif (contact_us.htm)</div>


</p>
<div id="Layer3" style="position:absolute; width:712px; height:35px; z-index:3; left: 8px; top: 156px;">Banner1c-gif.gif</div>


</p>
<div id="Layer1" style="position:absolute; width:706px; height:330px; z-index:1; left: 35px; top: 218px;">
<p align="center" class="style2"><span class="style15">Pay only for results</span> </p>
<p class="verdana10pt15">Value PR is different. We offer a budget priced, modular News Service - and you only pay for results.</p>
<ul>
<li class="BlueBullet9pt">Got a new product, service or success story you want to tell your customers about?
<li class="BlueBullet9pt">Don't know how to go about it?
<li class="BlueBullet9pt">Put off by stories of expensive PR campaigns that achieve nothing?
<li class="BlueBullet9pt">Think you can't afford PR anyway?
[/list]
<p class="verdana10pt15">Think again!

We'll charge &pound;250 to turn your announcement into a news story, and send it with a photograph to an agreed list of trade and local publications. We then telephone the journalists to persuade them to publish, and when we are successful, you pay us &pound;50 for each publication that actually carries the story. How's that for honest PR, and guaranteed value for money?</p>
<p align="center" class="verdana10pt15">info@ValuePR.co.uk (mailto:info@ValuePR.co.uk)</p>
</p>
</div>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>
<h2></h2>


</p>
</body>
</html>

d a v e
03-10-2006, 10:42 AM
but we can't see the css. post a link to the pages so we can see the html AND the css.

UPDATE:
thinking about it though, i think it is just differnces in rendering preferences between browser: i get the same here ( http://members.tiscali.fi/dave_pirjo/test-area/css_stuff/lists.htm ) in IE and opera the bullets are higher. you could make the image with a few px more of white/transparent canvas/background at the top to push it down, but it may appear lower in firefox.

oh just tried it and adding about 5px of space (in your image editor) to the top of the image background looks good in all 3 :D

laddie 1997
03-11-2006, 08:52 AM
Thank you, I'll give the pixel tip a try.....

laddie 1997
03-13-2006, 09:49 AM
Ok guys, thank you very much for the tip about adding in the pixels it sorted out the problem. Thanks for spending time on it and thanks to Dreamweaver club - altogether brilliant help!

Have a good week,

Dave Allen

d a v e
03-13-2006, 02:20 PM
glad it worked!
:)