I have set up an old laptop with IE 6 so I can test my site as I am working on it in that browser. Wow! There is some crazy stuff going on with that.

On this page I have a bullet list with links. This works fine in FF and IE7, but in IE6, the bullet images don't show up initially, then seem to disappear and reappear at will???

That is my first issue with IE6...

Any ideas why this would happen??? Thanks for your help

CSS:

p {
    color: #000000;
    text-align: justify;
    margin: 1em 380px 1em 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
p.thumbs{
    color: #000000;
    text-align: justify;
    margin: 2em 450px 2em 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}    
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}
body {
    background: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
ul{
    margin: 10px 15px 20px 10px;
}
li.sixphaseapproach{
    list-style: none;
    background: url(images/bullet.gif) no-repeat left top; 
    margin: 0px 15px 20px 25px;
    padding-left: 20px;
}
li.bullets{
    list-style: none;
    color: #000000;
    background: url(images/bullet2.gif) no-repeat left top; 
    margin: 2px 15px 3px 25px;
    padding-left: 15px;
}
.style5 {
    color: #000000;
    text-align: justify;
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left;  margin-bottom: 5px; font-size: 11px;}
A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

.menu A:link {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:visited {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:active {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:hover {font-family: Arial, Helvetica, sans-serif; color: #999999; text-decoration: none}

.bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left;  margin-bottom: 5px; font-size: 11px;}
.bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
.bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
.bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

#bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}

.pagelinks a:link {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:visited {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:active {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.pagelinks a:hover {
    font-family: Arial, Helvetica, sans-serif; 
    color: #666666 ; 
    text-decoration: none; 
    float: right; 
    padding-right: 15px;
    display: block;
}
.style6 {
    color: #CC0000;
    font-weight: bold;
}
.sixphase {
    color: #CC0000;
    font-size: 13px;
    font-weight: bold;
}
#sixphasetext {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-left: 50px;
}
.style7 {color: #FFFFFF}

img.title {
    padding: 8px 0px 0px 10px;
}
img.title2 {
    padding: 20px 0px 0px 10px;
}
img.govtlogos {
    padding: 10px 0px 5px 5px;
    text-align: center;
}
img.usbgc {
    float: right;
    padding: 0px 30px 30px 5px;    
    width: 100px;
    height: 101px;
}
img.right {
    float: right;
    height: 374px;
    width:  355px;
}
#rightani {
    float: right;
    height: 374px;
    width: 355px;
}
#container {
    background: #FFFFFF;
    width: 924px;
    height: 577px;
    border: hidden;
    border-width: 0;
    margin: auto auto auto auto;
}
#toplinks {
    background: url(images/topbar.jpg);
    padding: 9px 20px 0 0;
    height: 24px;
    width: 904px;
}
#image1 {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image2 {
    position: absolute;
    visibility: hidden;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image3 {
    position: absolute;
    visibility: hidden;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image4 {
    position: absolute;
    visibility: hidden;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#image5 {
    position: absolute;
    visibility: hidden;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 0px;
}
#surveycontent {
    background: #FFFFFF;
    position: float;
    padding: 10px 10px 10px 10px;
    height: 374px;
    width: 903px;
    left: 0px;
    top: 0px;
}
#content {
    position: relative;
    background: #FFFFFF;
    margin: 0 0 0 0;
    height: 374px;
    width: 924px;
}
#footer {
    clear: both;
    text-align: center;
    background: url(images/bottombar.gif);
    padding-top: 8px;
    height: 22px;
    width: 924px;
}
#thumbs {
    position: absolute;
    margin: 11px 15px 10px 15px;
    width: 57px;
    height: 353px;
    top: 0px;
    right: 355px;
}

HTML:

<!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>Systems&amp;Space, Inc.|High-Denisty Mobile Shelving|Compact Shelving|Rolling Files|Shelving Systems|Storage Systems|Modular Millwork|Casework|Pharmacy Casework|Law Enforcement Products|Evidence Lockers|Personnel Duty Lockers|Filing Services</title>
<script language="JavaScript" src="../menu.js"></script>
<script language="JavaScript1.2" src="../mm_menu.js"></script>
<link href="../styles.css" rel="stylesheet" type="text/css" media="all" />

<script 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_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body onload="MM_showHideLayers('image1','','show','image5','','hide','image4','','hide','image3','','hide','image2','','hide');MM_preloadImages('../images/aboutslice_f2.gif','../images/contactslice_f7.gif','../images/filingslice_f4.gif','../images/servicesslice_f5.gif','../images/solslice_f3.gif','../images/spaceslice_f6.gif','../images/whois-corphq.jpg','../images/whois-mobile.jpg','../images/whois-modmillwork.jpg','../images/whois-quickspace.jpg','../images/whois-rotary.jpg')">

<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="container">
 <div id="toplinks" align="right"><span class="menu"><a href="spaceanalysis.html">Request a Space Analysis</a></span><span class="style7">  |  </span><span class="menu"><a href="brochurereq.html">Download our Corporate Brochure</a></span><span class="style7">  |  </span><span class="menu"><a href="http://store.systemsnspace.com" target="_blank">Online Store</a></span></div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="924" height="90">
      <param name="movie" value="../images/index.scroll.swf">
      <param name="quality" value="high">
      <embed src="../images/index.scroll.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="90"></embed>
  </object>
<img src="../images/partners_bar.jpg" /><br />
<img name="logoslice" src="../images/logoslice.gif" alt=""><img name="aboutslice" src="../images/aboutslice.gif" width="116" height="26" border="0" usemap="#m_aboutslice" alt=""><img name="solslice" src="../images/solslice.gif" width="170" height="26" border="0" usemap="#m_solslice" alt=""><img name="filingslice" src="../images/filingslice.gif" width="144" height="26" border="0" usemap="#m_filingslice" alt=""><img name="servicesslice" src="../images/servicesslice.gif" width="116" height="26" border="0" usemap="#m_servicesslice" alt=""><img name="spaceslice" src="../images/spaceslice.gif" width="159" height="26" border="0" usemap="#m_spaceslice" alt=""><img name="contactslice" src="../images/contactslice.gif" width="119" height="26" border="0" usemap="#m_contactslice" alt="">
<map name="m_aboutslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092146_4,0,26,null,'aboutslice');MM_nbGroup('over','aboutslice','../images/aboutslice_f2.gif','',1);"  >
</map>
<map name="m_solslice">
<area shape="rect" coords="0,0,170,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092635_3,0,26,null,'solslice');MM_nbGroup('over','solslice','../images/solslice_f3.gif','images/solslice_f3.gif',1);">
</map>
<map name="m_filingslice">
<area shape="rect" coords="0,0,144,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0620150716_5,1,26,null,'filingslice');MM_nbGroup('over','filingslice','../images/filingslice_f4.gif','',1);">
</map>
<map name="m_servicesslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093043_2,1,26,null,'servicesslice');MM_nbGroup('over','servicesslice','../images/servicesslice_f5.gif','',1);">
</map>
<map name="m_spaceslice">
<area shape="rect" coords="0,0,159,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093241_1,0,26,null,'spaceslice');MM_nbGroup('over','spaceslice','../images/spaceslice_f6.gif','',1);">
</map>
<map name="m_contactslice">
<area shape="rect" coords="0,0,119,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093406_0,0,26,null,'contactslice');MM_nbGroup('over','contactslice','../images/contactslice_f7.gif','',1);"></map>
<div id="content">
    <div id="image2"><img src="../images/whois-mobile.jpg" width="355" height="374" /></div>
    <div id="image3"><img src="../images/whois-rotary.jpg" width="355" height="374" /></div>
    <div id="image5"><img src="../images/whois-quickspace.jpg" width="355" height="374" /></div>
    <div id="image4"><img src="../images/whois-modmillwork.jpg" width="355" height="374" /></div>
    <div id="image1"><img src="../images/whois-corphq.jpg" width="355" height="374" /></div>
    
    <img class="title" src="../images/title-whois.gif" width="282" height="38" />
    <p class="thumbs">
Systems &amp; Space inc. has been providing comprehensive storage and space solutions for Northern California since 1988.  What makes     SSI unique is that we are a &ldquo;single source&rdquo; storage partner for over 80% of our customers.</p>
<p class="thumbs">Our applicaton knowledge and expertise are honed by years of experience, the reason over 83% of our new business comes from existing clients. SSI understands the composition and characteristics that are essential to space management and workflow efficiency.<br />
</p>
<p class="thumbs">We specialize in developing storage and workflow solutions:</p>

<ul>
<li class="bullets"><a href="/solutions/mobile.html">High-Density Mobile Storage</a></li>
<li class="bullets"><a href="/solutions/shelving.html">Shelving Systems</a></li>
<li class="bullets"><a href="/solutions/modmillwork.html">Modular Millwork</a></li>
<li class="bullets"><a href="/solutions/dsmlockers.html">Law Enforcement Lockers</a></li>
<li class="bullets"><a href="/solutions/rcsmith.html">Medical Casework</a></li>
<li class="bullets"><a href="/solutions/profserve.html">Professional Filing Solutions</a></li>
</ul>

<div id="thumbs">
    <img src="../images/whois-corphq-t.jpg" alt="Corporate Headquarters thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','hide','image5','','hide','image4','','hide','image1','','show')" /><br />
    <br />
    <img src="../images/whois-mobile-t.jpg" alt="Mobile System Thumb" width="57" height="60" onmouseover="MM_showHideLayers('image2','','show','image3','','hide','image5','','hide','image4','','hide','image1','','hide')" /><br />
    <br />
    <img src="../images/whois-rotary-t.jpg" alt="Rotary Thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','show','image5','','hide','image4','','hide','image1','','hide')" /><br />
    <br />
    <img src="../images/whois-modmillwork-t.jpg" alt="Modular Millwork Thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','hide','image5','','hide','image4','','show','image1','','hide')" /><br />
    <br />
    <img src="../images/whois-quickspace-t.jpg" alt="QuickSpace Thumbnail" width="57" height="60" onmouseover="MM_showHideLayers('image2','','hide','image3','','hide','image5','','show','image4','','hide','image1','','hide')" /></div>
</div>
<div id="footer"><span class="style1">&copy; 2007 Systems &amp; Space, Inc  |  500 Boulder Court, Ste. B  |  Pleasanton, CA 94566  |  800.766.7612  | <span class="menu"><a href="mailto:info@systemsnspace.com">info@systemsnspace.com</a></span> |  CA License # 599899</span></div>
</div>
</body>
</html>

Wow thats odd :S

Sorry not too sure why thats going on, I just wanted to say thats a really nice site

Thank you Danny

Prior to finding this forum, I was laying it out in tables (inside tables, inside tables LOL), but I have since seen the light

I think the problem lies somewhere in the .bullets A styles, I thought I might need to add the background image of the bullet to that style, but when I did I got 2 of them...

So I'm not sure what is causing this... but it is only happening in IE6...

lol well I'd love to help you but I don't have IE6 on this computer and I'm not good enough to locate the problem without

IE6 does do some weird crap with bulleted lists, to say the least.

You've got conflict of sorts going on though. You've got the bullet as a background to the LI with a .bullets class, then you apply a different set of rules for .bullets a:link. I made the changes as follows and it works in IE 6 and FF:

.bullets a:link {
color: #000000;
text-decoration: underline;
text-align: left;
margin-bottom: 5px;
font-size: 11px;
background: url(bullet2.gif) no-repeat left top;
margin: 2px 15px 3px 25px;
padding-left: 25px;
}

li.bullets{
list-style: none;
}

Because IE uses margins and Mozilla uses padding, you'll have to make the values for each match.

Thanks LadynRed, I knew you would figure it out!

However, I have other bulleted lists that aren't links, but I suppose i could just change the li.bullets to li.nolinkbullets or something... just so the names aren't the same there should be no conflict...right?

And thanks for the info on the margins vs. padding, that was driving me nuts!

I suppose i could just change the li.bullets to li.nolinkbullets or something... just so the names aren't the same there should be no conflict...right?

Right

OK, I got my bullets to show up in IE6, but I had to change to list-style: url
Now IE 6 & 7 seem to be ignoring my margins/padding...

This is the page I am having trouble with

this is the only CSS I changed:

li.sixphaseapproach{
list-style: url(images/bullet.gif);
text-align: justify;
margin: 0px 25px 20px 25px;
padding: 0px 25px 0px 0px;
}

and the html:

<ul>
<li class="sixphaseapproach"><span class="sixphase">Meet </span>and listen to your management team and department managers to develop a comprehensive program with suggested solutions that are achievable within your timelines</li>

<li class="sixphaseapproach"><span class="sixphase">Develop </span>a design solution utilizing our CAD specialists to create a complete under-standing of your  equipment and floor space requirements within a precise integration plan</li>

<li class="sixphaseapproach"><span class="sixphase">Present </span>and review a design solution with all key team members from each department to ensure all programming needs have been met</li>

<li class="sixphaseapproach"><span class="sixphase">Review </span>and acknowledge the order process and confirm critical time lines for project management schedules</li>

<li class="sixphaseapproach"><span class="sixphase">Install </span>product and systems solution in accordance with customer&rsquo;s time line</li>

<li class="sixphaseapproach"><span class="sixphase">Complete </span>project and conduct personnel training program as specified</li>
</ul>