SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    NJ
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1px height div in IE

    simple question... how do you make a div with a height of 1px in IE? this works in most browsers (firefox, opera, konq):
    Code:
    div.bar {
      background: #fff url(/images/bg.png) repeat-y;
      height: 1px;
    }
    but IE displays it much bigger than 1px... it looks like it's displaying it as if there were text inside it. so i tried this:
    Code:
    div.bar {
      background: #fff url(/images/bg.png) repeat-y;
      height: 1px;
      font-size: 1px; /* IE hack to display 1px height div */
    }
    it's better, but it still looks like it's about 2-3 px high.

    any ideas?

    or maybe someone has a better idea on how to do what i want? it's basically replicating an <hr> but with a background image. i'd use a normal <img> but the image is 800px wide and i don't want 800x600 users to have to scroll.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    try overflow hidden

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>123456 123456 123456 123456</title>
    	<style type="text/css">
    	.hra{
    	background-color:#ff0000;
    	height: 1px;
    	width:60%;
    	overflow: hidden;
    	}
    </style>
    </head>
    <body>
    <div class="hra"></div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    NJ
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you, i'll try that next time i have a windows computer at my disposal to test with.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE/Win wrongly makes non-empty elements have a miniumum height of 1em.

    To compensate for this use this.
    Code:
    line-height:0;
    font-size:0;
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •