Another IE v FF using image icons for UL lists.

[Saugilsr]

I have some css to replace the icons in an UL with doc type icons. EG. A pdf gets a pdf icon.
It works flawlessly in FF. As expected...

http://www.st-andrews.com/ff.bmp

However IE _always_ chops off the first icon.. and sometimes cuts the icons in half.. (scrolling up + down revives them)..

http://www.st-andrews.com/ie.bmp

Has anyone run into this type of thing before? Im assuming its and IE bug.. cause.. why not? ;-)

#download-section { background:#E8FBFF; border-top: 1px solid #000099; border-bottom: 1px solid #000099;  width: 125px; float: right; position: relative; left: 60px; margin-bottom: 5px; }


#download-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
#download-section ul li {
  margin: 2px 0 6px 0;
  padding: 0;
  font-weight: normal;
  font-size: 10px;
  text-decoration: none;
  line-height: 19px; /* height of icon */
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
#download-section ul li a {
  padding-left: 23px; /* width of icon + whitespace */
   text-decoration: none;
  }
#download-section ul li {
  margin: 2px 0 6px 0;
  padding: 0;
  font-weight: normal;
  font-size: 10px;
  text-decoration: none;
  line-height: 19px; /* height of icon */
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
#download-section ul li a {
  padding-left: 23px; /* width of icon + whitespace */
   text-decoration: none;
  }
.pdf { background-image: url("/images/icons/pdf.jpg"); }
.htm { background-image: url("/images/icons/bullet_htm.gif"); }
.doc { background-image: url("/images/icons/bullet_doc.gif"); }

 

[Vragabond]

I have not seen that. I have seen IE eat away a chunk of rendered code when using absolute positioning or a lot of JavaScript but simply not showing half of the icon from simple css.

 

[BillyRayPreachersSon]

It appears to be the following CSS on #download-section:

position: relative;
left: 60px;

If I make a test harness (although I had to assume a lot of things, as you have given no HTML), and remove those, all works well.

So - consider another way of positioning that element.

Incidentally, you might want to correct the spelling of "Recomendation" (sic) before putting the site live, and remove the unnecessary duplication of the CSS for these selectors:

#download-section ul li
#download-section ul li a

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Did this fix the problem for you?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Saugilsr]

Sorry, I've been on vacation (out of the country) and I'm just getting back to a connected computer.

Thanks for the insight. I'll try it first thing when Im back at work [Mon]. I'd _really_ like that box to stick where it is though...

Here is the html that inserts the box.

<div id="download-section">
<ul class="download-list">
<li class="htm"><a href="documents/Student%20application.pdf">Application</a></li>
<li class="pdf"><a href="documents/Doctor%20Report%20etc.pdf" target="_new">Doctors Report</a></li>
<li class="pdf"><a href="documents/St%20Andrew%27s%20Recommendation.pdf">Schl. Recomendation</a></li>
<li class="pdf"><a href="documents/fees03-04.pdf" target="_new">School Fees 03/04</a></li>
<li class="pdf"><a href="documents/fees04-05.pdf" target="_new">School Fees 04/05</a></li>
<li class="pdf"><a href="documents/fees05-06.pdf" target="_new">School Fees 05/06</a></li>
<li class="htm"><a href="[URL unfurl="true"]http://www.oanda.com/convert/classic"[/URL] target="_new">Currency Converter</a></li>
  </ul>
  </div>

Full html:

http://www.st-andrews.com/devel/content/about/admissions.asp

Thanks again for your help!

 

[tsdragon]

I seem to remember reading something about the left margin setting having to do with bullets getting cut off. You might check MSDN under li styles and see what you can find.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.