Forums

Frodo64

I have started to style new web page, everything was alright till I opened IE6 (I was working with FireFox3 and Opera). And OMG?! Whats that, IE6 displaying it pritty bad :(. So how to make, that IE6 display the page the same as FireFox3 or Opera. How to fix these 'bugs'? Thanks as always :)

Site adress: http://www.test.klausyk.net/stat/index.html
CSS: http://www.test.klausyk.net/stat/style.css

P.s It looks like that IE6 dont understand the height, strange.. :/

Frodo64

I have managed to fix these bugs by my self. But I got a new one :P :/ . The list-style-image is displaying bad on IE6, Opera (it's not centered or something). Its OK on FF 3, Safari, but not on other browsers. Look at the list, the arrow is not centered. So if you know how to fix it please let me know.

Site adress: http://www.test.klausyk.net/stat/index.html

Frodo64

Hmm.. No body knows or what? It's very important for me :/ :(

chriscoyier

List-style-image is almost always a bad CSS attribute to use. It has serious cross-browser issues that are difficult to account for. You are far better off setting a background image on your LI elements instead, as the positioning is consistent across browser that way.

So instead of using:


cats ul {
  list-style-image:url(images/arrow.gif);
}

Use:


cats ul li {
  background: url(images/arrow.gif) left center no-repeat;
  padding-left: 20px;  /* or whatever the width of the image is */
}

treehouse : what would you like to learn today?

Forums

Bugs on IE6 only, as always :(