2009-06-01 7 views
1

포럼에 대한 제안이 있지만 아직 성공에 대한 어떤 신호도 보이지 않았습니다.IE Disappearing Bullet Bug in Floated DIV

글 머리 기호 이미지를 사용하도록 스타일이 지정된 UL이 포함 된 플로팅 div가 있습니다. 모든 호환 브라우저는 이미지를 잘 보여줍니다. IE 6에서 페이지를 새로 고칠 때 글 머리 기호가 자주 나타나지만 페이지가 스크롤 될 때 다시 사라집니다. IE 7에서는 그들은 단지 나타나지 않습니다.

페이지는 여기에 있습니다 :

http://hiv411.org/page.php?pID=13&n=Other_STDs

관련 CSS :

#hiv101STDSidebar UL { 
width:215px; 
} 

#hiv101STDSidebar LI { 
position:relative; /* added per some forum post, no effect*/ 
list-style-image:url(/images/layout/squareBulletBlue.gif); 
} 

어떤 제안이 많이 감사합니다. 이러한 UL을 테이블로 다시 써야하는 것은 부끄러운 일입니다!

답변

3

다른 사람들이 제안한 것처럼 총알 이미지 대신 배경 이미지를 사용하십시오.

HTML

<div id="floated"> 
     <ul> 
      <li> 
       Item 
      </li> 
      <li> 
       Item 2 
      </li> 
     </ul> 
    </div> 

CSS 나에게

div#floated { 
    float: left; 
} 

ul { 
    padding: 0; 
} 

li { 
    background: transparent url(squareBulletBlue.gif) no-repeat 0 2px; 
    list-style-type: none; 
    padding-left: 1.2em; 
} 

IE6의 작품 7, 그 다음하지 않습니다 당신은 당신의 코드 : I 시도

+0

고맙습니다. 구현되어 이제는 행복하게 죽을 수 있습니다! 네가 뉴 올리언스에 있다면 나는 너에게 맥주를 빚지고있어! – jerrygarciuh

+0

지난 달에 있었습니까 :) –

2

글 머리 기호를 배경 특성으로 스타일을 지정하십시오.

selector li { 
    background: transparent url(/images/layout/squareBulletBlue.gif) left center no-repeat; 
    paddding-left: 25px; 
} 

당신은 당신의 ul 선택에 paddingmargin를 재설정해야 할 수도 있습니다.

+0

다른 문제를 가지고있는 경우 그거. 같은 결과. IE6에서는 간헐적으로 표시되고 IE7에서는 표시되지 않습니다. 답장을 보내 주셔서 감사합니다. JG – jerrygarciuh

+0

이 작업은 계속 진행되어야합니다. 좀 더 많은 코드 예제로 게시물을 작성하겠습니다. –

2

이것은 6으로 & 7 해결

#hiv101STDSidebar ul { 
    width: 215px; 
    margin: 0 0 0 0; /* resetting margin */ 
    padding: 0 0 0 40px; /* using padding to position ul */ 
} 

제대로 조사 할 시간이 없었어요,하지만 문제를 일으키는 사이드 바의 상속 왼쪽 여백 것으로 보인다. ul에서 패딩을 사용하면 ie6 및 ie7에서 이상한 동작이 수정되지만 표준 호환 브라우저에서는 좋지 않으므로 조건 lte ie7 css와 함께이 스타일을 추가해야합니다.

희망이 도움이됩니다.

+0

답장을 보내 주셔서 감사합니다! – jerrygarciuh