티스토리 뷰
웹프로그래밍/css
IE에서 li img float: left 들을 table-row 모양으로 clear:left 하는법 (IE Hack)
공허공자 2008. 9. 16. 17:56선언한 DocType 은
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
에서 prototype & scriptaclous 중 autocomplete 기능을 구현하다가
<ul>
<li><span><img style='float:left' /></span>xxxxxxx</li>
<li><span><img style='float:left' /></span>xxxxxxx</li>
<li><span><img style='float:left' /></span>xxxxxxx</li>
</ul>
를 table-row 모양으로 보여주려고
<li style='clear:left'><span><img style='float:left' /></span>xxxxxxx</li>
해봤는데 FireFox 에서는 잘 되었으나 IE 7.0 에서는 먹히지 않았다.
골때리는 이 문제로 구글링을 할 수 밖에 없었으며 결국 아래의 페이지를 찾아 해결봤다.
http://www.greywyvern.com/code/min-height-hack
중간에 보면 Important 란 굵직한 제목으로 내가 원하는 예제가 확실히 적혀 있었다.
<li style="height:1%;"><span class="informal"><img style="float:left" /></span>xxxxxxx<div style="clear:both; height:1px; overflow:hidden;"></div></li>
했더니 IE/FF 상에서 아주~ 잘 작동하였다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
에서 prototype & scriptaclous 중 autocomplete 기능을 구현하다가
<ul>
<li><span><img style='float:left' /></span>xxxxxxx</li>
<li><span><img style='float:left' /></span>xxxxxxx</li>
<li><span><img style='float:left' /></span>xxxxxxx</li>
</ul>
를 table-row 모양으로 보여주려고
<li style='clear:left'><span><img style='float:left' /></span>xxxxxxx</li>
해봤는데 FireFox 에서는 잘 되었으나 IE 7.0 에서는 먹히지 않았다.
골때리는 이 문제로 구글링을 할 수 밖에 없었으며 결국 아래의 페이지를 찾아 해결봤다.
http://www.greywyvern.com/code/min-height-hack
중간에 보면 Important 란 굵직한 제목으로 내가 원하는 예제가 확실히 적혀 있었다.
<li style="height:1%;"><span class="informal"><img style="float:left" /></span>xxxxxxx<div style="clear:both; height:1px; overflow:hidden;"></div></li>
했더니 IE/FF 상에서 아주~ 잘 작동하였다.
'웹프로그래밍 > css' 카테고리의 다른 글
CSS Hack 없이 Cross-Browser 가능한 같은 높이의 열 레이아웃 구현 (0) | 2009.03.26 |
---|---|
CSS 관련 링크모음 (0) | 2009.03.25 |
테이블 열(table tr row) 에 마우스 올림 효과(hover) (0) | 2009.03.09 |
Layout CSS (Grid & Column) (0) | 2008.09.11 |
CSS 만으로 구현하는 드롭다운 메뉴 (0) | 2008.09.10 |
댓글
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- Make Use Of
- How to geek
- 인터넷 통계정보 검색시스템
- 트위터 공유 정보모음
- 웹표준KR
- 치우의 컴맹탈출구
- Dev. Cheat Sheets
- w3schools
- Dev. 조각들
- ASP Ajax Library
- CSS Tricks
- WebResourcesDepot
- jQuery Selectors Tester
- DeveloperSnippets
- Smashing Magazine
- Nettuts+
- devListing
- 웹 리소스 사이트(한)
- Mobile tuts+
- Dream In Code
- Developer Tutorials
- CSS3 Previews
- 자북
- 안드로이드 사이드
- Code Visually
- Code School
- SQLer.com
- 무료 파워포인트 템플릿
- iconPot
- Free PowerPoint Templates
- Design Bombs
- Web Designer Wall
- 1st Webdesigner
- Vandelay Design
- 무료 벡터 이미지 사이트들
- Tripwire Magazine
- Web TrendSet
- WebMonkey
- 윤춘근 프리젠테이션 디자이너 블로그
- cz.cc 무료 DNS
- [웹하드] MediaFire
- [웹하드] DivShare
- 한컴 인터넷 오피스
TAG
- Debug
- Chrome
- API
- javascript
- Prototype
- JSON
- centos
- iis
- iphone
- 워드프레스
- nginx
- Docker
- 안드로이드
- Android
- Linux
- PHP
- JQuery
- CSS
- classic asp
- ASP
- 한글
- laravel
- nodejs
- Mac
- sencha touch
- IOS
- mssql
- git
- Wordpress
- IE
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함