수다닷컴

질문이 있습니당~~

현재 갤러리 게시판을 만들고있는데요-
게시판 하단부분에 다음이미지, 이전이미지를 볼수있도록 구성을 하고있습니다.
그런데 문제가 하나 발생했네요-

- 익스플로어에서 이미지에 마우스 오버했을때 보이는 화면- 파이어폭스에서 이미지에 마우스 오버했을때 보이는 화면위 그림에서 익스프로어 화면처럼 마우스 오버했을때 이미지 주위에 주황색 border가 생겨야하는데요
파이어폭스에서는 길이가 중간에 짤리네요-
이거 왜이럴까요....

//////////////////////////////////////

위 그림의 CSS 속성입니다.

div.gallery_pre {
background-color: #F2F2F2;
padding: 7px 0;
text-align: center;
margin: 11px 0 0 0;
vertical-align: middle;
}

div.gallery_pre ul {
list-style: none;
}
div.gallery_pre ul li {
display: inline;
}
div.gallery_pre ul li.pre img {
margin-top: 22px;
border: none;
}
div.gallery_pre ul li.photo img {
border: 1px solid #fff;
}
div.gallery_pre ul li.photo a:link,
div.gallery_pre ul li.photo a:visited {
border: 2px solid #F2F2F2;
}
div.gallery_pre ul li.photo a:active,
div.gallery_pre ul li.photo a:hover {
border: 2px solid #F36868;
}/////////////////////////////////////////
위 그림의 소스입니다

!-- 이전, 다음 이미지 --
div class=gallery_pre
ul
li class=prea href=#img src=../images/board/gallery_pre.gif alt=이전 width=14 height=14 border=0 //a/li
li class=photoa href=#img src=../images/board/blank_img3.gif alt= width=74 height=54 border=0 //a/li
li class=photoa href=#img src=../images/board/blank_img3.gif alt= width=74 height=54 border=0 //a/li
li class=photoa href=#img src=../images/board/blank_img3.gif alt= width=74 height=54 border=0 //a/li
li class=prea href=#img src=../images/board/gallery_next.gif alt=다음 width=14 height=14 border=0 //a/li
/ul
/div
!-- //이전, 다음 이미지 --//////////////////////////////////////////

아 그리고 현재 100%로 작업하고 있습니다.
위 그림의 형태는 100%에서 가운데 정렬로 작업되야 하구요....
float과 height 값을 넣어서 작업해보니 이미지부분이 밑으로 떨어지네요....
방법좀 알려주세용~~~

신청하기