My CSS Gallery

Hey, I am having troube with my css gallery. it is located here:

http://cssgallerytesting.nrtdesigns.com/

If you have firefox/opera it will work fine but in IE it has many problems. If you have any sugestions please let me know :)
Edit: adding code


/*******************************
BODY AND WRAP STYLES
*******************************/

body {
font-family:Verdana, sans-serif;
font-size:12px;
margin-top:20px;
background:white;
}

#wrapper {
width:550px;
padding-bottom:15px;
padding-top:10px;
margin:auto;
border: 2px solid #000066;
}

/*******************************
THE GALLERY
*******************************/

ul.gallery {
width:200px;
list-style:none;
}

ul.gallery li {
border-bottom:solid 1px #004d8b;
}

ul.gallery a{
width:200px;
padding: 5px 5px 5px 5em;
display:block;
text-decoration:none;
color: #000000;
}


/********************************************************
NOTE: BACKGROUND IMAGE MUST BE
HEIGHT: 155PX OR LESS
MUST CHANGE CSS FOR DIFFERENT HEIGHETS
*********************************************************/


ul.gallery p.photo1 {
width:500px;
height:155px;
padding: 5px 5px 5px 0px;
margin-top:0px;
margin-bottom:-135px;
font-weight:bold;
background: url(photo1.gif) no-repeat 215px 1px;
}



a:hover.photo2 {
background: url(photo2.gif) no-repeat 215px -0px;
width:500px;
height:155px;
margin-top:-30px;
margin-bottom:-111px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo3 {
background: url(photo3.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-55px;
margin-bottom:-86px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo4 {
background: url(photo4.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-80px;
margin-bottom:-61px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo5 {
background: url(port.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-105px;
margin-bottom:-36px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo6 {
background: url(port.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-130px;
margin-bottom:-11px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo7 {
background: url(photo4.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-105px;
margin-bottom:-35px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo8 {
background: url(photo3.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-70px;
margin-bottom:-70px;
color:#f61a3e;
font-weight:bold;
}

a:hover.photo9 {
background: url(photo2.gif) no-repeat 215px 0px;
width:500px;
height:155px;
margin-top:-35px;
margin-bottom:-105px;
color:#f61a3e;
font-weight:bold;
}

It might help if you put up some of your CSS. The simplest solution would be to write a little footer on your site that says to get rid of IE and switch to Firefox...:thumbsup:

It might help if you put up some of your CSS. The simplest solution would be to write a little footer on your site that says to get rid of IE and switch to Firefox...:thumbsup:

Now that is not good practice. Even though I hate IE too, getting one of those statements is annoying. People are able to choose what browser they wish to use and if they don't want to go through all the "hassle" it is to switch browser, then fine (even though they would most likely get a better internet experience).

I haven;t tried out your code but I recall from a time when I was doing some CSS that the -135px type value screwed up the consistency between browsers.

As soon as I made all valules positive or rermoved them completely, the browsers worked very similarly. might be worth your trying.

FWIW, my starting point would be to use the code so that the links work as per html (with minimal styling), and then make the rollover position absolute so that the corresponding image will always be in the same place. But then, maybe you are trying to find a way which uses less html code?

bazz