수다닷컴

위에 트위터, 페이스북 있는 아이콘들이 오버했을 시에 색이 바뀌는걸 css로 하고 싶습니다.
저 아이콘이 페이지마다 하나가 나올때도 있고 다 나올 때도 있습니다.
항상 center정렬로 있어야하는데요..
li {
float:left;
margin:0 3px;
}
li a {
width:54px;
height:49px;
text-indent:-1000px;
display:block;
}
li a.twitter {
background:url(/images/btn/btn_twitter_off.gif) no-repeat;
}
li a.twitter:hover {
background:url(/images/btn/btn_twitter_on.gif) no-repeat;
}
이렇게하면 float:left때문에 가운데 정렬이 안되더군요..
부모박스에 width값도 줘서 margin:auto를 주면 저 4개가 다 있을시에는 상관 없지만 하나라도 빠지면 center정렬이 안되구요..

또...

.rollover img.imgover , .rollover:hover img{
display:none;
}
.rollover img , a.rollover:hover , .rollover:hover img.imgover {
display:inline;
}

li
a href= class=rollover
img src=/images/btn/btn_twitter_off.gif alt=트위터 /
img src=/images/btn/btn_twitter_on.gif alt=트위터 class=imgover /
/a
/li

이런식으로 주면 익스8.0과 파이어폭스등은 잘 보이지만
익스6.0 ,7.0등에서는 이미지가 흔들려서 보이더군요.ㅠㅠ

css만으로는 힘든가요???
다른 방법이나 해결방법 부탁드립니다.ㅠㅠ

신청하기